# Is there a way to do this progressively?

Hello,

I need to make a mathematical flower as shown in this Coding Train video (https://www.youtube.com/watch?v=f5QBExMNB1I&t=6s) but I’d like it to appear progressively, as starting in the middle and drawing out the trajectory step by step. I’m very much of a rookie, so I apologise if this is a silly question. I’ve been using the source code given in the video:
I’ve tried to make an array out of the position of x and y, erased the beginshape and endshape and tried to declare x as an x + r * cos(a) and same with y, but doesn’t work, it just keeps drawing it as a whole.

float d = 8;
float n = 5;

void setup() {
size(400, 400);
}

void draw() {
float k = n / d;
background(51);
translate(width / 2, height / 2);

stroke(255);
noFill();
for (float a = 0; a < TWO_PI * d; a += 0.02) {
float r = 200 * cos(k * a);
float x = r * cos(a);
float y = r * sin(a);
ellipse(x,y,30,30);
}

Hello,

``````float limit = 0;

void setup() {
size(400, 400);
}

void draw() {
background(51);
limit += TAU/1000;
for (float a = 0; a < limit * d; a += 0.02) {
//Do something;
}
}
``````

You have to consider also what will happen at the limit.

Hey, thank you for your quick reply! I tried to copy your code and paste it onto processing but I kept the ellipse code onto it and the thing is> this code erased the ellipse from appearing at all. And what I meant by progressively, is to form the mathematical rose image starting at a center point and slowly trace it. But I can’t get rid of the ellipse because I’m going to place an image array onto it.

I can paste the entire code here, regarding it, but it’s a bit messy and I tried some parametric equations onto it, so it might even more confusing.

One way to do it using your example:

``````float d = 8;
float n = 5;
float limit = 0;

void setup()
{
size(400, 400);
}

void draw()
{
float k = n / d;
background(51);
translate(width / 2, height / 2);

//stroke(255);
stroke(0, 255, 0, 128);
noFill();

limit += TAU/1000;

for (float a = 0; a < limit * d; a += 0.02)
{
float r = 200 * cos(k * a);
float x = r * cos(a);
float y = r * sin(a);
ellipse(x, y, 30, 30);
}
}
``````

The ellipse doesn’t appear with that code. I think the float limit = 0 cancels the multiplication at te for formula. Here’s what happened when a < TWO_PI * d:

When applied the code you gave me, it just doesn’t show it.

PX, PA and PY are equal to the ones given in the video, I only used it because I already had x,y and a’s

And here’s what what the other ellipses are doing and what I wanted this ellipse w/ the mathematical rose formula to do:

This is what my posted code does here:

I left that for you to consider.

Please post your code (minimal) if you want help and our insights.

Oh, sorry for not doing it before, I’m still new here.

PImage ceu1;
PImage ceu2;
PImage ceu3;
PImage criacao0;
Movie video;

//parametric variables
float t;
float c;
float w;

//rotate
float a;
float b;

//linear movement
float mx;
float mxy;
float my;
float myx;
float mspeedx = random (10,30);
float mspeedy = random (10,30);

//petal
float d = 8;
float n = 5;
float k = n / d;
float px;
float py;

//parametric equations

float x(float t) {
return sin(t/30)*30;
}

float y(float t) {
return cos(t/30)*30;
}

float a(float c) {
return cos(c/25)*150 + sin (c/12)*100;
}
float b(float c) {
return sin(c/25)*200 + cos(c/12)*100;
}

float q(float w) {
return sin(w/50)*300;
}
float e(float w) {
return cos(w/50)*250;
}
float limit = 0;

void setup() {
size(1080,720);
//video = new Movie(this, “fundo.mp4”);
//video.loop();
frameRate(30);
}

void movieEvent() {

}

void draw() {

imageMode(CENTER);
image(criacao0, width/2, height/2,30,30);

//non circular ellipses
ellipse(mx+x(t),300+x(t),30,30);
ellipse(mx+y(t),420+y(t),30,30);
mx = mx + mspeedx;

ellipse(600+y(t),my+y(t),30,30);
my = my + mspeedy;

if(my >= height || my <= 0) {
mspeedy = mspeedy * random(-1,-3);

}

if(mx >= width || mx <= 0) {
mspeedx = mspeedx * random(-1,-3);
}

translate(width/2,height/2);

noFill();
stroke(0);
//internal ones, *N = distance from center
ellipse(x(t)*2,y(t)*2,30,30);
t++;
//internal ones, *N = distance from center
ellipse(x(t)*4,y(t)*4,30,30);
t++;
//internal ones, *N = distance from center
ellipse(x(t)*6,y(t)*6,30,30);
t++;
//internal ones, *N = distance from center
ellipse(x(t)*12,y(t)*12,30,30);
t++;
//internal ones, *N = distance from center
t++;

//internal circles that aren’t linear
stroke(0);
ellipse(q(w)+y(t),e(w)+x(t),30,30);
w++;

ellipse(e(w)+y(t),q(w)+x(t),30,30);
w++;

//external circles
c++;
c++;

//petal

** noFill();**

** for (float pa = 0; pa < TWO_PI * d; pa = pa + 0.02) {**
** float r = 400 * cos(k * pa);**
** //limit += TAU/1000;**
** ellipse(px, py,30,30);**

** px = r * cos(pa);**
** py = r * sin(pa);**
** }**

//rotação círculos maiores
rotate(a);
image(ceu1, 0, 0, 150, 150);
image(ceu3, 0, 0, 950, 950);
a = a + PI/2500;

rotate(b);
image(ceu2, 0, 0, 500, 500);
b = b + PI/1000;
}

Does anyone have a clue?

It’s the //petal bit

Hello,

Processing has an Auto format in the Edit tab.