//Joyful Coding Project

​

let trail = []; //the trail that follows the curser

let rSlider, gSlider, bSlider; //sliders for background color

let song;

let time = 0;

let randr = 0;

let randg = 0;

let randb = 0;

let r;

let g;

let b;

​

function preload() {

  song = loadSound("melodymusic.mp3");

  //loading happy music

}

​

​

function setup() {

  //getAudioContext().suspend();//sound for the phone/ipad

  createCanvas(610, 300);

  song.play(); 

  //plays the song

  song.loop(); //keeps the song playing on loop

  textSize(15);

  noStroke();

​

  //create sliders

  rSlider = createSlider(0, 255, 123);

  rSlider.position(20, 20);

  gSlider = createSlider(0, 255, 123);

  gSlider.position(20, 50);

  bSlider = createSlider(0, 255, 123);

  bSlider.position(20, 80);

}

​

function draw() {

  if (time > 2000) {

    randr = random(0, 255);

    randg = random(0, 255);

    randb = random(0, 255);

    time = 0

  }

  time = time + 1;

​

  //the sliders and background

  let r = rSlider.value();

  let g = gSlider.value();

  let b = bSlider.value();

  background(r, g, b);

  fill(0);

  text('RED', rSlider.x * 2 + rSlider.width, 35);

  text('GREEN', gSlider.x * 2 + gSlider.width, 65);

  text('BLUE', bSlider.x * 2 + bSlider.width, 95);

​

  //instructions

  text('HOW TO PLAY!', 484, 30)

  text('Try to match the background ', 405, 45)

  text('Colors to the trail until it', 437, 60)

  text('disappears', 517, 75)

  text('WARNING: trail changes color!', 385, 90)

  text('HAPPY COLOR MATCHING!', 395, 105)

​

  //the trail

  //a point to the end of the trail at the mouse position

  fill(randr, randg, randb);

  trail.push(new p5.Vector(mouseX, mouseY));

​

  //if the trail gets too long, remove the oldest point

  if (trail.length > 40) {

    trail.shift();

  }

​

  //draw the trail

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

    let p = trail[i];

​

    //the trail is larger closer to the mouse and smaller farther away (at the beginning)

    let size = 50.0 * i / trail.length;

    circle(p.x, p.y, size);

  }

​

  //if all colors are equal statement

  if (r == randr && g == randg && b == randb) {

    fill(255);

    text('YOU FOUND 1 OUT OF 16 MILLION', 175, 180);

​

//if red & green are equal

  } else if (r == randr && g == randg) {

    fill(255);

    text('SO CLOSE', 280, 150);

    //if red and blue are equal

  } else if (r == randr && b == randb) {

    fill(255);

    text('SO CLOSE', 280, 150);

    //if green and blue are equal

  } else if (g == randg && b == randb){

    fill (255);

    text ('SO CLOSE', 280, 150);

    //if red in background is equal to color

  } else if (r == randr) {

    fill(255);

    text('YOUVE FOUND RED!', 300, 150);

    //if green in background is equal to color

  } else if (g == randg) {

    fill(255);

    text('YOUVE FOUND GREEN!', 300, 150);

    //if blue in background is equal to color

  } else if (b == randb) {

    fill(255);

    text('YOUVE FOUND BLUE!', 300, 150);

  }

​

  }