I need to Create A flower using loops

geocompi

I am a little lost with how to create a flower for my classes assignment and am hoping for a miracle. The requirements state that the petals can be ether triangles or archs and must change colour moving outwards.

Chrisir

So it’s an animation using a class

Class could be a ring

What properties must the class have?

Show your attempt... your code...

Do the tutorial trigonometry please

geocompi

@Chrisir No it does not have to be animated it can be static

TfGuy44

Well, do it step by step. A good first step is to prove that we can even draw something. Here's that.

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

void draw(){
  background(255);
  translate(width/2,height/2);
  fill(250,100,200);
  ellipse(0,0,400,400);
}

Oh, it's a pink thing. Cool! Now we know we can draw pink things. In the middle off the screen. But we don't want a full ellipse. We want an arc.

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

void draw(){
  background(255);
  translate(width/2,height/2);
  fill(250,100,200);
  arc(0,0,400,400,0,TWO_PI/12);
}

Alright. We can do an arc! Next, can we fix the lines?

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

void draw(){
  background(255);
  translate(width/2,height/2);
  fill(250,100,200);
  arc(0,0,400,400,0,TWO_PI/12);
  line(0,0,200,0);
  line(0,0,200*cos(TWO_PI/12), 200*sin(TWO_PI/12)); 
}

Yes, it's possible to put in the lines we like around this arc.

TfGuy44

Realize that you are now a zillion times closer to getting this working than when you stated. Instead of having nothing, you now have one petal!

Let's make several of them. To do this, we'll move the code that draws a petal into a different function. That way we can call it many times in a loop.

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

void draw(){
  background(255);
  translate(width/2,height/2);
  for( int i = 0; i < 12; i++){
    petal(color(250,100,200-10*i));
    rotate(TWO_PI/12);
  }
}

void petal(color c){
  fill(c);
  arc(0,0,400,400,0,TWO_PI/12);
  line(0,0,200,0);
  line(0,0,200*cos(TWO_PI/12), 200*sin(TWO_PI/12));  
}

What next? We need a tiny gap...

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

void draw(){
  background(255);
  translate(width/2,height/2);
  for( int i = 0; i < 12; i++){
    petal(color(250,100,200-10*i));
    rotate(TWO_PI/12);
  }
}

void petal(color c){
  fill(c);
  pushMatrix();
  translate(20,0);
  arc(0,0,400,400,-TWO_PI/24,TWO_PI/24);
  line(0,0,200*cos(-TWO_PI/24), 200*sin(-TWO_PI/24));
  line(0,0,200*cos(TWO_PI/24), 200*sin(TWO_PI/24));
  popMatrix();
}

If you're following along - and you should be - changing these specific values each time is a pain. Let's make them variables, because we want to be able to draw petals of different sizes anyway.

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

void draw(){
  background(255);
  translate(width/2,height/2);
  for( int i = 0; i < 12; i++){
    petal(color(250,100,200-10*i), TWO_PI/24, 200);
    rotate(TWO_PI/12);
  }
}

void petal(color c, float a, float r){
  fill(c);
  pushMatrix();
  translate(20,0);
  arc(0,0,2*r,2*r,-a,a);
  line(0,0,r*cos(-a), r*sin(-a));
  line(0,0,r*cos(a), r*sin(a));
  popMatrix();
}

Can we do many rings of petals now with a second loop?

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

void draw() {
  background(255);
  translate(width/2, height/2);
  for ( int j = 20; j > 6; j-=4) {
    pushMatrix();
    for ( int i = 0; i < j; i++) {
      petal(color(250, 100, 200-10*i), TWO_PI/float(2*j), 20+10*j);
      rotate(TWO_PI/float(j));
    }
    popMatrix();
  }
}

void petal(color c, float a, float r) {
  fill(c);
  pushMatrix();
  translate(10, 0);
  arc(0, 0, 2*r, 2*r, -a, a);
  line(0, 0, r*cos(-a), r*sin(-a));
  line(0, 0, r*cos(a), r*sin(a));
  popMatrix();
}

Yes!

TfGuy44

Now we just have to fix some of the spacing, tweek the colors a bit, and...

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

void draw() {
  background(255);
  translate(width/2, height/2);
  for ( int j = 17; j >= 9; j-=2) {
    pushMatrix();
    rotate(j);
    for ( int i = 0; i < j; i++) {
      petal(color(250, map(j,4,20,255,100), 250), TWO_PI/float(2*j), 20*j-70);
      rotate(TWO_PI/float(j));
    }
    popMatrix();
  }
  fill(250,200,50);
  ellipse(0,0,70,70);
}

