上一篇画了一个静态的雪人,现在我们来给它添加一些动态的背景。
先上代码:
var x=0;
var y=0;
var Vx=40;
var Vy=40;
let snowflakes = [];
function setup() {
createCanvas(920, 700);
noStroke();
}
function draw() {
background('#0DEAFF');
snowman();
let t = frameCount / 60;
for (var i = 0; i < random(5); i++) {
snowflakes.push(new snowflake());
}
for (let flake of snowflakes) {
flake.update(t);
flake.display();
}
fill(random(255),random(255),random(255));
ellipse(x,y,40,40);
ellipse(x-100,y+100,40,40);
ellipse(x+100,y-100,40,40);
ellipse(x-100,y-100,40,40);
ellipse(x+100,y+100,40,40);
ellipse(x-200,y+200,40,40);
ellipse(x+200,y-200,40,40);
ellipse(x-200,y-200,40,40);
ellipse(x+200,y+200,40,40);
ellipse(x-300,y+300,40,40);
ellipse(x+300,y-300,40,40);
ellipse(x-300,y-300,40,40);
ellipse(x+300,y+300,40,40);
ellipse(x-400,y+400,40,40);
ellipse(x+400,y-400,40,40);
ellipse(x-400,y-400,40,40);
ellipse(x+400,y+400,40,40);
ellipse(x-500,y+500,40,40);
ellipse(x+500,y-500,40,40);
ellipse(x-500,y-500,40,40);
ellipse(x+500,y+500,40,40);
ellipse(x-600,y+600,40,40);
ellipse(x+600,y-600,40,40);
ellipse(x-600,y-600,40,40);
ellipse(x+600,y+600,40,40);
ellipse(x-700,y+700,40,40);
ellipse(x+700,y-700,40,40);
ellipse(x-700,y-700,40,40);
ellipse(x+700,y+700,40,40);
x+=Vx;
y+=Vy;
if(x>width||x<0){
Vx*=-1;
}
if(y>height||y<0){
Vy*=-1;
}
}
function snowman(){
fill(255);
//脸
ellipse(450,250,150,150);
//左眼
fill(0);
ellipse(418,230,24,26);
//右眼
ellipse(482,230,24,26);
//鼻子
fill('#FF620D');
triangle(445, 250, 405, 270, 450, 260);
// 身体
fill(255);
ellipse(450,425,200,200);
//纽扣
fill('#0E0CE8');
ellipse(450,355,12,12);
ellipse(450,380,12,12);
ellipse(450,405,12,12);
ellipse(450,430,12,12);
ellipse(450,455,12,12);
//左胳膊
fill(0);
quad(270, 270, 390, 390, 390, 389, 270, 269);
quad(300, 300, 301, 300, 301, 250, 300, 250);
//右胳膊
quad(640, 310, 510, 390, 510, 389, 640, 309);
quad(590, 340, 610, 300, 610, 299, 590, 339);
quad(650, 370, 570, 353, 570, 352, 650, 369);
//帽子
fill('#0C94E8');
rect(373, 165, 155, 18);
rect(401, 95, 98, 70, 90, 90, 0, 0);
}
function snowflake() {
fill(255);
this.posX = 0;
this.posY = random(-50, 0);
this.initialangle = random(0, 2 * PI);
this.size = random(2, 5);
this.radius = sqrt(random(pow(width / 2, 2)));
this.update = function(time) {
let w = 0.6;
let angle = w * time + this.initialangle;
this.posX = width / 2 + this.radius * sin(angle);
this.posY += pow(this.size, 0.5);
if (this.posY > height) {
let index = snowflakes.indexOf(this);
snowflakes.splice(index, 1);
}
};
this.display = function() {
ellipse(this.posX, this.posY, this.size);
};
}
效果:
emmmmmm因为是随便画的所以有点丑。。。放上一张更吃藕的手绘图:
希望没有吓到小朋友。。。。。
与静态图相比,主要就是增加了下雪的效果和在图中魔性乱晃的小球。下雪的效果参考了p5.js官网的参考文档,里面注释很详细。小球的话就是先做一个弹球,然后再根据这一个球改变参数做好多个球。因为我参数调得很仓促,就直接调成了两斜对角交叉方向上的所以效果比较辣眼睛,就先这样示意一下吧。
我觉得动态图的话码绘的优点就很明显了,因为在一张图中手绘根本无法画出动态效果,而编程绘画则可靠变量与循环等来实现。