Flowers

Team Juicy

Tyler and Aaliyah

Computer Science Spring 2011 Project

Hope Charter High School (wiki, blog, official site)

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:
IKEA.20110601.advertisement.png
so Mr. Bujak had to try with the current 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);
IKEA.20110601.Processing.png

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:
    1. wobbleSpeed
    2. scalarX
    3. scalarY



movie 7: tracking mouse
  // 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;


URL: http://screenr.com/53I


movie 6: cycling scale
change
    leaf = new Leaf(0, 0, 0, 50, red);
to
    leaf = new Leaf(0, 0, 0, random(20,100), red);

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

URL: http://screenr.com/F3I


movie 4: this is movie 2 and movie 3 combined
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</span>
 
First screenr Web-based screen capture:
<< wikispaces: Widget --> Video --> Other>>
same as: <<Widget --> Other HTML>>
same as: <<Widget --> Other>>

URL: http://screenr.com/G3I


5/26/2011 update: -------------------------------------------------

movie 1 (still): (actually repaints the same image since nothing is changing): <<captured with Jing and PNG, uploaded to wikispaces.com>>
int radiusGrowthStart = 50;
int radiusGrowthIncrement = 0;  // NOT GROWING
CS.Flowers.radius50.noGrowth.png

movie 2: <<captured with Camtasia Studio as MP4, uploaded to wikispaces.com>>
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


movie 3: <<captured with Camtasia Studio as MP4, uploaded to wikispaces.com>>
float petalTiltAngleCounter = 0;       // 0 .. 2PI
float petalTiltAngleIncrement = 0.01;  // CHANGE THIS: this is the speed of the petal rotation




complete 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)
inspiration?: -------------------------------------------------
Drawing by Starr (a.k.a. Tyler):
CS.Flowers.Drawing.1.jpg
.