# Is there a way to do this progressively?

**URL:** <https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099>\
**Category:** Coding Questions\
**Created:** [January 15, 2020, 5:33pm UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099 "2020-01-15T17:33:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![moitapjoao](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moitapjoao/32/7801_2.png) [@moitapjoao](https://discourse.processing.org/u/moitapjoao)\
**Post date:** [January 15, 2020, 5:33pm UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/1 "2020-01-15T17:33:01Z")

</div>

Hello,

I need to make a mathematical flower as shown in this Coding Train video ([https://www.youtube.com/watch?v=f5QBExMNB1I&t=6s](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);  
}

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 15, 2020, 6:47pm UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/2 "2020-01-15T18:47:58Z")

</div>

Hello,

```auto
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.

🙂

---

<div class="post-metadata">

**Author:** ![moitapjoao](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moitapjoao/32/7801_2.png) [@moitapjoao](https://discourse.processing.org/u/moitapjoao)\
**Post date:** [January 15, 2020, 7:13pm UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/3 "2020-01-15T19:13:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 15, 2020, 10:40pm UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/4 "2020-01-15T22:40:18Z")

</div>

One way to do it using your example:

```auto
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);
    }
  }

```

🙂

---

<div class="post-metadata">

**Author:** ![moitapjoao](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moitapjoao/32/7801_2.png) [@moitapjoao](https://discourse.processing.org/u/moitapjoao)\
**Post date:** [January 16, 2020, 10:13am UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/5 "2020-01-16T10:13:43Z")

</div>

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:

 ![ex4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b9315ff7ea4415aedc54e7220711c92ddd8c1c2.png)

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

---

<div class="post-metadata">

**Author:** ![moitapjoao](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moitapjoao/32/7801_2.png) [@moitapjoao](https://discourse.processing.org/u/moitapjoao)\
**Post date:** [January 16, 2020, 10:15am UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/6 "2020-01-16T10:15:12Z")

</div>

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

 ![ex1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c217a040bb729e434c43ceafcd55fd04133964c3.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 16, 2020, 11:39am UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/7 "2020-01-16T11:39:43Z")

</div>

> [@moitapjoao](#):
>
> The ellipse doesn’t appear with that code.

This is what my posted code does here:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6fc210f098400f5e8875de0c512b0714377903a7.png) ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2b1957f82997a6d74d6efeda3c97f95157b89d43.png) ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/228f682b5bfbeb8963ee3b7b9db86cf73dde2a24.png)

> [@glv](#):
>
> You have to consider also what will happen at the limit.

I left that for you to consider.

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

🙂

---

<div class="post-metadata">

**Author:** ![moitapjoao](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moitapjoao/32/7801_2.png) [@moitapjoao](https://discourse.processing.org/u/moitapjoao)\
**Post date:** [January 16, 2020, 12:42pm UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/8 "2020-01-16T12:42:11Z")

</div>

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](https://video.loop)();  
ceu1 = loadImage(“ceu1.png”);  
ceu2 = loadImage(“ceu2.png”);  
ceu3 = loadImage(“ceu3.png”);  
criacao0 = loadImage(“criacao0.png”);  
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(500+x(t),my+y©,30,30);  
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  
ellipse(x(t)\*16+a©,y(t)\*16+b©,30,30);  
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  
ellipse(a©,b©,30,30);  
c++;  
ellipse(a©\*2,b©\*2,30,30);  
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;  
}

---

<div class="post-metadata">

**Author:** ![moitapjoao](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/moitapjoao/32/7801_2.png) [@moitapjoao](https://discourse.processing.org/u/moitapjoao)\
**Post date:** [January 18, 2020, 10:41am UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/9 "2020-01-18T10:41:28Z")

</div>

Does anyone have a clue? ☹

It’s the //petal bit

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 18, 2020, 11:02am UTC](https://discourse.processing.org/t/is-there-a-way-to-do-this-progressively/17099/10 "2020-01-18T11:02:00Z")

</div>

Hello,

Processing has an _Auto format_ in the _Edit_ tab.

Also (in addition to the above), please format your code for posting in the forum

See section " Is your post formatted?":

> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-tips-on-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …

Explore the editor tools:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8501629e5ad07b1e5e980a9119983fa7e3d64cae.png)

I can’t promise I will look at it but I will not look at it as is.

🙂