编程与手绘的对比(动态)

上一篇画了一个静态的雪人,现在我们来给它添加一些动态的背景。
先上代码:

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官网的参考文档,里面注释很详细。小球的话就是先做一个弹球,然后再根据这一个球改变参数做好多个球。因为我参数调得很仓促,就直接调成了两斜对角交叉方向上的所以效果比较辣眼睛,就先这样示意一下吧。
我觉得动态图的话码绘的优点就很明显了,因为在一张图中手绘根本无法画出动态效果,而编程绘画则可靠变量与循环等来实现。

猜你喜欢

转载自blog.csdn.net/Keddy17766475969/article/details/84455121