在本次的作业当中,我在上一次作业的基础上开始创作,成功让小鸡和云朵动了起来,并且给房子增添了动感。同时添加了一个转动的风车,参考了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 开始第一幅“码绘”——自定变量与函数,创一招“懵逼表情涂”