CS.Flowers

= Flowers =

Mr. Bujak
insert more recent updates here in a reverse chronological order

6/1/2011 update: - Mr. Bujak got an email ad from IKEA on 6/1/2011: so Mr. Bujak had to try with the current code, code int radiusGrowthStart = 78;   // CHANGE THIS: this must be >0 to see it!

float petalTiltAngleCounter = -PI/4;   // 0 .. 2PI

float[] data = calcRegularPolygonVertices(cX, CY, 12, ringRadius); code

Of course we need to make the class RingLeaf class to make each Leaf color persist. Hopefully coming soon.

5/31/2011 update: - NOTE [A]: In all the code below, each leaf is placed in position, but no information about each leaf is utilized on successive passes to re-draw. This is very obvious on the random scale cycling (movie 6) and the color cycling (movie 5).

We should probably create a more encompassing class RingLeaf to hold informaiton about each Leaf in a Ring. RingLeaf - cx, cy, radius, numLeaves, scale, color, rotateLeafSpeed, rotateRingSpeed, … Note that each leaf in a ring can have different attributes values. If you want the leaves on a ring to be symmetrical (size, color, spinning, behavior) then they will have the same attribute values.. Support "uniform" RingLeaf attributes and "non-uniform" RingLeaf attributes.

Then even a more encompassing class Flower which will contain an array of RingLeaf. Flower - cx, cy, radius, numRings, scaleArray[], colorArray[], rotatePetalSpeedArray[], rotateRingSpeedArray[],

Flower --> RingLeaf --> Leaf

NOTE [B]: support non-uniform scaling. This is easy to do: each leaf will have a scalarX and a scalarY instead of the uniform scalar. With that you can create a nice flame with wobbling (varying tiltAngle), varying the scalarX and scalarY, and also cycling "flame" colors

NOTE [C]:
 * 1) more constructors
 * 2) attributes on each leaf for:
 * 3) wobbleSpeed
 * 4) scalarX
 * 5) scalarY

movie 7: tracking mouse code // center of the ring of leaves: int cX; int cY;

// cX = width/2; // ring of leaves is at center of window // cY = height/2;

cX = mouseX; // ring of leaves follows the mouse cY = mouseY; code

media type="custom" key="9612132" URL: @http://screenr.com/53I

movie 6: cycling scale change code leaf = new Leaf(0, 0, 0, 50, red); code to code leaf = new Leaf(0, 0, 0, random(20,100), red); code media type="custom" key="9611916" URL: @http://screenr.com/z3I NOTE: In reality this code cycles a great deal faster making each leaf almost look like a flickering flame. The screener screen capture does not sample fast enough (nor dos Camtasia Studio). For the Processing language there are 60 draw's per second.

movie 5: cycling color code translate((int)fX, (int)fY); rotate(tiltAngle); leaf = new Leaf(0, 0, 0.07, 50, randomColor); // <<-< // leaf = new Leaf(0, 0, 0, 50, red); //leaf.wobble; leaf.display; rotate(-tiltAngle); translate((int)-fX, (int)-fY); code media type="custom" key="9611928" URL: @http://screenr.com/F3I

movie 4: this is movie 2 and movie 3 combined code int radiusGrowthStart = 20;    // CHANGE THIS int radiusGrowthStop = 200;    // CHANGE THIS: this is the radius to stop growing and start back at radius 0 int radiusGrowthIncrement = 1; // CHANGE THIS: this is the speed of the radial petal growth out // and float petalTiltAngleCounter = 0;       // 0 .. 2PI float petalTiltAngleIncrement = 0.005; // CHANGE THIS: this is the speed of the petal rotation

code First screenr Web-based screen capture: << wikispaces: Widget --> Video --> Other>> same as: < Other HTML>> same as: < Other>> media type="custom" key="9611930" URL: @http://screenr.com/G3I

5/26/2011 update: -

movie 1 (still): (actually repaints the same image since nothing is changing): <> code int radiusGrowthStart = 50; int radiusGrowthIncrement = 0; // NOT GROWING code

movie 2: <> code int radiusGrowthStart = 50;    // CHANGE THIS int radiusGrowthStop = 200;    // CHANGE THIS: this is the radius to stop growing and start back at radius 0 int radiusGrowthIncrement = 1; // CHANGE THIS: this is the speed of the radial petal growth out code media type="file" key="CS.Flowers.radius50.200.growth.1.mp4" width="300" height="300"

movie 3: <> code float petalTiltAngleCounter = 0;      // 0 .. 2PI float petalTiltAngleIncrement = 0.01; // CHANGE THIS: this is the speed of the petal rotation code media type="file" key="CS.Flowers.rotateLeaf.0.01.mp4" width="300" height="300"

complete code: code /* Flowers * Team Juicy * Tyler - Aaliyah * Computer Science - Hope Charter High School * 2011 Spring Semester * Mr. Bujak

can change: [1] center (x,y) of each flower

[2] per ring of petals: number of petals (number of vertices) radius of petals from center tilt of each petal scale of each petal color and opacity of each petal

*/

// for each ring of petals: //int radiusGrowthCounter = 0; int radiusGrowthStart = 100;   // CHANGE THIS: this must be >0 to see it! int radiusGrowthStop = 200;    //CHANGE THIS: this is the radius to stop growing and start back at radius 0 int radiusGrowthIncrement = 0; //CHANGE THIS: this is the speed of the radial petal growth out int ringRadius = radiusGrowthStart;

