p5.js:雪が降る

code:snowflakes.js

let snowflakes = []; // array to hold snowflake objects

function setup() {

createCanvas(400, 600);

fill(240);

noStroke();

}

function draw() {

background('brown');

let t = frameCount / 60; // update time

// create a random number of snowflakes each frame

for (let i = 0; i < random(5); i++) {

snowflakes.push(new snowflake()); // append snowflake object

}

// loop through snowflakes with a for..of loop

for (let flake of snowflakes) {

flake.update(t); // update snowflake position

flake.display(); // draw snowflake

}

}

// snowflake class

function snowflake() {

// initialize coordinates

this.posX = 0;

this.posY = random(-50, 0);

this.initialangle = random(0, 2 * PI);

this.size = random(2, 5);

// radius of snowflake spiral

// chosen so the snowflakes are uniformly spread out in area

this.radius = sqrt(random(pow(width / 2, 2)));

this.update = function(time) {

// x position follows a circle

let w = 0.6; // angular speed

let angle = w * time + this.initialangle;

this.posX = width / 2 + this.radius * sin(angle);

// different size snowflakes fall at slightly different y speeds

this.posY += pow(this.size, 0.5);

// delete snowflake if past end of screen

if (this.posY > height) {

let index = snowflakes.indexOf(this);

snowflakes.splice(index, 1);

}

};

this.display = function() {

ellipse(this.posX, this.posY, this.size);

};

}

code:sketch.js

const sketch = p => {

let snowflakes = []; // array to hold snowflake objects

p.setup = () => {

const canvas = p.createCanvas(window.innerWidth, document.body.clientHeight);

canvas.position(0,0); //canvasをページの原点に固定

canvas.style('z-index','-1');//canvasを後ろに移動する

p.fill(240);

p.noStroke();

}

p.draw = () => {

p.background('#edc3c0');

let t = p.frameCount / 60; // update time

// create a random number of snowflakes each frame

for (let i = 0; i < p.random(5); i++) {

snowflakes.push(new snowflake()); // append snowflake object

}

// loop through snowflakes with a for..of loop

for (let flake of snowflakes) {

flake.update(t); // update snowflake position

flake.display(); // draw snowflake

}

}

// snowflake class

function snowflake() {

// initialize coordinates

this.posX = 0;

this.posY = p.random(-50, 0);

this.initialangle = p.random(0, 2 * p.PI);

this.size = p.random(2, 5);

// radius of snowflake spiral

// chosen so the snowflakes are uniformly spread out in area

this.radius = p.sqrt(p.random(p.pow(p.width / 2, 2)));

this.update = function(time) {

// x position follows a circle

let w = 0.6; // angular speed

let angle = w * time + this.initialangle;

this.posX = p.width / 2 + this.radius * p.sin(angle);

// different size snowflakes fall at slightly different y speeds

this.posY += p.pow(this.size, 0.5);

// delete snowflake if past end of screen

if (this.posY > p.height) {

let index = snowflakes.indexOf(this);

snowflakes.splice(index, 1);

}

};

this.display = function() {

p.ellipse(this.posX, this.posY, this.size);

};

}

}

new p5(sketch, '');

https://img.shields.io/badge/p5.js-雪が降る-ED225D.svg?logo=p5.js&style=for-the-badge