# “运动”的龙猫

• ### 让作品“动”起来

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


//在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);

// 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);

// 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  （强烈推荐，入门很有用）