HTML5 P5.js 彩虹雨 | 下雨动画

Rainbow rainy day，下雨的动画很多，下这么漂亮的七彩雨点少见。落在地上有雨点溅射动画。

html5, rain

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 6063
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var raindrops = [];
var numOfDrops;

function setup() {
    numOfDrops = windowWidth / 2;
    createCanvas(windowWidth, windowHeight);

for (var i = 0; i < numOfDrops; i++) {
        raindrops[i] = new Raindrop();
    }
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

function Raindrop(x, y) {
    this.x = random(windowWidth);
    this.y = random(-100, -600);

this.z = random(1, 3);

this.speed = random(1, 3);
    this.gravity = random(1, 2); 
    this.len = random(3, 10);
    this.rgb = [random(255), random(255), random(255)];

this.fall = function() {
        this.y += this.speed;
        this.y += this.gravity;
    }

this.reachedBottom = function() {
        if (this.y > windowHeight) {
            return true;
        } else {
            return false;
        }
    }

this.splash = function() {
        strokeWeight(this.z);

line(this.x, this.y, this.x + 10, this.y - 10); //RIGHT
        line(this.x, this.y, this.x + 10, this.y - 20);

line(this.x, this.y, this.x, this.y - 10); //MIDDLE

line(this.x, this.y, this.x - 10, this.y - 20);
        line(this.x, this.y, this.x - 10, this.y - 10); //LEFT

}

this.show = function() {
        strokeWeight(this.z);
        stroke(this.rgb[0], this.rgb[1], this.rgb[2]);  
        line(this.x, this.y, this.x, this.y + this.len);
    }
}

编译

CSS

HTML

Rainbow rainy day，下雨的动画很多，下这么漂亮的七彩雨点少见。落在地上有雨点溅射动画。

html5, rain

编辑器支持Emmet

快捷键

Rainbow rainy day，下雨的动画很多，下这么漂亮的七彩雨点少见。落在地上有雨点溅射动画。

html5, rain

HTML5 P5.js 曼荼罗花的轮廓线变换动画

HTML5 P5.js像素烟花动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：