float petalTiltAngleCounter = 0;   // 0 .. 2PI float petalTiltAngleIncrement = 0; // CHANGE THIS: this is the speed of the petal rotation

PFont font;

int black = color(0,   0,   0);   // this is a good practice to define variables/constants that ... int red   = color(255, 0,   0);   // help you create self-documenting code int green = color(0,   255, 0); int blue  = color(0,   0,   255); int yellow = color(255, 255, 0); int purple = color(255, 0,  255); int aqua  = color(0,   255, 255); int white = color(255, 255, 255);

int greenTrans = color(0,   255,   0, 85);  // 85/255 alpha --> ~1/3 opaque or 2/3 transparent int yellowTrans = color(255, 255,  0, 85); int purpleTrans = color(255, 0,  255, 65);  // some colors are "harder", so backoff the opacity int aquaTrans  = color(0,   255, 255, 85);

Leaf leaf;  // define one leaf

void setup { size(500, 500); font = loadFont("Dialog.bold-14.vlw"); textFont(font); smooth; }

void draw { background(255); stroke(blue);

// center of the ring of leaves: int cX; int cY;

cX = width/2; // ring of leaves is at center of window cY = height/2;

// cX = mouseX;  // ring of leaves is follows mouse // cY = mouseY;

fill(255); ellipse(cX, cY, 5, 5); // center of flower

drawGrid(greenTrans);     // draw the original grid

ringRadius += radiusGrowthIncrement; if (ringRadius > radiusGrowthStop) { ringRadius = radiusGrowthStart; };

// float[] data = calcRegualrPolygonVertices(cX, cY, 6, 100); float[] data = calcRegularPolygonVertices(cX, cY, 6, ringRadius);

for (int i = 0; i < data.length; i += 2) { float fX = data[i]; float fY = data[i+1]; print(i/2 + " (" + fX + "," + fY + ")");

float tiltAngle = atan((fY-cY)/(fX-cX)) + PI/2; if (fX < cX) {  // advanced trigonometry, stuff to the left of center arctan "adjustment" tiltAngle += PI; }

petalTiltAngleCounter += petalTiltAngleIncrement; tiltAngle += petalTiltAngleCounter % (2*PI);

println(" " + tiltAngle + " --> " + degrees(tiltAngle) + " degrees");

translate((int)fX, (int)fY); rotate(tiltAngle); //leaf = new Leaf(0, 0, 0.07, 50, randomColor); leaf = new Leaf(0, 0, 0, 50, red); //leaf.wobble; leaf.display; rotate(-tiltAngle); translate((int)-fX, (int)-fY);

fill(blue); text(i/2, (int)fX,(int)fY); } } // draw

// ===========================================

class Leaf { float x, y;  // x-coordinate, y-coordinate float tilt;  // left and right angle offset float angle; // tilt of the leaf float scalar; // scale (size) of the leaf color colour = randomColor; // color of the leaf

// Constructors: Leaf(int xpos, int ypos, float t, float s) { x = xpos; y = ypos; tilt = t;   scalar = s / 100.0; }

Leaf(int xpos, int ypos, float t, float s, color c) { x = xpos; y = ypos; tilt = t;   scalar = s / 100.0; colour = c; }

void wobble {  // DO WE WANT THE LEAVES TO WOBBLE INDEPENDENTLY ON A RING? tilt = cos(angle) / 8; angle += 0.1; }

void display { //noStroke; fill(colour); pushMatrix;       // <=== Matrix fill (color(0,0,0)); ellipse(x,y,10,10); translate(x, y); rotate(tilt); scale(scalar); beginShape;  // <--- Shape fill(colour); vertex(0, -100); bezierVertex(25, -50, 33, -65, 40, -40); bezierVertex(40, 12, 25, 0, 0, 0); bezierVertex(-25, 0, -40, -15, -40, -40); bezierVertex(-40, -65, -25, -100, 0, -100); endShape;    // <--- Shape popMatrix;        // <=== Matrix } }

// USER DEFINED FUNCTIONS BELOW: --

void drawGrid(color c) {             // a bad side effect is that the pen color is set to c  stroke(c);                          // change the color of the "pen" for (int x=0; x<=width; x+=10) {   // vertical grid lines line(x, 0, x, height-1); } // for for (int y=0; y<=height; y+=10) {  // horizontal grid lines line(0, y, width-1, y); } // for } //drawGrid

float[] calcRegularPolygonVertices(float cX, float cY, int nV, float r) { float d[] = new float[2 * nV]; // {x0,y0,x1,y1,x2,y2,x3,y3, ...} float theta = 2* PI/nV; float angle = PI/2 - theta;

int nArrayElements = 2 * nV;

for (int i = 0; i < nArrayElements; i+=2) { d[i]= cX + r * cos(angle);    // x    d[i+1] = cY + r * sin(angle);  // y

print(i/2 + " " + "angle=" + angle +  "  " + degrees(angle) + "  (" + d[i] + "," + d[i+1] + ")"); float ang = atan((d[i+1]-cY)/(d[i]-cX)); println(" angle = " + ang + "  " + degrees(ang) + " degrees)" );    angle += theta;  }  return d; }  // calcRegularPolygonVertices

int randomColor { return(color(random(0,255),random(0,255),random(0,255))); } // randomColor

int randomColor(int opacity) { return(color(random(0,255),random(0,255),random(0,255),opacity)); } // randomColor(opacity) code inspiration?: - Drawing by Starr (a.k.a. Tyler): .