“运动”的龙猫

最新推荐文章于 2024-03-27 07:17:11 发布

REDswag

最新推荐文章于 2024-03-27 07:17:11 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.youkuaiyun.com/Yangjin121/article/details/84325777

版权

上一篇手绘vs码绘 https://blog.youkuaiyun.com/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);
}

总结：

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