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: #0998B8;
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;
}
</style>
</head>
<body >
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.min.js"></script>
<script >
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
var app;
var Dog = function() {
this.colors = {
skin: color(253, 209, 185),
eyesOuter: color(182, 96, 86),
eyesInner: color(255, 255, 255),
eyeBalls: color(0, 0, 0),
nose: color(0, 0, 0),
tounge: color(243, 116, 122),
toungeInner: color(240, 80, 96),
ears: color(136, 83, 76),
mouthOuter: color(136, 83, 76),
mouthInner: color(0, 0, 0),
teeth: color(255, 255, 255),
spots: color(243, 196, 173),
legsBehind: color(235, 190, 168)
};
this.timerFront = 0;
this.timerBack = 5;
this.sinFront = 0;
this.sinBack = 0;
this.speed = 12;
this.update = function() {
this.timerFront++;
this.timerBack++;
this.sinFront = sin(radians(this.timerFront * this.speed));
this.sinBack = sin(radians(this.timerBack * this.speed));
};
this.drawHead = function() {
noStroke();
pushMatrix();
translate(355, 295);
rotate(radians(-25 + this.sinFront * 15));
translate(-355, -295);
//ear - behind
fill(this.colors.ears);
beginShape();
vertex(366, 247);
bezierVertex(377, 242, 390, 235, 394, 235);
bezierVertex(400, 235, 403, 238, 404, 244);
bezierVertex(405, 254, 404, 261, 398, 265);
endShape(CLOSE);
//head
fill(this.colors.skin);
strokeWeight(1);
stroke(this.colors.spots);
beginShape();
vertex(306, 293);
bezierVertex(311, 269, 324, 250, 351, 245);
bezierVertex(373, 242, 399, 256, 410, 271);
bezierVertex(421, 295, 414, 321, 401, 338);
bezierVertex(380, 357, 352, 359, 326, 350);
bezierVertex(311, 340, 304, 314, 306, 293);
endShape(CLOSE);
noStroke();
//ear - front
fill(this.colors.ears);
beginShape();
vertex(284, 262);
bezierVertex(296, 257, 310, 251, 321, 251);
bezierVertex(331, 250, 333, 251, 331, 257);
bezierVertex(323, 260, 314, 269, 309, 283);
bezierVertex(308, 288, 307, 292, 304, 292);
bezierVertex(294, 285, 286, 279, 282, 274);
bezierVertex(280, 269, 280, 266, 284, 262);
endShape(CLOSE);
//eye - outer right
fill(this.colors.eyesOuter);
beginShape();
vertex(332, 265);
bezierVertex(340, 264, 352, 263, 357, 274);
bezierVertex(360, 286, 360, 295, 352, 307);
bezierVertex(341, 316, 328, 318, 318, 313);
bezierVertex(310, 304, 310, 295, 312, 286);
bezierVertex(316, 276, 322, 270, 332, 265);
endShape(CLOSE);
//eye - inner right
fill(this.colors.eyesInner);
beginShape();
vertex(334, 268);
bezierVertex(340, 266, 348, 269, 351, 274);
bezierVertex(356, 280, 356, 288, 354, 294);
bezierVertex(352, 300, 346, 303, 337, 304);
bezierVertex(328, 304, 322, 301, 318, 294);
bezierVertex(316, 282, 322, 274, 334, 268);
endShape(CLOSE);
//eye - outer left
fill(this.colors.eyesOuter);
beginShape();
vertex(390, 263);
bezierVertex(398, 262, 408, 268, 414, 276);
bezierVertex(417, 286, 415, 294, 410, 303);
bezierVertex(405, 307, 394, 308, 385, 302);
bezierVertex(379, 294, 376, 286, 377, 277);
bezierVertex(379, 271, 382, 266, 390, 263);
endShape(CLOSE);
//eye - inner left
fill(this.colors.eyesInner);
beginShape();
vertex(396, 264);
bezierVertex(402, 264, 409, 268, 414, 274);
bezierVertex(416, 282, 414, 290, 407, 295);
bezierVertex(397, 297, 390, 294, 385, 289);
bezierVertex(382, 284, 380, 278, 382, 273);
bezierVertex(384, 268, 388, 265, 396, 264);
endShape(CLOSE);
fill(this.colors.eyeBalls);
ellipse(342 + this.sinBack * 2, 278 - this.sinBack * 2, 10, 10);
ellipse(400 + this.sinBack * 2, 273 - this.sinBack * 2, 10, 10);
//area around mouth/nose
fill(this.colors.mouthOuter);
beginShape();
vertex(368, 282);
bezierVertex(376, 281, 385, 284, 393, 292);
bezierVertex(401, 302, 409, 314, 410, 326);
bezierVertex(407, 339, 397, 345, 385, 350);
bezierVertex(374, 354, 359, 356, 350, 354);
bezierVertex(340, 350, 334, 342, 333, 328);
bezierVertex(334, 316, 338, 307, 343, 298);
bezierVertex(349, 289, 358, 284, 368, 282);
endShape(CLOSE);
//nose
fill(this.colors.nose);
beginShape();
vertex(368, 279);
bezierVertex(372, 278, 376, 280, 379, 282);
bezierVertex(378, 286, 377, 290, 374, 294);
bezierVertex(364, 294, 364, 292, 359, 289);
bezierVertex(359, 284, 363, 281, 368, 279);
endShape(CLOSE);
//mouth
fill(this.colors.mouthInner);
beginShape();
vertex(374, 300);
bezierVertex(376, 300, 377, 302, 381, 307);
bezierVertex(385, 310, 389, 310, 394, 309);
bezierVertex(398, 310, 400, 315, 400, 322);
bezierVertex(395, 332, 387, 342, 378, 344);
bezierVertex(366, 348, 354, 345, 347, 342);
bezierVertex(341, 337, 338, 330, 338, 324);
bezierVertex(340, 316, 341, 312, 345, 309);
bezierVertex(352, 310, 353, 312, 358, 314);
bezierVertex(364, 315, 366, 313, 368, 310);
bezierVertex(370, 306, 370, 302, 374, 300);
endShape(CLOSE);
//teeth
fill(this.colors.teeth);
triangle(391, 309, 386, 316, 386, 309);
triangle(363, 313, 360, 318, 356, 313);
//creases on forehead
noFill();
stroke(this.colors.spots);
bezier(353, 251, 356, 252, 360, 253, 364, 251);
bezier(349, 255, 356, 258, 364, 258, 372, 255);
bezier(346, 259, 356, 263, 369, 264, 380, 259);
//tounge
noStroke();
fill(this.colors.tounge);
beginShape();
vertex(360, 329);
bezierVertex(366, 329, 373, 331, 379, 338);
bezierVertex(382, 346, 382, 354, 381, 361);
bezierVertex(
379 - this.sinFront * 10, 371,
378 - this.sinFront * 10, 378,
374 - this.sinFront * 10, 383);
bezierVertex(
369 - this.sinFront * 10, 384,
362 - this.sinFront * 10, 380,
358 - this.sinFront * 10, 374);
bezierVertex(
354 - this.sinFront * 10, 367,
351 - this.sinFront * 5, 353,
349 - this.sinFront * 5, 343);
bezierVertex(345, 340, 344, 338, 344, 335);
bezierVertex(347, 332, 352, 330, 360, 329);
endShape(CLOSE);
//tounge - stripe
fill(this.colors.toungeInner);
beginShape();
vertex(364, 329);
bezierVertex(367, 341, 368, 351, 367, 357);
bezierVertex(364, 348, 362, 336, 358, 329);
endShape(CLOSE);
popMatrix();
};
this.drawBody = function() {
noStroke();
pushMatrix();
translate(20, -47);
//shadow
fill(0, 20);
ellipse(220, 505, 250 + this.sinFront * 15, 30);
translate(200, 385);
rotate(radians(this.sinBack * 8));
translate(-200, -385);
translate(0, this.sinBack * 20);
//front leg - behind
pushMatrix();
translate(304, 411);
rotate(radians(this.sinBack * 45));
pushStyle();
noFill();
stroke(this.colors.legsBehind);
strokeWeight(25);
bezier(
0, -5,
-10, 15,
-10, 45,
0, 65);
popStyle();
translate(-304, -411);
popMatrix();
//back leg - behind
pushMatrix();
translate(132, 425);
rotate(radians(20 - this.sinBack * 45));
pushStyle();
noFill();
stroke(this.colors.legsBehind);
strokeWeight(25);
bezier(
0, -5,
10, 5,
10, 35,
0, 55);
popStyle();
translate(-132, -425);
popMatrix();
//tail
pushStyle();
noFill();
stroke(this.colors.skin);
strokeWeight(10);
bezier(
115, 372,
102, 364,
93, 358,
86 + this.sinFront * 5, 347);
strokeWeight(1);
popStyle();
//body
noStroke();
fill(this.colors.skin);
beginShape();
vertex(231, 338);
bezierVertex(250, 339, 280, 339, 303, 345);
bezierVertex(320, 352, 333, 374, 332, 390);
bezierVertex(330, 409, 322, 426, 306, 434);
bezierVertex(288, 440, 266, 440, 248, 436);
bezierVertex(219, 435, 200, 436, 174, 440);
bezierVertex(148, 440, 130, 442, 112, 430);
bezierVertex(99, 416, 94, 393, 100, 372);
bezierVertex(113, 353, 136, 344, 168, 340);
bezierVertex(198, 337, 216, 338, 231, 338);
endShape(CLOSE);
//front leg - close
pushMatrix();
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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