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: #DC284B;
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 Logo = (function() {
Logo = function(args) {
this.scale = args.scale || 1.0;
this.x = args.x || 600 * 0.5 * this.scale;
this.y = args.y || 600 * 0.4 * this.scale;
this.colors = {
back: color(220, 40, 75),
outline: color(5, 5, 5),
from: color(102, 99, 98),
to: color(13, 13, 13),
text: color(35, 40, 60)
};
this.font = args.font || createFont("Trebuchet MS");
this.gray = {
words: "G R A Y W O L F",
index: 0,
timer: 0,
delay: 2
};
this.prod = {
opacity: 0,
y: height * 1.2,
};
this.img = undefined;
this.imgs = [];
this.splits = {
left: undefined,
right: undefined
};
this.timer = 0;
this.states = {
a: {
delay: 30,
duration: 120,
},
b: {
delay: 30
},
c: {
delay: 55
},
d: {
delay: 45,
x: 0
}
};
this.state = "a";
this.done = false;
this.complete = false;
this.hover = false;
this.init();
};
Logo.prototype = {
init: function() {
var gx = createGraphics(600, 600, P2D);
gx.background(0, 0);
gx.fill(255);
//inner
gx.beginShape();
gx.vertex(300, 137);
gx.vertex(377, 150);
gx.vertex(454, 118);
gx.vertex(410, 213);
gx.vertex(429, 202);
gx.vertex(464, 279);
gx.vertex(396, 361);
gx.vertex(381, 316);
gx.vertex(341, 399);
gx.vertex(300, 443);
gx.vertex(259, 399);
gx.vertex(219, 316);
gx.vertex(204, 361);
gx.vertex(136, 279);
gx.vertex(171, 202);
gx.vertex(190, 213);
gx.vertex(146, 118);
gx.vertex(223, 150);
gx.endShape(CLOSE);
var shape = gx.get(115, 90, 370, 355);
gx.noStroke();
for(var i = 90; i <= 445; i++) {
gx.fill(gx.lerpColor(this.colors.to, this.colors.from, i/445));
gx.rect(115, i, 370, 1);
}
gx.stroke(150, 20);
gx.strokeWeight(1);
for(var i = 0; i < 200; i++) {
gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445));
}
gx.filter(BLUR, 2.5);
var grad = gx.get(115, 90, 370, 355);
grad.mask(shape);
gx.background(this.colors.back);
gx.background(0, 0);
gx.noStroke();
gx.fill(this.colors.outline);
//outer
gx.beginShape();
gx.vertex(300, 126);
gx.vertex(376, 138);
gx.vertex(480, 92);
gx.vertex(437, 187);
gx.vertex(482, 283);
gx.vertex(396, 364);
gx.vertex(383, 344);
gx.vertex(354, 404);
gx.vertex(300, 444);
gx.vertex(246, 404);
gx.vertex(217, 344);
gx.vertex(204, 364);
gx.vertex(118, 283);
gx.vertex(163, 187);
gx.vertex(120, 92);
gx.vertex(224, 138);
gx.endShape(CLOSE);
gx.image(grad, 115, 90);
fill(this.colors.outline);
//nose
gx.beginShape();
gx.vertex(300, 372);
gx.vertex(323, 367);
gx.vertex(320, 382);
gx.vertex(300, 400);
gx.vertex(280, 382);
gx.vertex(277, 367);
gx.endShape(CLOSE);
//left eye
gx.beginShape();
gx.vertex(324, 341);
gx.vertex(320, 268);
gx.vertex(428, 231);
gx.vertex(378, 290);
gx.vertex(358, 278);
gx.vertex(372, 280);
gx.vertex(390, 257);
gx.vertex(334, 277);
gx.endShape(CLOSE);
//right eye
gx.beginShape();
gx.vertex(276, 341);
gx.vertex(280, 268);
gx.vertex(172, 231);
gx.vertex(222, 290);
gx.vertex(244, 278);
gx.vertex(228, 280);
gx.vertex(210, 257);
gx.vertex(266, 277);
gx.endShape(CLOSE);
this.img = gx.get(115, 90, 370, 355);
//generate pieces of image
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 10; j++) {
this.imgs.push({
img: gx.get(115 + 37 * i, 90 + 35.5 * j, 37, 35.5),
w: 37,
h: 35.5,
dx: 115 + 37 * i + 18.5,
dy: 90 + 35.5 * j + 17.75,
x: random(-width, width * 2),
y: random(-height, height * 2),
angle: ~~random(3600)
});
}
}
},
draw: function() {
if(!this.complete) {
pushMatrix();
scale(this.scale);
pushStyle();
switch(this.state) {
case "a":
background(this.colors.back);
if(this.timer++ >= this.states.a.delay) {
for(var i = 0; i < this.imgs.length; i++) {
var item = this.imgs[i];
item.x = lerp(item.x, item.dx, 0.1);
item.y = lerp(item.y, item.dy, 0.1);
item.angle = lerp(item.angle, 0, 0.1);
imageMode(CENTER);
pushMatrix();
translate(item.x, item.y - 28);
rotate(radians(item.angle));
image(item.img, 0, 0, item.w, item.h);
popMatrix();
}
if(this.timer >= this.states.a.duration) {
this.state = "b";
this.timer = 0;
}
}
break;
case "b":
background(this.colors.back);
imageMode(CENTER);
image(this.img, this.x / this.scale, this.y / this.scale);
if(this.timer++ >= this.states.b.delay) {
textFont(this.font);
textAlign(CENTER, CENTER);
textSize(40);
fill(this.colors.text);
if(this.gray.index < this.gray.words.length && this.gray.timer++ >= this.gray.delay) {
this.gray.index++;
this.gray.timer = 0;
}
text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale);
this.prod.opacity = constrain(this.prod.opacity + 7, 0, 255);
this.prod.y = ~~lerp(this.prod.y, this.y * 2.1, 0.030);
textSize(30);
fill(this.colors.text, this.prod.opacity);
text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale);
}
if(this.gray.index === this.gray.words.length) {
this.state = "c";
this.timer = 0;
}
break;
case "c":
background(this.colors.back);
imageMode(CENTER);
image(this.img, this.x / this.scale, this.y / this.scale);
textFont(this.font);
textAlign(CENTER, CENTER);
textSize(40);
fill(this.colors.text);
text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale);
if(this.timer++ >= this.states.c.delay) {
this.prod.opacity = constrain(this.prod.opacity - 5, 0, 255);
}
textSize(30);
fill(this.colors.text, this.prod.opacity);
this.prod.y = constrain(~~lerp(this.prod.y, this.y * 2.1, 0.035), 530 * this.scale, Infinity);
text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale);
if(this.prod.opacity === 0) {
//get split image for next state
this.splits.left = get(0, 0, width / 2, height);
this.splits.right = get(width / 2, 0, width / 2, height);
this.state = "d";
this.timer = 0;
}
break;
case "d":
scale(1 / this.scale);
imageMode(CORNER);
if(this.timer++ >= this.states.d.delay) {
this.states.d.x = constrain(this.states.d.x + 7, 0, width / 2);
}
image(this.splits.left, -this.states.d.x, 0);
image(this.splits.right, width / 2 + this.states.d.x, 0);
if(this.states.d.x >= width / 2) {
this.completed = true;
}
if(this.timer === this.states.d.delay) {
this.done = true;
}
break;
}
popStyle();
popMatrix();
}
}
};
return Logo;
})();
var Sushi = (function() {
Sushi = function() {
this.timer = 0;
this.speed = 10;
this.arms = {
right: {
x: 210,
y: 290,
offset: 60,
upper: {
angle: 90,
dist: 30,
length: 70
},
lower: {
angle: 90,
dist: 20,
length: 70
}
},
left: {
x: 390,
y: 290,
offset: 60,
upper: {
angle: 80,
dist: 30,
length: 70
},
lower: {
angle: 100,
dist: 20,
length: 70
}
}
};
this.legs = {
right: {
x: 240,
y: 515,
offset: 55,
upper: {
angle: 20,
dist: -20,
length: 80
},
lower: {
angle: -10,
dist: 10,
length: 70
}
},
left: {
x: 360,
y: 515,
offset: 60,
upper: {
angle: -20,
dist: 20,
length: 80
},
lower: {
angle: 10,
dist: -10,
length: 70
}
}
};
this.chopsticks = {
dir: 1,
y: -250,
left: {
angle: -20
},
right: {
angle: 20
}
};
this.state = 0; //0: slide in, 1: chopsticks, 2: sushi up, 3: slide out
this.xoff = -800;
this.yoff = 0;
this.eyeyoff = 0;
this.liftoff = false;
this.shock = false;
this.symbols = [];
this.logo = new Logo({});
};
Sushi.prototype = {
drawSymbols: function() {
for(var i = this.symbols.length - 1; i >= 0; i--) {
var symbol = this.symbols[i];
pushMatrix();
translate(symbol.x, symbol.y);
rotate(radians(symbol.angle));
if(symbol.type === 0) {
noStroke();
fill(20, symbol.opacity);
ellipse(0, 0, 14, 15);
stroke(20, symbol.opacity);
strokeWeight(2);
line(6, -2, 6, -18);
line(6, -18, 10, -17);
}
el.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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