var squares = [];
var squareSea;
var squareSize = 14;
var margins = 0;
var paddings = 20;
var gridSize = squareSize + margins;
var colorSpeed = 40;
var centerTop;
var brushSwitch = true;

function setup() {
createCanvas(windowWidth, windowHeight);
centerTop = (windowWidth / 2) - 30;
var maxForX = windowWidth - squareSize - paddings;
var maxForY = windowHeight - squareSize - paddings;

for (var b = paddings; b < maxForY; b += gridSize) {
for (var a = paddings; a < maxForX; a += gridSize) {
var ogColor = random(0, 255);
originalRow = new Square(a, b, squareSize, squareSize, ogColor);
squares.push(originalRow);
}}

var buttonColor = color(240,240,240, 200);
button = createButton('DRAW / ERASE');
button.position(centerTop, 30);
button.style('padding', '10px');
button.style('border', 'solid 1px #222222');
button.style('border-radius','4px');
button.style('background-color', buttonColor);
button.mousePressed(changePaint);
}

function changePaint() {
if (brushSwitch) {
brushSwitch = false;
} else {
brushSwitch = true;
}}

function draw() {
background(220);

for (var i = 0; i < squares.length; i++) {
squares[i].show();
}}

function mouseDragged() {
if (brushSwitch) {
for (var i = 0; i < squares.length; i++) {
var mouseDist = dist(mouseX, mouseY, squares[i].x, squares[i].y);
if (mouseDist < 20) {
squares[i].darker();
}}
} else {
for (var i = 0; i < squares.length; i++) {
var mouseDist = dist(mouseX, mouseY, squares[i].x, squares[i].y);
if (mouseDist < 20) {
squares[i].lighter();
}}
}}

class Square {
constructor(x, y, w, h, c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = c;}

darker() {
this.color = this.color - colorSpeed;}

lighter() {
this.color = this.color + colorSpeed; }

show() {
fill(this.color);
strokeWeight(1);
noStroke();
rect(this.x, this.y, this.w, this.h);
} }

var particles = [];
var particleNumber = 100;
var bubbles = [];
var cacti = [];

function setup() {createCanvas(windowWidth, windowHeight);}

function draw() {
var bgcolorX = map(mouseX, 0, width, 205, 124)
var bgcolorY = map(mouseY, 0, height, 144, 186)
background(bgcolorX, bgcolorY, 170);

for (let i = 0; i < particles.length; i++) {
var originalXSpeed = random(-0.5, 3);
var originalYSpeed = random(-1, 2.5);
particles[i].move(originalXSpeed, originalYSpeed);
particles[i].show();}

for (let i = 0; i < particleNumber / 100; i++) {
var randomX = random(-10, 0);
var randomY = random(0, height * 1.7);
var randomR = random(4, 12);
var newP = new Particle(randomX, randomY, randomR, 50);
particles.push(newP);}

for (let i = 0; i < bubbles.length -1; i++) {
bubbles[i].move();
bubbles[i].show();}

for (let i = 0; i < cacti.length; i++) {
cacti[i].move();
cacti[i].show();}
}

function mouseMoved() {mouseOnScreen();}
function mouseClicked() {mouseOnScreen();}
function mouseDragged() {mouseOnScreen();}
function mouseOnScreen() {
for (let i = 0; i < particles.length; i++) {
var randomXSpeed = random(0, mouseX * 0.01);
var randomYSpeed = random(0, mouseY * 0.005);
particles[i].move(randomXSpeed, randomYSpeed);
particles[i].show();
}
for (let i = 0; i < particleNumber / 100; i++) {
var randomXNew = random(-10, 0);
var randomYNew = random(0, height * 1.7);
var randomR = random(4, 12);
var newP = new Particle(randomXNew, randomYNew, randomR, 0);
particles.push(newP);
}
let bubbleSize = random(3, 14);
let mouseBubble = new Bubble(mouseX, mouseY, bubbleSize);
bubbles.push(mouseBubble);

var mouseP = new Particle(mouseX, mouseY, randomR, 150);
particles.push(mouseP);}

//////// Particle Class

class Particle {
constructor(x, y, r, o) {
this.x = x;
this.y = y;
this.r = r;
this.opacity = o;}

move(xSpeed, ySpeed) {
this.x = this.x + xSpeed;
this.y = this.y - ySpeed;
for (var i = 0; i < particles.length; i++) {
if (particles[i].x > width || particles[i].y < -10) {
particles.splice(i, 1);}}}

show() {
var colorX = map(mouseX, 0, width, 53,114);
var colorY = map(mouseY, 0, height, 65,50);
fill(colorX, colorY, 84, this.opacity);
stroke(colorX, colorY, 84);
ellipse(this.x, this.y, this.r, this.r);
}}

//////// Bubble Class

class Bubble {
constructor(x, y, r) {
this.x = x;
this.y = y;
this.r = r;}

move() {
var randomSize = random(-5,10);
this.r = this.r + randomSize;
for (let i = 0; i < bubbles.length; i++) {
if (bubbles[i].r > 100) {
bubbles.splice(i, 1);}}}

show() {
var colorX = map(mouseX, 0, width, 53,114);
var colorY = map(mouseY, 0, height, 65,50);
fill(255,30);
stroke(colorX, colorY, 84);
ellipse(this.x, this.y, this.r, this.r);}}