console
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();
ctx.strokeStyle = "rgba(" + (color + 30) + ", " + (color + 20) + ", " + color + ", 0.25)";
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;
}
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)";
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);
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);
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;
}