“运动”的龙猫

上一篇手绘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 circle
  var d = dist(mouseX, mouseY, 50, 50);
  if (d < 100) {
    // Pick new random color values
    r = random(255);
    g = random(255);
    b = random(255);
  }
}

加入雪花

// loop through snowflakes with a for..of loop
  for (let flake of snowflakes) {
    flake.update(t); // update snowflake position
    flake.display(); // draw snowflake
  }


function snowflake() {
  // initialize coordinates
  this.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 area
  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {
    // x position follows a circle
    let w = 0.6; // angular speed
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    // different size snowflakes fall at slightly different y speeds
    this.posY += pow(this.size, 0.5);

    // delete snowflake if past end of screen
    if (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 frame
  fill(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 loop
  for (let flake of snowflakes) {
    flake.update(t); // update snowflake position
    flake.display(); // draw snowflake
  }
	//deng
  strokeWeight(0);
  stroke(r, g, b);
  fill(r, g, b, 127);
  ellipse(50, 50, 80, 80);
	
	//diangan
  fill(179,209,193);
	rect(40,88,20,500);

 
	//longmao
  //waixing
  fill(229,129,133);
  ellipse(350,350,220,240);
  ellipse(300,230,30,55); 
  ellipse(400,230,30,55); 
  rect(315,230,80,10);
  
  //duzi
  push();
  translate(350,370);
	fill(219,217,183);
  rotate(frameCount / 50.0);
  polygon(0, 0, 100, 12); 
  pop();
  
  
  //yanjing
  push();
  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();
  //heiseyanzhu
  fill(0);
  ellipse(300,260,8,8);
  ellipse(400,260,8,8);
  ellipse(350,260,20,8);
  //jiao
	push();
  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 circle
  var d = dist(mouseX, mouseY, 50, 50);
  if (d < 100) {
    // Pick new random color values
    r = random(255);
    g = random(255);
    b = random(255);
  }
}

// snowflake class
function snowflake() {
  // initialize coordinates
  this.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 area
  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {
    // x position follows a circle
    let w = 0.6; // angular speed
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    // different size snowflakes fall at slightly different y speeds
    this.posY += pow(this.size, 0.5);

    // delete snowflake if past end of screen
    if (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);
}

 

• 总结：

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

• 参考链接：

p5.js官网教程：https://p5js.org/examples/

bilibili网站教程“详解码绘彩虹猫动画” https://www.bilibili.com/video/av19583422?t=45

bilibili网站教程“丹叔的教程”  https://www.bilibili.com/video/av16332092  （强烈推荐，入门很有用）

中国大学MOOC网互动媒体教程 https://www.bilibili.com/video/av16332092  （老师讲的很详细，还有QQ群可以讨论，提问）

CSDN博客：https://blog.csdn.net/magicbrushlv/article/details/77919571

简书里的一些作品集：https://www.jianshu.com/c/954638baa7ad

一位大佬做的创意动态绘版超级nice：https://blog.csdn.net/qq_27534999/article/details/79427721