const shapes = [] let flake; let centerX = 0 let centerY = 0 function setup() { createCanvas(windowWidth, windowHeight, WEBGL) angleMode(DEGREES); // randomSeed(0); rectMode(CENTER); smooth() // strokeCap(SQUARE) createSnowflake() // createLightnings(-1, 100, 0, 0) } function draw() { background(36) flake.draw() noLoop() } function mouseClicked() { // not sure why mouse position is not centered centerX = mouseX - width / 2 centerY = mouseY - height / 2 createSnowflake() loop() // createLightnings(-1, 100, centerX, centerY) } let petals = 5 let angle = 360 / 2 / petals function createSnowflake() { petals = Math.round(random(5, 8)) angle = 360 / 2 / petals flake = new Snowflake() } class Snowflake { constructor() { this.lines = [] this.lines.push(new Line(0, 0, random(200, 400), 0)) } draw() { push() stroke(255) let weight = 3 strokeWeight(weight) for (var i = 0; i < 360 / angle; i++) { let multiplier = 2 * (i % 2) // 0 or 1rotate(angle * multiplier) rotate(angle * multiplier) this.drawLines(multiplier - 1) // -1 or 1 } pop() } drawLines(direction) { for (var i = 0; i < this.lines.length; i++) { this.lines[i].draw(direction) } } } let randomAngle = () => random(30, 60) * (Math.round(random(0, 1)) * 2 - 1) class Line { constructor(x, y, length, angle) { this.x = x this.y = y this.length = length this.angle = angle this.subLines = [] if (length > random(10, 50)) { let rand1 = random(1, 2) this.subLines.push(new Line(this.length / rand1, 0, this.length / (rand1 * 1.5), randomAngle())) if (length < 50 + rand1 * 50) { return } let rand2 = random(3, 4) this.subLines.push(new Line(this.length / rand2, 0, this.length / rand2, randomAngle())) if (length < 150 + rand2 * 15) { return } let rand3 = random(6, 7) this.subLines.push(new Line(this.length / rand3, 0, this.length / rand3, randomAngle())) } } draw(direction) { push() translate(this.x, this.y) rotate(this.angle * direction) line(0, 0, this.length, 0) for (var i = 0; i < this.subLines.length; i++) { this.subLines[i].draw(direction) this.subLines[i].draw(-direction) } pop() } } function directionsArray(prevDirection) { let array // make it not go back switch (prevDirection) { case 0: array = [0, 2, 3] break; case 1: array = [1, 2, 3] break; case 2: array = [0, 1, 2] break; case 3: array = [0, 1, 3] break; default: array = [0, 1, 2, 3] } // shuffle the array for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } // remove some directions randomly array.splice(0, Math.floor(random(array.length))) return array } function createLightnings(prevDirection, length, x, y) { if (length < 40) return; let chosenDirections = directionsArray(prevDirection) for (var i = 0; i < chosenDirections.length; i++) { shapes.push(new Lightning(x, y, length, chosenDirections[i])) } } let DIR = { LEFT: 0, RIGHT: 1, UP: 2, DOWN: 3 } class Lightning { constructor(x = 0, y = 0, maxSize = 100, direction) { this.x = x this.y = y this.direction = direction this.targetLength = Math.round(random(maxSize / 5 + 20, maxSize)) this.animationLength = 6 this.animated = 0 this.step = this.targetLength / this.animationLength if (direction === 0 || direction === 2) { this.step = -this.step } this.toX = x this.toY = y this.weight = Math.ceil(this.targetLength / 30) + 1 } move() { if (this.direction === 0 || this.direction === 1) { this.toX += this.step } else { this.toY += this.step } } moveBack() { if (this.direction === 0 || this.direction === 1) { if (Math.abs(this.x - this.toX) <= Math.abs(this.step)) { this.x = this.toX return } this.x += this.step * 2 } else { if (Math.abs(this.y - this.toY) <= Math.abs(this.step)) { this.y = this.toY return } this.y += this.step * 2 } } draw() { this.animated++ if (this.animated <= this.animationLength) { this.move() if (this.animated === this.animationLength) { createLightnings(this.direction, this.targetLength, this.toX, this.toY) } } else if (this.animated >= this.animationLength * 3) { this.moveBack() if (this.animated >= this.animationLength * 6) { shapes.shift() return } } stroke(255) strokeWeight(this.weight) line(this.x, this.y, this.toX, this.toY) } }

Click to generate a snowflake