Anna Yang's Generative Flower

By Anna Yang

Use your mouse to click in the gray area below and draw flowers!

// this makes use of code from this example:https://p5js.org/examples/interaction-kaleidoscope.html
 
let symmetry = 7;
 
let myWidth = 1700;
let myHeight = 800
 
let slider;
 
function setup() {
  createCanvas(myWidth,myHeight);
  angleMode(DEGREES);
background(125);
  brushSizeSlider = createButton("Brush Size");
  sizeSlider = createSlider(1,100,3,0.1);
 
}
 
function buildArray (n, fillFunction) {
  let outputArray = [];
  for (let i = 0; i < n; i++) {
    outputArray.push(fillFunction(i))
  }
  return outputArray
}
 
class Point {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance)
  }
  moveByAngle (angle, distance) {
            let r = (-1 * (angle + 180)) * Math.PI / 180;
            return new Point(this.x + distance*Math.sin(r), this.y + distance*Math.cos(r))
            }    
}
 
function pick (inputArray) {
return inputArray[Math.floor(inputArray.length * Math.random())]
}
 
let colors = ["lightCoral","salmon","coral","tomato","lavender","orange","yellowGreen","cornsilk","navajoWhite","wheat","white","gainsboro","mistyRose"]
 
let shape = ["ellipse","rect"]
 
function randomRange (min, max) {
return min + ((max-min) * Math.random())
}
 
class Flower
  {constructor (point){
  this.xPosition = point.x;
  this.yPosition = point.y;
  this.color = pick(colors);
  this.shape = pick(shape);
  }
   draw () {
 
if (this.shape == "rect"){
translate(this.xPosition,this.yPosition);
fill(this.color);
for (let i = 0; i < 9; i++) {
rotate(40);
rect(50,0,100,50);
}}
else if (this.color == "lightCoral"||this.color == "wheat"){
translate(this.xPosition,this.yPosition);
fill(this.color);
for (let i = 0; i < 9; i++) {
rotate(40);
ellipse(50,0,100,50);
}}
else if (this.shape == "ellipse"){
translate(this.xPosition,this.yPosition);
fill(this.color);
for (let i = 0; i < 9; i++) {
rotate(40);
ellipse(50,0,100,50);
}resetMatrix();}
}}
 
let centerPoint = new Point (myWidth/2,myHeight/2);
 
function polyhedronPoints (p,n,d,startingAngle) {
  let angles = buildArray (n, i => startingAngle + (i * 360/n));
  return angles.map(a => p.moveByAngle(a,d))
}
 
function draw() {
 
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    let mx = centerPoint.x + (mouseX - width / 2);
    let my = centerPoint.y + (mouseY - height / 2);
 
    if (mouseIsPressed) {
      for (let i = 0; i < symmetry; i++) {
        let sw = sizeSlider.value();
        strokeWeight(sw);
         let ps = polyhedronPoints (centerPoint,symmetry,(mouseX - centerPoint.x),mouseY);
         let fs = ps.map(p => new Flower(p));
         fs.forEach(f => f.draw())
      }
    }
}
}