together

let colorArray;
let playBool = true;
let colorArray2;
let colorArray3;
let t, bg, g;
let nClouds;
let cB, cS, cC, cP, cP2;
let clouds = [];
let logo;
function preload() {
	logo = loadImage(
		"https://i0.wp.com/fractalkitty.com/wp-content/uploads/2019/05/cropped-logo120px.png?w=240&ssl=1"
	);
}
function setup() {
	noStroke();
	g = min(windowWidth * 0.9, windowHeight * 0.9);
	createCanvas(windowWidth * 0.9, windowHeight * 0.9);
	nClouds = max(20, floor(g / 30));
	colorArray = [
		color(50, 35, 24),
		color(60, 57, 51),
		color(74, 80, 76),
		color(112, 99, 90),
		color(126, 115, 107),
		color(99, 127, 129),
		color(106, 150, 156),
		color(146, 181, 188),
		color(183, 194, 189),
		color(216, 201, 180)
	];
	colorArray2 = [
		color(203, 154, 110),
		color(193, 136, 93),
		color(183, 118, 77),
		color(173, 99, 61),
		color(162, 81, 46),
		color(142, 66, 36),
		color(114, 55, 32),
		color(87, 44, 28),
		color(61, 33, 24),
		color(37, 23, 19)
	];
	colorArray3 = [
		color(43, 49, 52),
		color(44, 53, 63),
		color(45, 66, 75),
		color(45, 73, 86),
		color(45, 80, 98),
		color(63, 91, 105),
		color(94, 96, 108),
		color(123, 112, 110),
		color(150, 129, 111),
		color(178, 146, 112)
	];
	bg = colorArray3[floor(random(0, colorArray3.length))];
	for (let i = 0; i < nClouds; i++) {
		clouds.push(new Cloud());
	}
	cB = colorArray[floor(random(0, colorArray.length))];
	cS = colorArray[floor(random(0, colorArray.length))];
	cC = colorArray2[floor(random(0, colorArray2.length))];
	cP = colorArray[floor(random(0, colorArray.length))];
	cP2 = colorArray[floor(random(0, colorArray.length))];
}
function draw() {
	if (playBool) {
		t = frameCount;
		background(bg);
		balloon();
		for (let i = 0; i < clouds.length; i++) {
			clouds[i].display();
		}
	} else {
		frameCount--;
	}
	if (mouseX > 0 && mouseX < 20 && mouseY > 0 && mouseY < 20) {
		image(logo, 0, 0, 20, 20);
		if (mouseIsPressed) {
			window.open("https://fractalkitty.com/");
		}
	}
}

class Cloud {
	constructor() {
		this.c = colorArray[floor(random(0, colorArray.length))];
		this.c.setAlpha(10);
		this.size = random(10, 60);
		this.pos = createVector(random(0, width), random(-100, height + 400));

		this.array = [];
		for (let i = 0; i < this.size * 10; i++) {
			this.array[i] = createVector(
				this.size * randomGaussian(sin(i)),
				this.size * random(cos(i))
			);
		}
	}
	display() {
		this.c.setAlpha(10);
		fill(this.c);
		for (let i = 0; i < this.size * 10; i++) {
			circle(
				this.pos.x + this.array[i].x,
				((this.pos.y + t) % (height + 200)) - 100 + this.array[i].y,
				this.size
			);
		}
	}
}

function balloon() {
	push();
	cS.setAlpha(255);
	cC.setAlpha(255);
	cB.setAlpha(90);
	cP.setAlpha(255);
	cP2.setAlpha(255);
	fill(cB);

	d = g / 6;
	for (let i = 0; i < 20; i++) {
		circle(width / 2 - i, g / 3, d + 2 - i * 2);
	}
	stroke(cS);
	strokeWeight(0.5);
	noFill();
	arc(width / 2, g / 3, d * 1.05, d / 5, 0, PI);
	for (let i = 0; i < 20; i++) {
		x = width / 2 + (d / 1.9) * cos((i * PI) / 20);
		y = g / 3 + (d / 10) * sin((i * PI) / 20);
		line(x, y, width / 2 + 10 - i, g / 3 + d * 2.1);
	}
	line(width / 2 - 10, g / 3 + d * 2.1, width / 2 - 10, g / 3 + d * 2.1 + 20);
	line(width / 2 + 10, g / 3 + d * 2.1, width / 2 + 10, g / 3 + d * 2.1 + 20);
	noStroke();
	cB.setAlpha(250);
	fill(cP);
	circle(width / 2 - 5, g / 3 + d * 2.1 + 12, 5);
	circle(width / 2 + 5, g / 3 + d * 2.1 + 12, 5);
	fill(cP2);
	triangle(
		width / 2 - 5,
		g / 3 + d * 2.1 + 14,
		width / 2 - 8,
		g / 3 + d * 2.1 + 22,
		width / 2 - 5,
		g / 3 + d * 2.1 + 22
	);
	triangle(
		width / 2 + 5,
		g / 3 + d * 2.1 + 14,
		width / 2 + 8,
		g / 3 + d * 2.1 + 22,
		width / 2 + 5,
		g / 3 + d * 2.1 + 22
	);
	stroke(cP);
	strokeWeight(0.5);
	line(
		width / 2 - 5,
		g / 3 + d * 2.1 + 18,
		width / 2 - 10,
		g / 3 + d * 2.1 + 14
	);
	line(
		width / 2 + 5,
		g / 3 + d * 2.1 + 18,
		width / 2 + 10,
		g / 3 + d * 2.1 + 14
	);
	line(width / 2 - 5, g / 3 + d * 2.1 + 18, width / 2, g / 3 + d * 2.1 + 19);
	line(width / 2 + 5, g / 3 + d * 2.1 + 16, width / 2, g / 3 + d * 2.1 + 19);

	fill(cC);
	noStroke();
	rect(width / 2 - 10, g / 3 + d * 2.1 + 20, 20, 20);
	pop();
}

function mousePressed() {
	playBool = !playBool;
}
function keyPressed() {
	playBool = true;
	clouds = [];
	setup();
	draw();
}
function windowResized() {
	playBool = true;
	clouds = [];
	resizeCanvas(windowWidth * 0.9, windowHeight * 0.9);
	setup();
	draw();
}