* ASSIGNMENT 2

 * JASON BRILL

 */

let globe;

let flowerEmojis = ['🌸', '🌼', '💮'];

​

let backgroundColorRed = 20;

let backgroundColorBlue = 20;

let backgroundColorGreen = 255;

​

// Jitter class

class Globe {

  constructor(x, y, diameter) {

    this.x = x;

    this.y = y;

    this.t = 0;

    this.diameter = diameter;

    this.globe = createGraphics(width, height);

    this.innerShapes = createGraphics(width, height);

    this.flowers = createGraphics(width, height);

    // this will be used for the mask

    this.drawGlobe();

  }

​

  drawGlobe() {

    this.globe = createGraphics(400, 400);

    this.globe.ellipse(this.x, this.y, this.diameter, this.diameter);

    this.globe.beginShape();

    // left side

    curveVertex(125, 245);

    vertex(129, 270);

    curveVertex(150, 290);

    curveVertex(168, 320);

    curveVertex(150, 340);

    curveVertex(150, 355);

​

    // right side

    curveVertex(250, 355);

    curveVertex(250, 340);

    curveVertex(232, 320);

    curveVertex(250, 290);

    vertex(271, 270);

    curveVertex(275, 245);

    this.globe.endShape();

  }

​

  fillBackground(

    backgroundColorRed, backgroundColorBlue, backgroundColorGreen

  ) {

​

    // background globe for coloring

    fill(

      backgroundColorRed, backgroundColorBlue, backgroundColorGreen

    );

    ellipse(this.x, this.y, this.diameter, this.diameter);

    beginShape();

    // left side

    curveVertex(125, 245);

    vertex(129, 270);

    curveVertex(150, 290);

    curveVertex(168, 320);

    curveVertex(150, 340);

    curveVertex(150, 355);

​

    // right side

    curveVertex(250, 355);

    curveVertex(250, 340);

    curveVertex(232, 320);

    curveVertex(250, 290);

    vertex(271, 270);

    curveVertex(275, 245);

    endShape();

  }

​

  moveInnerShapes(xrange, yrange) {

    /*

     * Generate Wave Pattern

     * Based off https://p5js.org/examples/interaction-wavemaker.html

     */

    // reinstantiate inner shapes

    this.innerShapes = createGraphics(width, height);

    // draw wave patterns

    for (let x = 0; x <= width; x += xrange) {

      for (let y = 0; y <= height; y += yrange) {

        const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);

        const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true);

        const angle = xAngle * (x / width) + yAngle * (y / height);

​

        // each particle moves in a circle

        const myX = x + 20 * cos(2 * PI * this.t + angle);

        const myY = y + 20 * sin(2 * PI * this.t + angle);

        const ellipse = this.innerShapes.ellipse(

          myX, myY, 10, 10

        );

      }

    }

​

    this.t += 0.05;

  }

​

  addFlower() {

    // gets a random idx of the flower list

    let flowerIdx = Math.floor(

      Math.random() * flowerEmojis.length

    );

​

    this.flowers.textSize(random(30));

    this.flowers.fill(random(255));

    this.flowers.text(

      flowerEmojis[flowerIdx], mouseX, mouseY

    );

  }

}

​

function setup() {

  createCanvas(400, 400);

  // draw a random number of globes

​

  // defaults

  globe = new Globe(

    200, 200, 200

  );

}

​

function draw() {

  background(backgroundColorGreen, backgroundColorBlue, backgroundColorRed);

​

  globe.fillBackground(backgroundColorRed, backgroundColorGreen, backgroundColorBlue);

  globe.moveInnerShapes(15, 15);

​

  imgClone = globe.globe.get()

  imgClone.mask(globe.innerShapes.get());

  image(imgClone, 0, 0);

​

  imgClone2 = globe.globe.get()

  imgClone2.mask(globe.flowers.get());

  image(imgClone2, 0, 0);

}

​

​

function mousePressed() {

  // Mouse Press Handle

  globe.addFlower();

}

​

function keyPressed() {

  // Key Press Handle

  backgroundColorRed = random(255);

  backgroundColorBlue = random(255);

  backgroundColorGreen = random(255);

}