/* 
Rishabh Patni

Note: The "trippy clouds" have flashing colors. If you're sensitive to such animations, please do not use this.

Use: Click on the canvas to create trippy clouds!

*/


// Create Array
var clouds = [];


function setup() {
  createCanvas(600, 600);
}


function draw() {
  background("#ADD8E6");

	// Randomized movement of objects
	for (i = 0; i < clouds.length; i++) {
		var trippy = clouds[i];
		drawCloud(trippy.xpos, trippy.ypos, trippy.size, randomColor());
		trippy.xpos += 0.5;
		trippy.ypos += random(-0.5, 0.5);

	}
}


// Randomized Color
function randomColor() {
  var red = round(random(140, 255));
  var green = round(random(140, 255));
  var blue = round(random(140, 255));

 // print(red + ", " + green + ", " + blue);//
  return color(red, green, blue);
}


// Push new randomly sized cloud on click
function mouseClicked() {
  
	var newCloud = {
      xpos: mouseX, 
      ypos: mouseY, 
      size: random(1.2, 2.4), 
    };
	
  clouds.push(newCloud);
}


// Draw cloud
function drawCloud(xpos, ypos, size, rColor) {

  fill(rColor);
  noStroke();
    arc(xpos, ypos, 30 * size, 30 * size, PI + TWO_PI, TWO_PI);
    arc(xpos + 10, ypos, 30 * size, 45 * size, PI + TWO_PI, TWO_PI);
    arc(xpos + 40, ypos, 40 * size, 35 * size, PI + TWO_PI, TWO_PI);
    arc(xpos + 50, ypos, 40 * size, 20 * size, PI + TWO_PI, TWO_PI);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js