processing实现canvas飞龙在天动画效果代码
代码语言：html
所属分类：动画
代码描述：processing实现canvas飞龙在天动画效果代码，一直西方的龙在天空中飞翔。
代码标签： processing canvas飞龙 天空 飞翔 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #fff;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body canvas {
box-shadow: 0.2em 0.2em 2em #0008;
border: none;
outline: none;
border-radius: 1em;
}
</style>
</head>
<body >
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>
<script id="rendered-js" >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
var scene;
var Dragon = function() {
this.x = 200;
this.y = 200;
this.w = 150;
this.h = 100;
this.vx = 0;
this.vy = 0;
this.segments = [];
this.timer = 0;
this.speed = 4;
this.lift = 3;
this.showLegs = true;
this.wing = {
x1: 0,
y1: 0,
x2: 0,
y2: 0,
x3: 0,
y3: 0,
x4: 0,
y4: 0,
spines: {
a: {
x1: 0,
y1: 0,
x2: 0,
y2: 0
},
b: {
x1: 0,
y1: 0,
x2: 0,
y2: 0
},
c: {
x1: 0,
y1: 0,
x2: 0,
y2: 0
},
d: {
x1: 0,
y1: 0,
x2: 0,
y2: 0
}
}
};
this.nodes = [
10,
14,
12,
18,
23,
28,
37,
42,
50,
50,
46,
42,
35,
28,
22,
18,
15,
14,
11,
9,
8,
7,
5,
3,
2,
1,
1,
1
];
this.m = 0;
this.m2 = 0;
this.diff = 0;
this.colorThemes = {
red: {
spikes: color(71, 14, 7),
black: color(56, 55, 46),
body: color(128, 14, 14),
wingArm: color(107, 8, 8),
wingArmSpike: color(76, 77, 76),
wingUpper: color(122, 32, 16),
wingLower: color(148, 46, 33),
wingSpines: color(71, 70, 71, 150),
legsBehind: color(110, 13, 13)
},
green: {
spikes: color(18, 46, 4),
black: color(120, 110, 20),
body: color(33, 82, 16),
wingArm: color(39, 77, 10),
wingArmSpike: color(76, 77, 76),
wingUpper: color(44, 82, 15),
wingLower: color(49, 110, 25),
wingSpines: color(71, 70, 71, 150),
legsBehind: color(30, 77, 14)
},
black: {
spikes: color(55, 56, 55),
black: color(99, 96, 67),
body: color(31, 29, 31),
wingArm: color(60, 71, 51),
wingArmSpike: color(76, 77, 76),
wingUpper: color(22, 23, 21),
wingLower: color(38, 46, 35),
wingSpines: color(64, 64, 64, 150),
legsBehind: color(3, 3, 3)
}
};
this.colors = this.colorThemes.red;
this.setup = function() {
for(var i = 0; i <= 27; i++) {
this.segments.push({
x: this.x + this.w * i / 27,
y: this.y
});
}
};
this.setup();
this.update = function() {
this.diff = this.segments[0].y - this.segments[1].y;
this.timer+=0.018;
this.m = sin(this.timer * this.speed) * this.lift;
this.m2 = cos(this.timer * this.speed) * this.lift;
//update each of the segments
for(var i = 0; i < this.segments.length; i++) {
var segment = this.segments[i];
if(i === 0) {
segment.y += this.m;
segment.x = this.x;
}
else {
segment.y = lerp(segment.y, this.segments[i-1].y, 0.20);
segment.x = lerp(segment.x, this.segments[i-1].x, 0.20);
}
}
//move the wing
this.wing.x1 = this.segments[7].x;
this.wing.y1 = this.segments[7].y + 10;
this.wing.x2 = this.segments[7].x + 20;
this.wing.y2 = this.segments[7].y + 10 + this.m * 15;
this.wing.x3 = this.segments[7].x - 20;
this.wing.y3 = this.segments[7].y + 10 + this.m * 30;
this.wing.x4 = this.segments[7].x - 27;
this.wing.y4 = this.segments[7].y + 10 + this.m * 35;
//1st (top) spine
this.wing.spines.a.x1 = this.wing.x1;
this.wing.spines.a.y1 = this.segments[7].y + 40 + this.m * 47 - this.m2 * 6;
this.wing.spines.a.x2 = this.segments[7].x + 90;
this.wing.spines.a.y2 = this.segments[7].y + 40 + this.m * 55 - this.m2 * 6;
//2nd spine
this.wing.spines.b.x1 = this.wing.x1 + 20;
this.wing.spines.b.y1 = this.segments[7].y + 40 + this.m * 42;
this.wing.spines.b.x2 = this.segments[7].x + 95;
this.wing.spines.b.y2 = this.segments[7].y + 40 + this.m * 45;
//3rd spine
this.wing.spines.c.x1 = this.wing.x1 + 25;
this.wing.spines.c.y1 = this.segments[7].y + 40 + this.m * 35;
this.wing.spines.c.x2 = this.segments[7].x + 100;
this.wing.spines.c.y2 = this.segments[7].y + 40 + this.m * 32;
//4th spine
this.wing.spines.d.x1 = this.wing.x1 + 35;
this.wing.spines.d.y1 = this.segments[7].y + 40 + this.m * 17;
this.wing.spines.d.x2 = this.segments[7].x + 80;
this.wing.spines.d.y2 = this.segments[7].y + 30 + this.m * 15;
this.x-= this.speed;
};
this.drawFrontLeg = function(back) {
var segment = this.segments[8];
var node = this.nodes[8];
pushMatrix();
translate(this.segments[8].x, this.segments[8].y);
translate(-225, -340);
if(back) {
translate(-10, 0);
fill(this.colors.legsBehind);
}
else {
fill(this.colors.body);
}
translate(224 + 11, 355);
rotate(radians(this.diff));
translate(-224 - 11, -355);
noStroke();
beginShape();
vertex(224, 355);
bezierVertex(226, 355, 230, 357, 233, 363);
bezierVertex(238, 368, 239, 374, 235, 380);
bezierVertex(229, 388, 222, 393, 220, 398);
bezierVertex(221, 402, 223, 404, 228, 408);
bezierVertex(223, 409, 218, 410, 213, 404);
bezierVertex(212, 398, 216, 389, 221, 376);
bezierVertex(209, 364, 204, 355 + this.diff * 0.5, 202, 355 + this.diff * 0.5);
endShape(CLOSE);
popMatrix();
};
this.drawBackLeg = function(back) {
var segment = this.segments[11];
var node = this.nodes[11];
pushMatrix();
translate(this.segments[11].x, this.segments[11].y);
translate(-278, -342);
if(back) {
translate(-10, 0);
fill(this.colors.legsBehind);
}
else {
fill(this.colors.body);
}
translate(286 + 17, 354);
rotate(radians(this.diff));
translate(-286 -17, -354);
noStroke();
beginShape();
vertex(286, 352);
bezierVertex(289, 356, 291, 365, 290, 376);
bezierVertex(296, 380, 300, 382, 307, 386);
bezierVertex(308, 394, 308, 409, 308, 416);
bezierVertex(309, 418, 312, 419, 316, 416);
bezierVertex(315, 421, 310, 425, 302, 423);
bezierVertex(300, 412, 300, 404, 299, 400);
bezierVertex(294, 395, 286, 394, 276, 391);
bezierVertex(268, 383, 261, 371, 252, 357);
endShape(CLOSE);
popMatrix();
};
this.drawRightWing = function() {
//wing covering
noStroke();
if(this.wing.y2 < this.wing.y1) {
fill(this.colors.wingUpper);
}
else {
fill(this.colors.wingLower);
}
noStroke();
beginShape();
vertex(this.wing.x1, this.wing.y1);
bezierVertex(
this.wing.x2 - 10, this.wing.y2,
this.wing.x2 - 10, this.wing.y2,
this.wing.x3, this.wing.y3);
bezierVertex(
this.wing.x3 - 5, this.wing.y3 - this.m2 * 3,
this.wing.spines.a.x1 - 5, this.wing.spines.a.y1 + this.diff * 0.5 - this.m2 * 3,
this.wing.spines.a.x1, this.wing.spines.a.y1 - this.m2 * 3);
bezierVertex(
this.wing.spines.a.x1 + 10, this.wing.spines.a.y1 - this.diff * 0.5,
this.wing.spines.a.x2 - 10, this.wing.spines.a.y2 + this.diff * 0.5,
this.wing.spines.a.x2, this.wing.spines.a.y2);
vertex(this.wing.spines.a.x2, this.wing.spines.a.y2);
bezierVertex(
this.wing.spines.a.x2 - 10, this.wing.spines.a.y2,
this.wing.spines.b.x2 - 15, this.wing.spines.b.y2 - this.diff * 0.5,
this.wing.spines.b.x2, this.wing.spines.b.y2);
bezierVertex(
this.wing.spines.b.x2 - 10, this.wing.spines.b.y2,
this.wing.spines.c.x2 - 15, this.wing.spines.c.y2,
this.wing.spines.c.x2, this.wing.spines.c.y2);
bezierVertex(
this.wing.spines.c.x2 - 10, this.wing.spines.c.y2,
this.wing.spines.d.x2 - 15, this.wing.spines.d.y2,
this.wing.spines.d.x2, this.wing.spines.d.y2);
bezierVertex(
this.wing.spines.d.x2 - 10, this.wing.spines.d.y2,
this.wing.x1 + 40 - 15, this.segments[9].y + this.nodes[9] * 0.2,
this.wing.x1 + 40, this.segments[9].y + this.nodes[9] * 0.2);
endShape(CLOSE);
//wing arm
noFill();
stroke(this.colors.wingArm);
strokeWeight(5);
line(this.wing.x1, this.wing.y1, this.wing.x2, this.wing.y2);
line(this.wing.x2, this.wing.y2, this.wing.x3, this.wing.y3);
//top of wing arm with small spike
strokeWeight(4);
bezier(
this.wing.x3, this.wing.y3,
this.wing.x3 - 3, this.wing.y3 + ((this.wing.y4 - this.wing.y3) * 0.3),
this.wing.x4 - 2, this.wing.y4 - ((this.wing.y4 - this.wing.y3) * 0.5),
this.wing.x4, this.wing.y4);
//spike on main arm
noStroke();
fill(this.colors.wingArmSpike);
triangle(
this.wing.x4 - 2, this.wing.y4,
this.wing.x4 + 2, this.wing.y4,
this.wing.x4, this.wing.y4 + (this.wing.y4 - this.wing.y3));
noFill();
stroke(this.colors.wingSpines);
strokeWeight(1);
//1st (top) spine
bezier(
this.wing.x3, this.wing.y3,
this.wing.x3 - 5, this.wing.y3,
this.wing.spines.a.x1 - 5, this.wing.spines.a.y1 + this.diff * 0.5 - this.m2 * 3,
this.wing.spines.a.x1, this.wing.spines.a.y1 - this.m2 * 3);
bezier(
this.wing.spines.a.x1, this.wing.spines.a.y1 - this.m2 * 3,
this.wing.spines.a.x1 + 10, this.wing.spines.a.y1 - this.diff,
this.wing.spines.a.x2 - 10, this.wing.spines.a.y2 + this.diff * 0.5,
this.wing.spines.a.x2, this.wing.spines.a.y2);
//2nd spine
line( this.wing.x3, this.wing.y3,
this.wing.spines.b.x1, this.wing.spines.b.y1);
line( this.wing.spines.b.x1, this.wing.spines.b.y1,
this.wing.spines.b.x2, this.wing.spines.b.y2);
//3rd spine
line( this.wing.x3, this.wing.y3,
this.wing.spines.c.x1, this.wing.spines.c.y1);
line( this.wing.spines.c.x1, this.wing.spines.c.y1,
this.wing.spines.c.x2, this.wing.spines.c.y2);
//4th spine
line( this.wing.x2, this.wing.y2,
this.wing.spines.d.x2, this.wing.spines.d.y2);
};
this.drawLeftWing = function() {
//wing covering
noStroke();
if(this.wing.y2 >= this.wing.y1) {
fill(this.colors.wingUpper);
//line where wing joins to the body
stroke(40, 50);
line(this.wing.x1, this.wing.y1, this.wing.x1 + 40, this.segments[9].y + this.nodes[9] * 0.2);
}
else {
fill(this.colors.wingLower);
}
noStroke();
beginShape();
vertex(this.wing.x1, this.wing.y1);
bezierVertex(
this.wing.x2 - 10, this.wing.y2,
this.wing.x2 - 10, this.wing.y2,
this.wing.x3, this.wing.y3);
bezierVertex(
this.wing.x3 - 5, this.wing.y3 - this.m2 * 3,
this.wing.spines.a.x1 - 5, this.wing.spines.a.y1 + this.diff * 0.5 - this.m2 * 3,
this.wing.spines.a.x1, this.wing.spines.a.y1 - this.m2 * 3);
bezierVertex(
this.wing.spines.a.x1 + 10, this.wing.spines.a.y1 - this.diff * 0.5,
this.wing.spines.a.x2 - 10, this.wing.spines.a.y2 + this.diff * 0.5,
this.wing.spines.a.x2, this.wing.spines.a.y2);
vertex(this.wing.spines.a.x2, this.wing.spines.a.y2);
bezierVertex(
this.wing.spines.a.x2 - 10, this.wing.spines.a.y2,
this.wing.spines.b.x2 - 15, this.wing.spines.b.y2 - this.diff * 0.5,
this.wing.spines.b.x2, this.wing.spines.b.y2);
bezierVertex(
this.wing.spines.b.x2 - 10, this.wing.spines.b.y2,
this.wing.spines.c.x2 - 15, this.wing.spines.c.y2,
this.wing.spines.c.x2, this.wing.spines.c.y2);
bezierVertex(
this.wing.spines.c.x2 - 10, this.wing.spines.c.y2,
this.wing.spines.d.x2 - 15, this.wing.spines.d.y2,
this.wing.spines.d.x2, this.wing.spines.d.y2);
bezierVertex(
this.wing.spines.d.x2 - 10, this.wing.spines.d.y2,
this.wing.x1 + 40 - 15, this.segments[9].y + this.nodes[9] * 0.2,
this.wing.x1 + 40, this.segments[9].y + this.nodes[9] * 0.2);
endShape(CLOSE);
//wing arm
noFill();
stroke(this.colors.wingArm);
strokeWeight(5);
line(this.wing.x1, this.wing.y1, this.wing.x2, this.wing.y2);
line(this.wing.x2, this.wing.y2, this.wing.x3, this.wing.y3);
//top of wing arm with small spike
strokeWeight(4);
bezier(
this.wing.x3, this.wing.y3,
this.wing.x3 - 3, this.wing.y3 + ((this.wing.y4 - this.wing.y3) * 0.3),
this.wing.x4 - 2, this.wing.y4 - ((this.wing.y4 - this.wing.y3) * 0.5),
this.wing.x4, this.wing.y4);
//spike on main arm
noStroke();
fill(this.colors.wingArmSpike);
triangle(
this.wing.x4 - 2, this.wing.y4,
this.wing.x4 + 2, this.wing.y4,
this.wing.x4, this.wing.y4 + (this.wing.y4 - this.wing.y3));
noFill();
stroke(this.colors.wingSpines);
strokeWeight(1);
//1st (top) spine
bezier(
this.wing.x3, this.wing.y3,
this.wing.x3 - 5, this.wing.y3,
this.wing.spines.a.x1 - 5, this.wing.spines.a.y1 + this.diff * 0.5 - this.m2 * 3,
this.wing.spines.a.x1, this.wing.spines.a.y1 - this.m2 * 3);
bezier(
this.wing.spines.a.x1, this.wing.spines.a.y1 - this.m2 * 3,
this.wing.spines.a.x1 + 10, this.wing.spines.a.y1 - this.diff,
this.wing.spines.a.x2 - 10, this.wing.spines.a.y2 + this.diff * 0.5,
this.wing.spines.a.x2, this.wing.spines.a.y2);
//2nd spine
line( this.wing.x3, this.wing.y3,
this.wing.spines.b.x1, this.wing.spines.b.y1);
line( this.wing.spines.b.x1, this.wing.spines.b.y1,
this.wing.spines.b.x2, this.wing.spines.b.y2);
//3rd spine
line( this.wing.x3, this.wing.y3,
this.wing.spines.c.x1, this.wing.spines.c.y1);
line( this.wing.spines.c.x1, this.wing.spines.c.y1,
this.wing.spines.c.x2, this.wing.spines.c.y2);
//4th spine
line( this.wing.x2, this.wing.y2,
this.wing.spines.d.x2, this.wing.spines.d.y2);
};
this.drawHead = function() {
pushMatrix();
translate(this.segments[0].x, this.segments[0].y);
rotate(radians(-this.m * 8));
translate(-65, -125);
scale(0.6);
noStroke();
fill(this.colors.body);
beginShape();
vertex(135, 200);
bezierVertex(141, 197, 149, 194, 156, 190);
bezierVertex(153, 196, 153, 204, 156, 208);
bezierVertex(150, 214, 148, 218, 150, 226);
bezierVertex(144, 227, 141, 235, 144, 243);
bezierVertex(142, 244, 136, 246, 135, 252);
vertex(130, 245);
endShape(CLOSE);
fill(this.colors.body);
beginShape();
vertex(72, 235);
vertex(73, 232);
bezierVertex(76, 228, 80, 224, 84, 222);
bezierVertex(90, 220, 94, 218, 98, 215);
bezierVertex(105, 209, 114, 203, 122, 200);
bezierVertex(130, 199, 136, 200, 138, 203);
bezierVertex(138, 206, 140, 209, 140, 211);
bezierVertex(137, 214, 136, 216, 138, 219);
bezierVertex(137, 221, 137, 223, 138, 225);
bezierVertex(136, 226, 134, 228, 136, 232);
bezierVertex(137, 234, 136, 236, 134, 237);
vertex(136, 240);
bezierVertex(132, 244, 125, 245, 113, 243);
bezierVertex(106, 240, 98, 241, 88, 243);
bezierVertex(80, 244, 74, 238, 72, 235);
endShape(CLOSE);
//horns
fill(this.colors.black);
beginShape();
vertex(138, 204);
bezierVertex(157, 196, 176, 182, 184, 174);
bezierVertex(172, 194, 155, 205, 138, 211);
endShape(CLOSE);
beginShape();
vertex(137, 221);
bezierVertex(145, 221, 154, 218, 159, 215);
bezierVertex(153, 222, 145, 225, 138, 226);
endShape(CLOSE);
beginShape();
vertex(135, 232);
bezierVertex(138, 234, 142, 234, 149, 236);
vertex(145, 238);
vertex(140, 238);
vertex(134, 237);
endShape(CLOSE);
//mouth
fill(this.colors.black);
bezier(73, 236, 85, 236, 97, 229, 106, 228);
//eye
fill(255, 255, 255);
beginShape();
vertex(104, 217);
vertex(107, 214);
vertex(118, 209);
bezierVertex(116, 214, 111, 217, 104, 217);
endShape(CLOSE);
fill(this.colors..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0