用html语言编写彩虹雨流动代码,HTML5 P5.js 彩虹雨 | 下雨动画
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
var raindrops = [];
var numOfDrops;
function setup() {
numOfDrops = windowWidth / 2;
createCanvas(windowWidth, windowHeight);
for (var i = 0; i < numOfDrops; i++) {
raindrops[i] = new Raindrop();
}
}
function draw() {
background(0);
for (var i = 0; i < numOfDrops; i++) {
raindrops[i].fall();
raindrops[i].show();
if (raindrops[i].reachedBottom()) {
raindrops[i].splash();
raindrops[i].y = 0;
}
}
}
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);
}
}