第二幅动态码绘——再次浅谈手绘和码绘的不同

在本次的作业当中,我在上一次作业的基础上开始创作,成功让小鸡和云朵动了起来,并且给房子增添了动感。同时添加了一个转动的风车,参考了P5.js的范例绘制了雪花粒子。

同时手绘和用ps各制作了一份作品,下面分别是手绘和码绘的作品。

码绘:

 

 

 

 

 

 

ps:

手残调色调的不好请见谅。。。

最后来我尝试用手绘的方式制作。

完整代码:

var cx, cy;
var secondsRadius;
var minutesRadius;
var hoursRadius;


function setup() {
	createCanvas(1000, 800);
	stroke(255);
	frameRate(20);//设置每秒20帧
  var radius = 60;
  secondsRadius = radius * 0.71;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
 
  
  cx = 600;
  cy = 420;
}
var x=0;
var y=100;
var X=720;
var Y=230;
var X1=250;
var Y1=550;

var x1=400;
var y1=300;
var x2=200;
var y2=300;
var x3=300;
var y3=200;
var x4=300;
var y4=400;
var w=Math.PI/6;
var w1=Math.PI;
var w2=2*Math.PI;
var w3=0;
var w4=Math.PI;
var w5=1.5*Math.PI;
var w6=0.5*Math.PI;
var w7=0.5*Math.PI;
var w8=1.5*Math.PI;
//旋转角度
var w0=0;

function draw() {
  
	background(0, 0, 40);
	darwsky();
	
	drawclouds(x,y);
	x=x+2;
	if(x>1000){
		x=0;
	}


	Y=Y-2;
	drawgrag(X,Y);
	drawgrag(X,Y-40);
	drawgrag(X,Y-80);
	drawgrag(X,Y-120);
	drawgrag(X,Y-160);
	drawgrag(X,Y-200);
	if(Y<150){
		X=720;
	  Y=230;
	}
	if(Y<230)
	{
		
		drawgrag(X,Y+40);
		drawgrag(X,Y+80);
	}


	drawhouse();
  drawfengche();


	if(X1%2==0){
		drawchicken1(X1,Y1);
		drawchicken2(X1,Y1);
	 drawchicken3(X1,Y1);
	}else{
		drawchicken1(X1,Y1-10);
		drawchicken2(X1-20,Y1-20);
	  drawchicken4(X1,Y1);
	}
	X1=X1+1;
	if(X1>900){
		X1=250;
	}
	drawclock();

	drawsnow();
	

	
}

function darwsky(){

	noStroke();
	fill(0,0,128);
	quad(0,0,0,300,1000,300,1000,0);//绘制天空

	
}


function drawclouds(X , Y){
	
	fill(190,190,190,255);
	ellipse(X,Y,100,100);
	ellipse(X+50,Y-30,100,100);
	ellipse(X+100,Y,100,100);
	ellipse(X+50,Y+10,100,100);//绘制云朵
	
	
}


