DDF 2019

need to have p5.svg.js in project and in index.html

see -https://github.com/zenozeng/p5.js-svg

this will save an SVG file in your download folder

*/

​

var blues = [];

let record = false;

let cnv;

​

function setup() {

  cnv = createCanvas(400, 400, SVG);

  blues.push(color(0, 255, 255));

  blues.push(color(224, 255, 255));

  blues.push(color(0, 206, 209));

  blues.push(color(64, 224, 208));

  blues.push(color(72, 209, 204));

  blues.push(color(175, 238, 238));

  blues.push(color(127, 255, 212));

  blues.push(color(176, 224, 230));

  blues.push(color(95, 158, 160));

  blues.push(color(70, 130, 180));

  blues.push(color(100, 149, 237));

  blues.push(color(0, 191, 255));

  blues.push(color(30, 144, 255));

  blues.push(color(173, 216, 230));

  blues.push(color(135, 206, 235));

  blues.push(color(135, 206, 250));

  blues.push(color(25, 25, 112));

  blues.push(color(0, 0, 128));

  blues.push(color(0, 0, 139));

  blues.push(color(0, 0, 205));

  blues.push(color(0, 0, 255));

  blues.push(color(65, 105, 255));

}

​

function draw() {

  // Slow down the frame rate so we can look at the flowers!

  frameRate(.5);

  // Pick a random blue color for the background

  index = floor(random(blues.length));

  background(blues[index]);

  // Draw a flower

  genFlower = new Flower();

  genFlower.drawFlower();

  //noLoop();

  if (record == true) {

    save("mySVG.svg"); // give file name

    print("saved svg");

    record = false;

  }

}

​

function mousePressed() {

  record = true;

}

​

class Flower {

  constructor() {

    this.centerWidth = random(50, 150);

    this.centerHeight = random(50, 150);

    // Pick the radius for the petals to be drawn on

    if (this.centerWidth > this.centerHeight) {

      this.petalRadius = this.centerWidth/2;

    } else {

      this.petalRadius = this.centerHeight/2;

    }

    // Make an array of greens for the stem and leaves to choose from

    this.greens = [];

    this.greens.push(color(154, 205, 50));

    this.greens.push(color(85, 107, 47));

    this.greens.push(color(107, 142, 35));

    this.greens.push(color(124, 252, 0));

    this.greens.push(color(127, 255, 0));

    this.greens.push(color(173, 255, 47));

    this.greens.push(color(0, 100, 0));

    this.greens.push(color(0, 128, 0));

    this.greens.push(color(34, 139, 34));

    this.greens.push(color(0, 255, 0));

    this.greens.push(color(50, 205, 50));

    this.greens.push(color(144, 238, 144));

    this.greens.push(color(152, 251, 152));

    this.greens.push(color(143, 188, 143));

    this.greens.push(color(0, 250, 154));

    this.greens.push(color(0, 255, 127));

    this.greens.push(color(46, 139, 87));

    this.greens.push(color(102, 205, 170));

    this.greens.push(color(60, 179, 113));

  }

  drawStem() {

    strokeWeight(random(5, 25));

    // Pick a random green color for the stem

    index = floor(random(this.greens.length));

    stroke(this.greens[index]);

    line(width/2, height/3, width/2, height);

  }

  drawPetals() {

    var petalR = random(255);

    var petalG = random(255);

    var petalB = random(255);

    var petalSize = random(50, 100);

    var petalX;

    var petalY;

    var numPetals = floor(random(4, 10));

    //var numPetals;

    var curRadians = 0;

    var inc = TWO_PI/numPetals;

    // Randomly pick a petal shape

    var petalShape = floor(random(3));

​

    // If it's a triangle, let's draw more petals!

    if (petalShape == 2) {

      numPetals = floor(random(8, 12));

    }

    // For the triangle

    var x1 = this.petalRadius;

    var y1 = random(-50, -25);

    var x2 = random(75, 100);

    var y2 = random(-25, 25);

    var x3 = this.petalRadius;

    var y3 = random(25, 50);

    var triX = cos(curRadians) * this.petalRadius;

    var triY = sin(curRadians) * this.petalRadius;

    push();

      translate(width/2, height/3);

​

      for (var i = 0; i < numPetals; i++) {

​

        petalX = cos(curRadians) * this.petalRadius;

        petalY = sin(curRadians) * this.petalRadius;

        noStroke();

        fill(petalR, petalG, petalB);

        // Draw circle petals

        if (petalShape == 0) {

          ellipse(petalX, petalY, petalSize);

          curRadians += inc;

        } // Draw rectangle petals

        else if (petalShape == 1) {

          rectMode(CENTER);

          rotate(PI/2);

          rect(petalX, petalY, petalSize, petalSize);

          curRadians += inc;

        } // Draw triangle petals

        else if (petalShape == 2) {

          rotate(curRadians);

          triangle(x1, y1 + triY, x2 + triX, y2 + triY, x3, y3 + triY);

          curRadians += inc/3;

        }    

      }

    pop();

  }

  drawCenter() {

    noStroke();

    fill(random(255), random(255), random(255));

    // Randomly pick a center shape

    var centerShape = floor(random(3));

​

    push();

      translate(width/2, height/3);

      if (centerShape == 0) {

        ellipse(0, 0, this.centerWidth, this.centerHeight);

      } else if (centerShape == 1) {

        rectMode(CENTER);

        rect(0, 0, this.centerWidth, this.centerHeight);

      } else if (centerShape == 2) {

        var x1 = random(-25, 25);

        var y1 = random(0, -75);

        var x2 = random(50, 75);

        var y2 = random(50, 75);

        var x3 = random(-75, -50);

        var y3 = random(50, 75);

        triangle(x1, y1, x2, y2, x3, y3);

      }

    pop();

  }

  drawFlower() {

    this.drawStem();

    this.drawPetals();

    this.drawCenter();

  }

}