* Miccah Castorina & Laura Tessin

 * Prompt: An abundance of grey

 *

 */

​

/**

 * Initialize canvas, text and clouds

 */

var clouds = [];

​

function setup() {

​

  // Initialize canvas

  canvas_size = windowHeight;

  createCanvas(canvas_size, canvas_size);

  // Initialize text

  textFont('Brush Script MT')

  textSize(80);

  textAlign(CENTER, CENTER);

  // Initialize clouds

  const numClouds = canvas_size/2;

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

    const const_y = random(0, canvas_size);

    var const_color = 0;

    if (const_y < 200) {

      const_color = random(55, 150)

    }

    else {

      const_color = random(100, 230)

    }

    clouds.push({

      x: random(-50, canvas_size + 50),

      y: const_y,

      original_y: const_y,

      speed_factor: random(1, 10),

      color: const_color,

      radius: random(15, 25)

    });

  }

}

​

/**

 * Draw each cloud at current position

 */

function drawCloud(cloud) {

​

  fill(cloud.color, cloud.color, cloud.color, 245);

  noStroke();

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

    ellipse(cloud.x + i * cloud.radius, cloud.y, cloud.radius*2, cloud.radius*2);

  }

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

    ellipse(cloud.x - cloud.radius + i * cloud.radius, cloud.y+20, cloud.radius*2, cloud.radius*2);

  }

}

​

/**

 * Animate cloud movement

 * - wrap around when out of screen (x)

 * - move away from cursor (x and y)

 * - move back to original height (y)

 * - move from left to right (x)

 */

function animateCloud(cloud) {

​

  const distance = dist(cloud.x, cloud.y, mouseX, mouseY)

  if (cloud.x >= canvas_size + 50) {

    cloud.x = -100

  }

  else {

    if (distance < 50) {

      cloud.x += (cloud.x - mouseX) * cloud.speed_factor/50;

      cloud.y += (cloud.y - mouseY) * cloud.speed_factor/50;

    }

    else if (distance < 100) {

      cloud.x = cloud.x + cloud.speed_factor/10;

    }

    else {

      cloud.x = cloud.x + cloud.speed_factor/10;

      cloud.y -= (cloud.y - cloud.original_y) * cloud.speed_factor/2000;

    }

  }

  drawCloud(cloud)

}

​

/**

 * Draw background and text

 */

function drawBackground() {

​

  blue_color = color(173, 216, 230)

  yellow_color = color(251, 227, 95)

  // fade background

  c = canvas_size

  for (let y = 0; y < canvas_size; y++) {

    n = (-4/c**2) * y**2 + 4/c * y

    let new_color = lerpColor(blue_color, yellow_color, n - 0.4);

    stroke(new_color);

    line(0,y,width, y);

  }

  // background writing

  fill(yellow_color);

  noStroke();

  text("Hello World!", canvas_size/2, canvas_size/2);

}

​

/**

 * Run everything

 */

function draw() {

​

  drawBackground();

  clouds.forEach(animateCloud);

}

​