Is there a way to do this progressively?

Processing Coding Questions
1

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

2

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.

:slight_smile:

3

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.

4

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

:slight_smile:

5

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
ex41075×697 589 KB

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

6

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

ex1
ex11075×703 481 KB

7

This is what my posted code does here:
image image image

I left that for you to consider.

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

:slight_smile:

8

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();
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;
}

9

Does anyone have a clue? :frowning:

It’s the //petal bit

10

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?":

Explore the editor tools:

image
image917×98 2.58 KB

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

:slight_smile:

1 Like