function drawgrag(X , Y){
	
	fill(255,255,255,255);
	ellipse(X,Y,20,20);
	ellipse(X+10,Y-6,20,20);
	ellipse(X+20,Y,20,20);
	ellipse(X+10,Y+2,20,20);//绘制云朵
	
	
}
function drawhouse(){
	noStroke();
	fill(255,127,80);
	quad(400,710,800,710,800,510,400,510);
	triangle(400,510,800,510,600,310);//绘制房子主体
	
	
	fill(94,38,18);
	quad(680,300,770,300,770,250,680,250);
	
	fill(115,74,18);
	quad(700,300,750,300,750,410,700,410);//绘制烟囱
	
	
  fill(199,97,20);
	quad(600,260,600,310,400,510,350,510);
  quad(600,260,600,310,800,510,850,510);//绘制屋顶
	
	fill(255,255,255);noStroke();
	fill(255,127,80);
	quad(400,710,800,710,800,510,400,510);
	triangle(400,510,800,510,600,310);//绘制房子主体
	
	
	fill(94,38,18);
	quad(680,300,770,300,770,250,680,250);
	
	fill(115,74,18);
	quad(700,300,750,300,750,410,700,410);//绘制烟囱
	
	
  fill(199,97,20);
	quad(600,260,600,310,400,510,350,510);
  quad(600,260,600,310,800,510,850,510);//绘制屋顶
	
	fill(255,255,255);
	quad(450,650,550,650,550,550,450,550);
	
	fill(64,224,208);
	quad(460,640,490,640,490,610,460,610);
	quad(510,640,540,640,540,610,510,610);
	quad(510,590,540,590,540,560,510,560);
	quad(460,590,490,590,490,560,460,560);//绘制窗户
	
	fill(160,82,45);
	quad(600,710,750,710,750,510,600,510);
	
	fill(0,0,0);
	ellipse(730,610,20,20);//绘制门
	
		
	fill(135,206,235);
	quad(450,650,550,650,550,550,450,550);
	
	fill(64,224,208);
	quad(460,640,490,640,490,610,460,610);
	quad(510,640,540,640,540,610,510,610);
	quad(510,590,540,590,540,560,510,560);
	quad(460,590,490,590,490,560,460,560);//绘制窗户
	
	fill(160,82,45);
	quad(600,710,750,710,750,510,600,510);
	
	fill(0,0,0);
	ellipse(730,610,20,20);//绘制门

}

function drawclock()
{
	noStroke();
  fill(0,191,255);
  ellipse(600, 420, 120, 120);
  fill(30,144,245);
  ellipse(600,420, 100, 100);
  
 
  var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  
  stroke(255);
  strokeWeight(1);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
  
  
  strokeWeight(2);
  beginShape(POINTS);
  for (var a = 0; a < 360; a+=6) {
    var angle = radians(a);
    var x = cx + cos(angle) * secondsRadius;
    var y = cy + sin(angle) * secondsRadius;
    vertex(x, y);

}
}


function drawfengche()
{
	fill(0);
	rect(300,300,10,400);
	fill(255,106,106);
	arc(x1, y1, 200, 200, w1, w2);
	fill(255,106,106);
	arc(x2, y2, 200, 200, w3, w4);
	fill(255,106,106);
  arc(x3, y3, 200, 200, w5, w6);
  fill(255,106,106);
	arc(x4, y4, 200, 200, w7, w8);
	w0=w0+w;
	w1=Math.PI+w0;
	w2=2*Math.PI+w0;
	w3=w0;
	w4=Math.PI+w0;
	w5=1.5*Math.PI+w0;
	w6=0.5*Math.PI+w0;
	w7=0.5*Math.PI+w0;
	w8=1.5*Math.PI+w0;

	x1=300+100*Math.cos(w0);
	x2=300+100*Math.cos(w0+Math.PI);
	x3=300+100*Math.cos(w0+0.5*Math.PI);
	x4=300+100*Math.cos(w0+1.5*Math.PI);
	y1=300+100*Math.sin(w0);
	y2=300+100*Math.sin(w0+Math.PI);
	y3=300+100*Math.sin(w0+0.5*Math.PI);
	y4=300+100*Math.sin(w0+1.5*Math.PI);

}



function drawchicken1(x1,y1)
{
	stroke(0);
	strokeWeight(1);
	fill(255,255,0);
	ellipse(x1-100,y1+50,200,200);//绘制椭圆(x,y,宽,高)

	stroke(0);
	strokeWeight(1);
	fill(255,127,80);
  quad(x1-110,y1+150,x1-105,y1+150,x1-105,y1+160,x1-110,y1+160);
	quad(x1-95,y1+150,x1-90,y1+150,x1-90,y1+160,x1-95,y1+160);//绘制小鸡
}

