Replicating "Color Changin'" by Alex Zaworski

In this example below you will see how to do a Replicating "Color Changin'" by Alex Zaworski with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Alca, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Alca ©
  • HTML
  • CSS
  • JavaScript
    script.
	window.canvasOptions = {
		//- autoClear: true,
		autoCompensate: false,
		autoPushPop: true,
		canvas: true,
		//- centered: true,
		width: null,
		height: null
	};

/*Downloaded from https://www.codeseek.co/Alca/replicating-andquotcolor-changinandaposandquot-by-alex-zaworski-LrZYma */
    


/*Downloaded from https://www.codeseek.co/Alca/replicating-andquotcolor-changinandaposandquot-by-alex-zaworski-LrZYma */
    // Replicating "Color Changin'" by Alex Zaworski
// https://codepen.io/alexzaworski/pen/mEkvAG

let groups = [];
let colors = [ [ 12, 100, 61 ], [ 37, 100, 66 ], [ 204, 64, 44 ], [ 242, 25, 20 ] ];
let currentColor = 0;
let corners = [];

function setup() {
	window.addEventListener('click', () => addGroup(mousePos.copy()));
}

function addGroup(start) {
	if(!start) {
		start = createVector(150, 0)
			.rotate(currentColor * THIRD_TAU - QUARTER_PI)
			.add(width_half, height_half);
	}
	let g = new Group(start);
	groups.push(g);
}

function draw(e) {
	if(groups.length < 1) { addGroup(); }
	corners = [
			[ 0, 0 ], [ width, 0 ], [ 0, height ], [ width, height ]
		].map(n => createVector(...n));
	groups = groups.filter(g => g.draw(e));
}

class Group {
	constructor(start = createVector(width_half, height_half)) {
		this.color = colors[currentColor++ % colors.length];
		this.nextColor = colors[currentColor % colors.length];
		this.created = performance.now();
		this.particles = [];
		this.start = start;
		for(let i = 0; i < 32; i++) {
			let p = {
					r: random(10, 30),
					end: createVector(random(300), 0)
						.rotate(random(TAU))
						.add(start),
					time: random(600, 1000)
				};
			this.particles.push(p);
		}
	}
	draw(time_) {
		let { start, created, nextColor, color, particles } = this;
		let animTime = time_ - created;
		let bigAnimTime = 800;
		let bigMaxR = max(...corners.map(v => start.dist(v)));
		// let bigAnimTime = bigMaxR;
		let bigEase = ease.quart.out(min(animTime, bigAnimTime), 0, 1, bigAnimTime);
		let ripEase = ease.expo.out(min(animTime, bigAnimTime), 0, 1, bigAnimTime);
		let bigR = max(0, bigEase * bigMaxR);
		let ripR = max(0, ripEase * bigMaxR);
		
		beginPath();
		circle(...start.xy, bigR);
		fill(hsl(...nextColor));
		
		beginPath();
		circle(...start.xy, ripR * 0.25);
		fill(hsl(...color, 0.8 * (1 - ripR / bigMaxR)));
		
		beginPath();
		particles.forEach(p => {
			let { r, end, time } = p;
			if(animTime > time) { return; }
			let timing = ease.quart.out(animTime, 0, 1, time);
			let pos = Vector.lerp(start, end, timing);
			circle(...pos.xy, (1 - animTime / time) * r);
		});
		fill(hsl(...color));
		return animTime <= 1200;
	}
}

Comments