<script src="https://guppy-penguin-7ent.squarespace.com/s/p5.js"></script>

<script>

var subtract = 20;
var size;
var moveX = 0;
var moveY = 0;
var rgb = 0;
var colorInc = 0;


function centerCanvas() {

  var x = (windowWidth - width) / 2;

  var y = (windowHeight - height) / 2;

  cnv.position(x, 50);
}

function setup() {
  
  
  cnv = createCanvas(windowWidth-subtract, windowHeight);

  centerCanvas();
 


}

function draw() {
  
  //clear();
  //ellipse(mouseX, mouseY, 80, 80);
  
  frameRate(60);
  moveX = random(-10, 10);
  moveY = random(-10, 10);
  size = random(-10, 10);
	
  fill(255, 0, 255);
  ellipse(mouseX + moveX, mouseY + moveY, 30 + size, 30 + size);

  
	if (mouseIsPressed) {

		for (var i = 0; i < 5; i = i + 1) {

			rgb = rgb + 0.1;

			if (colorInc < 255) {
				colorInc = colorInc + 1;
			} else {
				colorInc = 255;
			}

			fill(rgb + colorInc, rgb, rgb + colorInc);
			if (size > 0) {
				size = size - 1;
			} else {
				size = 80;
			}

			moveX = random(-10, 10);
			moveY = random(-10, 10);
			ellipse(mouseX + moveX, mouseY + moveY, size, size);
		}
	} else {
		rgb = 0;
		colorInc = 0;
	
	}
    
  
    
}




</script>