void petal(color c, float a, float r) {
  fill(c);
  pushMatrix();
  translate(20, 0);
  arc(0, 0, 2*r, 2*r, -a, a);
  line(0, 0, r*cos(-a), r*sin(-a));
  line(0, 0, r*cos(a), r*sin(a));
  popMatrix();
}

Close enough for me!

Chrisir

That‘s so lame. OP didn’t show one line of code.

quark

This was a class assignment !!

What did the OP learn today? Absolutely nothing!

Chrisir

@TfGuy44 : it’s annoying, especially because I tried to get in a real communication with him already

jeremydouglass

FWIW, I really appreciate the way that @TfGuy44 writes step-by-step tutorial sequences that model a constructive way of solving a problem. They seem really useful.

That said, learning-through-doing (and making your own mistakes) is also very important for students, and many students who are desperate, out of time, or just lack self-confidence will copy-paste the final step of a tutorial rather than actually walking through it. The walkthrough should help them learn in theory, but it often doesn't help them in practice (or it helps the best students who follow along, but it hurts the worst students, who actually need the most help).

If I was developing an assignment to challenge my students to apply what they had (supposedly) learned to a new specific problem then I would be extremely frustrated by someone posting a complete, comprehensive solution. I could no longer use my assignment to evaluate who had learned the material and who hadn't, and because I wouldn't be seeing individual errors made during the learning process I also wouldn't know which parts of the material individuals were struggling with. Instead I would need to develop a whole new assignment.

GLV

We should be able to flag "complete answers" to homework problems and have them deleted.

geocompi

okay well lets learn, I'm having trouble understanding what the translate, and push matrix command do. I tried to remove the translate by just drawing everything in the center.

int outerPetalNum;
int innerPetalNum =7;
int centX,centY;
void setup() {
  size(600, 600);
}

void draw() {
  background(255);

  for (outerPetalNum = 15; outerPetalNum >= innerPetalNum; outerPetalNum-=2) {

    rotate(outerPetalNum);
    for ( int i = 0; i < outerPetalNum; i++) {
      petal(color(250, map(outerPetalNum,4,20,255,100), 250), 
      TWO_PI/float(2*outerPetalNum), 20*outerPetalNum-70);

      rotate(TWO_PI/float(outerPetalNum));
    }

  }
  fill(250,200,50);
  ellipse(0,0,70,70);
}

void petal(color c, float a, float r) {
  fill(c);
  pushMatrix();
  translate(20, 0);
  centX = width/2;
  centY = height/2;
  arc(centX, centY, 2*r, 2*r, -a, a);
  line(centX, centY, r*cos(-a), r*sin(-a));
  line(centX,centY, r*cos(a), r*sin(a));
  popMatrix();
}

Here are my adjustments, can you explain how I could make it work using this idea instead of the translate command?

Chrisir

• What happens now falsely, what do you want to happen instead?

Your idea is good, just read the arc() reference again

I think you need to know the thickness of your petal ring (distance inner line and outer line)

Concentrate on one ring please (for a start)

jeremydouglass

@geocompi -- good question.

I'm having trouble understanding what the translate, and push matrix command do.

First: have you read the 2D Transformation tutorial?

• https://processing.org/tutorials/transform2d/

That will give you a handle on what translate does. Essentially, with translate you describe each thing (eg each petal) in terms of relative location; without it, you describe them all in terms of absolute location.

For details, see:

• https://processing.org/reference/translate_.html
• https://processing.org/reference/pushMatrix_.html

Next:

I tried to remove the translate

Notice that in your snippet you still have a translate inside petal.

GLV

You may also want to consider using vectors. I provided an example that you can work with. I did not include the petal method; this is left as an exercise.

PVector v0, v1;
float heading;
int count;

public void settings() 
  {  
  size(800, 800); 
  }

public void setup() 
  { 
  background(0);
  v0 = new PVector(0, 0);
  v1 = new PVector(0, 0);
  }

public void draw() 
  {
  background(0);
  v0.set(width/2, height/2);  
  count = 0;
  for (float i=0; i<TAU; i+=TAU/16)
    {
    v1.set(200, 0);      
    v1.rotate(i);
    heading = v1.heading(); 
//    println(count++, heading, heading*360/TAU); 
    v1.add(v0);
    stroke(255, 200, 0);
    strokeWeight(2);
    line(v0.x, v0.y,v1.x, v1.y);
    fill(255, 200, 0);
    noStroke();
//    petal(color(255, 200, 0), ?, ?, ?, ?);
    ellipse(v1.x, v1.y, 20, 20);
    }
  }

An animation I created with vectors:

https://youtu.be/cUD1gMAl6W4

Resources:

https://processing.org/reference/PVector.html

https://processing.org/tutorials/pvector/

natureofcode.com/book/chapter-1-vectors/