function drawchicken2(x1,y1)
{
	
	
	stroke(0);
	strokeWeight(1);
	fill(255,255,0);
	ellipse(x1,y1,100,100);//绘制椭圆(x,y,宽,高)
	
	fill(0,0,0);
	ellipse(x1,y1,10,10);
	

	
	stroke(0);
	strokeWeight(1);
	fill(255,127,80);
	triangle(x1+50,y1+5,x1+50,y1-5,x1+75,y1);


}
function drawchicken3(x1,y1)
{
	noStroke();
	fill(255,215,0);
	arc(x1-100, y1+50, 100, 100, 0, PI);

}

function drawchicken4(x1,y1)
{
	noStroke();
	fill(255,215,0);
	arc(x1-100, y1+50, 100, 100, 90, PI);

}


let snowflakes = []; 
function drawsnow() {

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


function snowflake() {
 
  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);
  };
}

下面从个人角度出发来简述码绘和手绘关于运动主题创作的不同之处。

一 技法

从绘画的技法来说,手绘几乎不需要任何技巧,ps的话可能需要掌握一定的ps技术,码绘的技巧在我看来是最高的,因为要写整个逻辑结构,比如以绘制天空和风车为例,肯定是先绘制天空再绘制风车。码绘要学习新的知识,比如粒子系统。这些技巧是手绘和ps不需要掌握的。

二 工具

码绘工具:P5.JS

手绘工具:画笔

电脑绘制工具:Photoshop

三 理念

最开始确实不知道该绘制些什么,所以码绘的理念是在第一次码绘的基础上进行创作,之后又添加了一些新的东西。而手绘因为比较简单的原因,更多的是绘制一些比较好玩的。

 

四 创作体验

码绘时最开始是让云朵动了起来,之后便想着可不可以让小鸡的动态不那么单一,然后又觉得是不是可以给房子添加一些动态效果,所以我添加了烟囱里的烟雾以及时钟的运动。添加完了之后便思考要不要添加其他的东西,于是思考如何添加一个运动的风车,最开始打算用循环来绘制风车,但是发现不行,于是参考了某篇文章的代码来进行绘制。(最后会放上该篇文章的链接)。这个过程是一个探索的过程,每次做出新的东西都会让我很开心。手绘和ps的过程同样也是如此。

 

 

五 呈现效果

手绘感觉一般般,ps的话因为配色的问题整个画面不是很好看,码绘整个画面感觉有点鬼畜。

六 局限性

码绘的局限性:首先无法像手绘画出复杂的作品,因为目前接触p5.js不久,只能绘制一些简单的图形。

比如这种作品码绘不出来(众多手残手绘中一幅还可以的)。

手绘和ps的局限性:首先是工作量很大,而且每次只能绘制一个画面,对于码绘几行代码就能绘制出动态效果,而手绘和ps则不行。

七 应用

码绘的话我觉得可以在某种简单的效果图中应用,手绘和ps可以用于绘制想发布的作品等等。比如和简单的定格动画这种。

八 参考资料

1.5 开始第一幅“码绘”——自定变量与函数,创一招“懵逼表情涂”

1.8 码绘入门——运用条件判断,做出不同表情

使用p5.js画一幅简单的风车动态效果图

p5.js绘制时钟

p5.js绘制雪花

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
资源包主要包含以下内容: ASP项目源码:每个资源包中都包含完整的ASP项目源码,这些源码采用了经典的ASP技术开发,结构清晰、注释详细,帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码,用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件:为了方便用户更好地理解系统的后台逻辑,每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档,以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境,并了解各个数据表之间的关系和作用。 详细的开发文档:每个资源包都附有详细的开发文档,文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料,使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南:为帮助用户更好地理解和使用这些ASP项目,每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程,使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考:对于正在准备毕业设计的学生来说,这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰,还符合常见的毕业设计要求和标准。通过这些项目,学生可以学习到如何从零开始构建一个完整的Web系统,并积累丰富的项目经验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值