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); }; }

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, '');