xxx3

// for stars

let points;

let frequency;

​

//colors

var clicked = true;

var hueControl = 69;

var compHueControl = 249;

​

//tears

var particles=[];

var pushed = false;

var pushed1 = true;

​

//animation

var life;

​

//font

var f;

​

function preload(){

rightEye=loadImage("right.png");

leftEye=loadImage("left.png");

lips=loadImage("lips.png");

song = loadSound('song.m4a');

//Load sprites

life=loadAnimation('1.png', '2.png', '3.png', '4.png','5.png', '6.png', '7.png');

life.frameDelay = 20; // to make it slower

f = loadFont("https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/font/SourceCodePro-Bold.otf");

loaded =true;

}

​

function setup(){

  pixelDensity(2);

  createCanvas(windowWidth, windowHeight);

  rightEye.resize(250,200);

  leftEye.resize(300,200);

  lips.resize(700,550);

  colorMode(HSB, 360,100,100);

  points = [];

  frequency = 0.1;

  // start with some points

  for (let i = 0; i < 50; i += 1) {

    points.push([random(width), random(height)]);

  }

    depict = life;

}

​

function draw(){

  var color1 = color(hueControl+2, 72, 80); //Slightly off hue, as in the original sketch.

  var color2 = color(compHueControl, 90, 80); //This is the complimentary colour.

  var color3 = color(hueControl, 90, 80);

  noStroke();

  background(color2);

  if (clicked == false) {

    hueControl = map(mouseX, 0, width, 0, 180);

    //Trying to create complimentary hue depending on how far around the colour wheel the first hue is. 

    //Might not be the best way to do this!

    if (hueControl <= 180){

      compHueControl = hueControl+180;

    }

    /*if (hueControl > 180){ //Didn't need this in the end, since I decided the first hue would only range from 0-180

      compHueControl = hueControl-180;

    }*/

  }

  // instructions

  push();

  fill('black');

  rect(0,0,300,136);

  //Added text instructions

  textSize(12);

  textStyle(BOLD);

  fill (color2,0,0)

  text ('click on eyes to unlock their feelings', 24, 24)

  text ('double click to start over with the stars behind', 24, 48)

  text ('press the r key to return to defaults', 24, 72)

  text ('hue: ' + round(hueControl), 24, 96);

  text ('complimentary hue: ' + round(compHueControl), 24, 118);

  pop();

  push();

  strokeWeight(20);

  textFont(f);

  textSize(40);

  const t = "(the cycle of life)";

  fill(color1, color2, color3);

  text(t, width/3, 100);

  pop();

  image(leftEye,100,200);

  image(rightEye,500,200);

  image(lips,200,350);

//bubbles

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

   var bubbles =new Particle();

   particles.push(bubbles);

}

  for(var i = particles.length-1; i>=0; i--){

    particles[i].update();

    particles[i].show();

  if(particles[i].Dead()){

    particles.splice(i, 5);

}

  }

  // gradually move the points around

  for (let i = 0; i < points.length; i += 1) {

    let xOffset = noise(points[i][0] * frequency, points[i][1] * frequency, 0) - 0.5;

    let yOffset = noise(points[i][0] * frequency, points[i][1] * frequency, 1) - 0.5;

    points[i][0] += xOffset * 2;

    points[i][1] += yOffset * 2;

  }

​

  for (let i = 0; i < points.length; i += 1) {

    circle(points[i][0], points[i][1], 5);

    for (let j = 0; j < points.length; j += 1) {

      let distance = dist(points[i][0], points[i][1], points[j][0], points[j][1]);

      if (distance < 100) {

        let ratio = map(distance, 0, 100, 0, 1)

        stroke(lerpColor(color1, color3, ratio));

        line(points[i][0], points[i][1], points[j][0], points[j][1]);

      }

    }

  }

  if (mouseIsPressed && mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    points.push([mouseX, mouseY]);

  }

  push();

  //specify the animation instance and its x,y position

  animation(life, 1100, 600);

  loop();

  pop();

}

​

//create particles

class Particle {

constructor(){

  if(pushed){

  this.x=200;

  this.y=330;

  this.xx=665;

  this.yy=320;

}

  this.posx =random(0,-1);

  this.posy =random(5,2);

  this.posxx =random(0,-1);

  this.posyy =random(5,2);

  this.vel =(random(2, -1), random(2, 0));

  this.vel2 =(random(1, -1), random(2, 0));

  this.sizeX = random(1,5);

  this.sixeY = random(5,20);

  this.hue =random(69,249);

  this.lifespan = 255;

}

Dead(){

  if(this.lifespan<0.0){

    return true;

}

  else{

    return false;

}

}

update(){

    this.vel=this.vel+0.001;

    this.x+=this.posx+this.vel;

    this.y+=this.posy+this.vel;

    this.xx+=this.posx+this.vel2;

    this.yy+=this.posy+this.vel2;

    this.lifespan-=4;

}

show(){

  stroke(this.hue, 69, 249,this.lifespan);

  strokeWeight(1);

  fill(this.hue, 69, 60, this.lifespan);

  ellipse(this.x,this.y,this.sizeX, this.sizeY);

  ellipse(this.xx,this.yy,this.sizeX, this.sizeY);

}

}

​

//mousepress to play music and particles 

function mousePressed(){

  var d = dist(mouseX, mouseY, 270,300);

  var d2 = dist(mouseX, mouseY, 600,300);

  if(d<80 || d2<80){

  pushed =!pushed;

  pushed1 =!pushed1;

  if ( song.isPlaying() ) { 

    song.stop();

  } else {

    song.play();

  }

  }

if (clicked == false){

    clicked = true;

    //print ('hue: ' + hueControl + '. complimentary hue: ' + compHueControl);

    return;

  }

  if (clicked == true){

    clicked = false;

    return;

  }

}

​

function keyPressed(){

  if (keyCode === 82){

    clicked = true;

    hueControl = 69;

    compHueControl = 249;

  }

}

​

function doubleClicked () {

  points = [];

}