October 12, 2016

example processing pretty

:sunflower: :hibiscus: :tulip: :bouquet: :cherry_blossom:

This program uses the width and height variables to draw a flower that changes size when the size of the window changes.

size(200, 300);

//draw green stem
stroke(0, 128, 0);
line(width/2, height/3, width/2, height);

ellipse(width/2+width/40+1, height*.66, width/20, height/30);
ellipse(width/2-width/40, height*.75, width/20, height/30);

//change stroke back to thin black line

//draw petals
fill(255, 100, 0);
ellipse(width*.25, height/6, width/2, height/3);
ellipse(width*.75, height/6, width/2, height/3);
ellipse(width*.25, height/2, width/2, height/3);
ellipse(width*.75, height/2, width/2, height/3);

//draw middle part
fill(255, 128, 0);
ellipse(width/2, height/3, width/2, height/3);

Try changing the parmaters passed into the size() function to change the size of the window, and the size of the flower will change automatically.

flower flower flower

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

:sunflower: :hibiscus: :tulip: :bouquet: :cherry_blossom:

Tweak Ideas

  • If we change the ratio of the window (for example, to 500x100) then the flower will stretch to fit that new size. Make it so instead of stretching, the flower scales while maintaining its aspect ratio.
  • Draw a more realistic flower.
  • Draw a whole vine of flowers.
  • Use a piece of paper and a pen to draw a flower by hand. Try to recreate that using code!

Using Variables Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!