“运动”的龙猫

上一篇手绘vs码绘 https://blog.csdn.net/Yangjin121/article/details/84325023

让作品“动”起来

继上一篇不会动的假龙猫之后，这次添加了一些细微的动图

首先让龙猫的肚子，脚，眼睛动起来，相比之前稍微显得滑稽鬼畜。

具体代码：

  
//在draw函数里画的龙猫的肚子push();translate(350,370);fill(219,217,183);rotate(frameCount / 50.0);polygon(0, 0, 100, 12); pop();//polygon函数
function polygon(x, y, radius, npoints) {var angle = TWO_PI / npoints;beginShape();for (var a = 0; a < TWO_PI; a += angle) {var sx = x + cos(a) * radius;var sy = y + sin(a) * radius;vertex(sx, sy);}endShape(CLOSE);
}

加入交互，鼠标点击灯的位置，颜色会随机变换

  //画出灯strokeWeight(0);stroke(r, g, b);fill(r, g, b, 127);ellipse(50, 50, 80, 80);//mousePressed函数
function mousePressed() {// Check if mouse is inside the circlevar d = dist(mouseX, mouseY, 50, 50);if (d < 100) {// Pick new random color valuesr = random(255);g = random(255);b = random(255);}
}

加入雪花

// loop through snowflakes with a for..of loopfor (let flake of snowflakes) {flake.update(t); // update snowflake positionflake.display(); // draw snowflake}function snowflake() {// initialize coordinatesthis.posX = 0;this.posY = random(-50, 0);this.initialangle = random(0, 2 * PI);this.size = random(2, 3);// radius of snowflake spiral// chosen so the snowflakes are uniformly spread out in areathis.radius = sqrt(random(pow(width / 2, 2)));this.update = function(time) {// x position follows a circlelet w = 0.6; // angular speedlet angle = w * time + this.initialangle;this.posX = width / 2 + this.radius * sin(angle);// different size snowflakes fall at slightly different y speedsthis.posY += pow(this.size, 0.5);// delete snowflake if past end of screenif (this.posY > height) {let index = snowflakes.indexOf(this);snowflakes.splice(index, 1);}};this.display = function() {ellipse(this.posX, this.posY, this.size);};
}

完整代码


let snowflakes = []; // array to hold snowflake objects
var r, g, b;
function setup() {createCanvas(700, 500);noStroke();r = random(255);g = random(255);b = random(255);}function draw() {background(167,148,150);let t = frameCount / 60; // update time// create a random number of snowflakes each framefill(219,217,183);for (var i = 0; i < random(5); i++) {snowflakes.push(new snowflake()); // append snowflake object}// loop through snowflakes with a for..of loopfor (let flake of snowflakes) {flake.update(t); // update snowflake positionflake.display(); // draw snowflake}//dengstrokeWeight(0);stroke(r, g, b);fill(r, g, b, 127);ellipse(50, 50, 80, 80);//dianganfill(179,209,193);rect(40,88,20,500);//longmao//waixingfill(229,129,133);ellipse(350,350,220,240);ellipse(300,230,30,55); ellipse(400,230,30,55); rect(315,230,80,10);//duzipush();translate(350,370);fill(219,217,183);rotate(frameCount / 50.0);polygon(0, 0, 100, 12); pop();//yanjingpush();translate(300,260);fill(219,217,183);rotate(frameCount / 50.0);polygon(0, 0, 10, 6); pop();push();translate(400,260);fill(219,217,183);rotate(frameCount / 50.0);polygon(0, 0, 10, 6); pop();//heiseyanzhufill(0);ellipse(300,260,8,8);ellipse(400,260,8,8);ellipse(350,260,20,8);//jiaopush();translate(400,470);fill(219,217,183);rotate(frameCount / 50.0);polygon(0, 0, 20, 3); pop();push();translate(300,470);fill(219,217,183);rotate(frameCount / 50.0);polygon(0, 0, 20, 3); pop();}function mousePressed() {// Check if mouse is inside the circlevar d = dist(mouseX, mouseY, 50, 50);if (d < 100) {// Pick new random color valuesr = random(255);g = random(255);b = random(255);}
}// snowflake class
function snowflake() {// initialize coordinatesthis.posX = 0;this.posY = random(-50, 0);this.initialangle = random(0, 2 * PI);this.size = random(2, 3);// radius of snowflake spiral// chosen so the snowflakes are uniformly spread out in areathis.radius = sqrt(random(pow(width / 2, 2)));this.update = function(time) {// x position follows a circlelet w = 0.6; // angular speedlet angle = w * time + this.initialangle;this.posX = width / 2 + this.radius * sin(angle);// different size snowflakes fall at slightly different y speedsthis.posY += pow(this.size, 0.5);// delete snowflake if past end of screenif (this.posY > height) {let index = snowflakes.indexOf(this);snowflakes.splice(index, 1);}};this.display = function() {ellipse(this.posX, this.posY, this.size);};
}
function polygon(x, y, radius, npoints) {var angle = TWO_PI / npoints;beginShape();for (var a = 0; a < TWO_PI; a += angle) {var sx = x + cos(a) * radius;var sy = y + sin(a) * radius;vertex(sx, sy);}endShape(CLOSE);
}

总结：

手绘一幅作品不需要知道所要画的物体的具体位置，而码绘需要确切的知道每个点的位置，大小，这相比手绘要费时间。手绘更加随心所欲，也知道自己会画出怎样的画，而码绘有很多不确定性，不一定知道自己能画出什么，这就会产生很多的意外的创作。而手绘只能通过超高的绘画水平来体现一幅画的意境以及想要表达的思想，码绘可以通过一些动作表达创作者想要表达的东西，还可以通过交互方式提升作品的趣味。