SOURCE

console 命令行工具 X clear

                    
>
console
/* 

	It's a really messed up code. I know that you'll do a better job, Dan...
  
  Sorry, I didn't use p5.js. Anyway, I love you. Please, keep the great work :)
  
  ** CLICK THE MOTH TO CREATE SOME NEW WINGS **
*/

var PI = Math.PI;
var ctx;

function random(max, min) {
	return (max >= min) ? ((max - min) * Math.random() + min) : NaN;
}

function body(offsetX, offsetY) {
	var x, y, i, color, length = 20;

	color = parseInt(random(160, 80));

	ctx.beginPath();
	// Beige-ish color
	ctx.strokeStyle = "rgba(" + (color + 30) + ", " + (color + 20) + ", " + color + ", 0.25)";

	// Bottom
	for (i = 0; i < 200; i++) {
		y = offsetY - 40 + i;
		x = length * Math.sin(PI * i/200.0);

		ctx.moveTo(offsetX - x, y);
		ctx.lineTo(offsetX + x, y);

		length += 0.1;
	}

	// Top
	length = 60;

	for (i = 0; i < 200; i++) {
		y = offsetY - 60 + i;
		x = length * Math.sin(PI * i/200) + 2;

		ctx.moveTo(offsetX - x, y);
		ctx.lineTo(offsetX + x, y);

		length -= 0.5;
	}

	ctx.stroke();
}

function antennas(offsetX, offsetY) {
	var x, y, color;

	color = parseInt(random(160, 80));

	ctx.beginPath();
	ctx.strokeStyle = "rgba(" + (color + 30) + ", " + (color + 20) + ", " + color + ", 0.25)";

	// Polar Coordinates + Log
	for (var t = .5; t < 1; t += 0.02) {
		y = (offsetY - 50) - 100 * Math.log(t) * Math.cos(t) - 60;
		x = 100 * Math.log(t) * Math.sin(t) + 35;

		ctx.moveTo(offsetX - x - 10 * Math.sin(2 * t * PI), y);
		ctx.lineTo(offsetX - x + 10 * Math.sin(2 * t * PI), y);

		ctx.moveTo(offsetX + x - 10 * Math.sin(2 * t * PI), y);
		ctx.lineTo(offsetX + x + 10 * Math.sin(2 * t * PI), y);
	}

	ctx.stroke();
}

function wing(offsetX, offsetY, side) {
	var color, seed;

	color = parseInt(random(160, 80));

	ctx.beginPath();
	ctx.strokeStyle = "rgba(" + (color + 30) + ", " + (color + 20) + ", " + color + ", 0.6)";

	seed = random(350, 300);
	side(seed, offsetX, offsetY);
	ctx.stroke();
}

function bottom(seed, offsetX, offsetY) { 
	var x, y, r = random(10, -10);
	var kx = random(2, .8);
	var ky = random(1.8, .6);

	for(var t = 0; t > -1*PI/2; t -= 0.005) {
		r += random(10, -10) * Math.cos(t);

		// A modified rose, with random alterations in the amplitude each iteration
		// Polar (t) -> Cartesian (x, y)

		x = kx * (seed + r) * t * Math.cos(t) * Math.cos(t) - 30;
		y = ky * (seed + r) * t * Math.cos(t) * Math.sin(t);

		ctx.moveTo(x + offsetX, y + offsetY + 10);
		ctx.lineTo(offsetX - 10, offsetY - 5);

		ctx.moveTo(offsetX - x, y + offsetY + 25);
		ctx.lineTo(offsetX + 10, offsetY - 5);
	}
}

function topp(seed, offsetX, offsetY) {
	var x, y, r = random(10, -10);
	var kx = random(2.2, .8);
	var ky = random(1.8, .6);

	for(var t = 0; t < PI/2; t += 0.005) {
		r += random(10, -10) * Math.cos(t);

		x = -kx * (seed + r) * t * Math.cos(t) * Math.cos(t) - 30;
		y = -ky * (seed + r) * t * Math.cos(t) * Math.sin(t);

		ctx.moveTo(offsetX + x, y + offsetY);
		ctx.lineTo(offsetX - 10, offsetY);

		ctx.moveTo(offsetX - x, y + offsetY);
		ctx.lineTo(offsetX + 10, offsetY);
	}
}

function draw() {
	offsetX = window.innerWidth / 2;
	offsetY = window.innerHeight / 2;

	body(offsetX, offsetY);
  // Third time's a charm
	for (var i = 0; i < 3; i++) {
		wing(offsetX, offsetY, bottom);
		wing(offsetX, offsetY, topp);
	}

	antennas(offsetX, offsetY);
}

function setup() {
	var canvas = document.querySelector("#c");

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	ctx = canvas.getContext("2d");

	draw();
}

window.onload = setup;

window.addEventListener("click", setup);
<canvas id="c"/>
* {
  margin: 0px;
}

canvas {
  background-color: #222;
}