结构:
css:
html,
body {
overflow: hidden;padding:0;margin:0;
}
body {
position: relative;
background: #000;
color: #fff;
font-size: 2rem;
line-height: 1.5;
}
a {
text-decoration: none;
color: #fff;
}
#mes1, #mes2 {
padding: 1.6rem;
position: absolute;
opacity: 0;
}
.siri {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
80% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
#list {
padding: 1.6rem;
max-height: 60%;
opacity: 0;
display: none;
position: absolute;
overflow: scroll;
}
.slideUp {
opacity: 1;
-webkit-animation-name: slideUp;
animation-name: slideUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes slideUp {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
ul {
margin: 1.6rem 0;
}
ul li {
list-style-type: disc;
list-style-position: inside;
}
ul li a {
font-size: 1.2rem;
}
script.js
class Tool {
// random number.
static randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// random color rgb.
static randomColorRGB() {
return (
"rgb(" +
this.randomNumber(0, 255) +
", " +
this.randomNumber(0, 255) +
", " +
this.randomNumber(0, 255) +
")"
);
}
// random color hsl.
static randomColorHSL(hue, saturation, lightness) {
return "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";
}
// gradient color.
static gradientColor(ctx, cr, cg, cb, ca, x, y, r) {
const col = cr + "," + cg + "," + cb;
const g = ctx.createRadialGradient(x, y, 0, x, y, r);
g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")");
g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")");
g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")");
return g;
}
}
/*
When want to use angle.
*/
class Angle {
constructor(angle) {
this.a = angle;
this.rad = (this.a * Math.PI) / 180;
}
incDec(num) {
this.a += num;
this.rad = (this.a * Math.PI) / 180;
return this.rad;
}
}
/*
When want to use controller.
*/
class Controller {
constructor(id) {
this.id = document.getElementById(id);
}
getVal() {
return this.id.value;
}
}
/*
When want to use time.
*/
class Time {
constructor(time) {
this.startTime = time;
this.lastTime;
this.elapsedTime;
}
getElapsedTime() {
this.lastTime = Date.now();
this.elapsedTime = (this.startTime - this.lastTime) * -1;
return this.elapsedTime;
}
}
/*
When want to use time.
*/
let canvas;
const simplex = new SimplexNoise();
class Canvas {
constructor(bool) {
// create canvas.
this.canvas = document.createElement("canvas");
// if on screen.
if (bool === true) {
this.canvas.style.display = "block";
this.canvas.style.top = 0;
this.canvas.style.left = 0;
document.getElementsByTagName("body")[0].appendChild(this.canvas);
}
this.ctx = this.canvas.getContext("2d");
this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
// mouse infomation.
this.mouseX = null;
this.mouseY = null;
// shape
this.shapeNum = 3;
this.shapes = [];
// time
this.behavior = 0;
this.time = new Time(Date.now());
// glitch
this.glitch;
this.glitchSwitch = false;
// dom
this.mes1 = document.getElementById("mes1");
this.mes2 = document.getElementById("mes2");
this.list = document.getElementById("list");
this.ul = this.list.lastElementChild;
this.asks = [
"I'm sorry, Siri.",
"I love Apple and Siri!",
"It's a expensive",
"Are you Alexa?",
"Do you hate Fortninte?",
"OK Google!",
"Do you like windows?",
"I don't like safari.",
];
for (let i = 0; i < 100; i++) {
let li = document.createElement("li");
let a = document.createElement("a");
a.setAttribute("href", "#");
a.textContent = this.asks[Tool.randomNumber(0, this.asks.length - 1)];
li.appendChild(a);
this.ul.appendChild(li);
}
this.a = document.getElementsByTagName("a");
for (let i = 0; i < this.a.length; i++) {
this.a[i].addEventListener("click", function (e) {
e.preventDefault();
canvas.glitchSwitch = true;
for (let i = 0; i < canvas.shapes.length; i++) {
canvas.shapes[i].cr = 150;
}
if (
this.textContent === "I love Apple and Siri!" ||
this.textContent === "I'm sorry, Siri."
) {
canvas.glitchSwitch = false;
for (let i = 0; i < canvas.shapes.length; i++) {
canvas.shapes[i].cr = 150;
for (let i = 0; i < canvas.shapes.length; i++) {
canvas.shapes[i].c = {
r: Tool.randomNumber(0, 255),
g: Tool.randomNumber(0, 255),
b: Tool.randomNumber(0, 255),
a: 1,
};
}
}
}
if (canvas.glitchSwitch === true) {
for (let i = 0; i < canvas.shapes.length; i++) {
canvas.shapes[i].c = {
r: 255,
g: 0,
b: 0,
a: 1,
};
}
}
});
}
}
// init, render, resize
init() {
this.behavior = 0;
this.time = new Time(Date.now());
this.glitchSwitch = false;
this.shapes = [];
for (let i = 0; i < this.shapeNum; i++) {
const s = new Shape(this.ctx, 0, this.height - this.height / 5, i + 1);
this.shapes.push(s);
}
this.glitch = new Glitch(this.ctx);
}
render() {
this.ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < this.shapes.length; i++) {
this.shapes[i].render(i);
}
this.changeBehavior();
if (this.glitchSwitch === true) {
this.glitch.render();
}
}
changeBehavior() {
const e = this.time.getElapsedTime();
if (e > 4000) {
this.mes2.setAttribute("class", "siri");
this.behavior = 1;
}
if (e > 8000) {
this.behavior = 2;
}
if (e > 8200) this.behavior = 3;
if (e > 8400) {
this.behavior = 4;
}
if (e > 9000) {
this.list.style.opacity = 1;
this.list.style.display = "block";
this.list.setAttribute("class", "slideUp");
}
}
resize() {
this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
this.init();
}
}
/*
Shape class.
*/
class Shape {
constructor(ctx, x, y, i) {
this.ctx = ctx;
this.init(x, y, i);
}
init(x, y, i) {
this.x = x;
this.y = y;
this.i = i;
this.cr = 50;
this.a = new Angle(Tool.randomNumber(0, 360));
this.a1 = new Angle(Tool.randomNumber(0, 360));
this.step = canvas.width / 360;
this.c = {
r: Tool.randomNumber(0, 255),
g: Tool.randomNumber(0, 255),
b: Tool.randomNumber(0, 255),
a: 1,
};
this.noiseDist = 10;
this.noiseX = 1000;
this.noiseY = 1000;
}
drawLine() {
const ctx = this.ctx;
ctx.save();
ctx.globalCompositeOperation = "lighter";
ctx.lineJoin = "bevel";
ctx.fillStyle = "rgb(" + this.c.r + ", " + this.c.g + ", " + this.c.b + ")";
ctx.beginPath();
ctx.moveTo(this.x, this.y);
for (let x = 0; x <= canvas.width; x += this.step) {
const noise =
simplex.noise3D(x / this.noiseX, this.y / this.noiseY, this.a.rad) *
this.noiseDist;
const y = Math.sin((x * Math.PI) / 180 / 2) * noise + this.y;
if (x > canvas.width) {
ctx.lineTo(x * this.step, canvas.height / 2);
} else {
ctx.lineTo(x * this.step, y);
}
}
for (let x = canvas.width; x > 0; x -= this.step) {
const noise =
simplex.noise3D(x / this.noiseX, this.y / this.noiseY, this.a.rad) *
-this.noiseDist;
const y = Math.sin((x * Math.PI) / 180 / 2) * noise + this.y;
if (x > canvas.width) {
ctx.lineTo(x * this.step, canvas.height / 2);
} else {
ctx.lineTo(x * this.step, y);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
drawCircle() {
const ctx = this.ctx;
// in
ctx.save();
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = Tool.gradientColor(
ctx,
this.c.r,
this.c.g,
this.c.b,
this.c.a,
canvas.width / 2,
this.y,
this.cr
);
ctx.translate(canvas.width / 2, this.y);
ctx.rotate(Math.sin(this.a1.rad));
ctx.scale(Math.cos(this.a1.rad * this.i), Math.sin(this.a1.rad * this.i));
ctx.translate(-canvas.width / 2, -this.y);
ctx.beginPath();
ctx.arc(canvas.width / 2, this.y, this.cr, 0, Math.PI * 2, false);
ctx.fill();
ctx.restore();
// out
ctx.save();
ctx.lineWidth = 5;
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = Tool.gradientColor(
ctx,
this.c.r,
this.c.g,
this.c.b,
this.c.a,
canvas.width / 2,
this.y,
this.cr
);
ctx.strokeStyle = Tool.gradientColor(
ctx,
this.c.r,
this.c.g,
this.c.b,
this.c.a,
canvas.width / 2,
this.y,
this.cr + 5
);
ctx.beginPath();
ctx.arc(canvas.width / 2, this.y, this.cr, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
// click
if (ctx.isPointInPath(canvas.mouseX, canvas.mouseY)) {
canvas.init();
this.cr = 50;
canvas.mouseX = null;
canvas.mouseY = null;
}
ctx.restore();
}
changeParams() {
if (canvas.behavior === 1) {
this.noiseDist = 30;
this.noiseX = 100;
this.noiseY = 100;
}
if (canvas.behavior === 2) {
this.noiseDist *= 1.05;
this.noiseX *= 1.1;
this.noiseY *= 1.1;
}
if (canvas.behavior === 3) {
this.noiseDist *= 0.9;
this.noiseX *= 0.9;
this.noiseY *= 0.9;
}
}
updateParams() {
this.a.incDec(1);
this.a1.incDec(0.5);
if (this.cr === 51) {
canvas.glitchSwitch = false;
this.c = {
r: Tool.randomNumber(0, 255),
g: Tool.randomNumber(0, 255),
b: Tool.randomNumber(0, 255),
a: 1,
};
}
if (this.cr > 50) this.cr -= 1;
}
render() {
canvas.behavior < 4 ? this.drawLine() : this.drawCircle();
this.updateParams();
this.changeParams();
}
}
/*
Glitch class.
*/
class Glitch {
constructor(ctx) {
this.ctx = ctx;
this.splitNum = 5;
this.splitY = canvas.height / this.splitNum;
this.angles = [];
this.anglesForRGB = [];
this.dataArr = [];
this.getAngles();
this.getAnglesForRGB();
}
getAnglesForRGB() {
for (let i = 0; i < 3; i++) {
const a = Tool.randomNumber(0, 360);
const r = (a * Math.PI) / 180;
const arr = [a, r];
this.anglesForRGB.push(arr);
}
}
getAngles() {
for (var i = 0; i < this.splitNum; i++) {
const angle = Tool.randomNumber(0, 360);
const gap = Tool.randomNumber(5, 20);
const arr = [angle, gap];
this.angles.push(arr);
}
}
getImageData() {
for (let i = 0; i < this.splitNum; i++) {
let d = this.ctx.getImageData(
0,
this.splitY * i,
canvas.width,
this.splitY + 1
);
let data = d.data;
for (let i = 3; i < data.length - 4; i += 4) {
if (data[i] < 255) {
data[i] = 50;
data[i - 1] = Math.sin(this.anglesForRGB[0][1]) * 255;
data[i - 2] = Math.cos(this.anglesForRGB[1][1]) * 255;
data[i - 3] = Math.tan(this.anglesForRGB[2][1]) * 255;
}
}
this.dataArr.push(d);
}
}
updateAnglesForRGB() {
for (let i = 0; i < this.anglesForRGB.length; i++) {
this.anglesForRGB[i][1] += Tool.randomNumber(-1, 1) * Math.random();
}
}
addImage() {
for (let i = 0; i < this.splitNum; i++) {
if (Math.random() > 0.5) {
this.ctx.putImageData(
this.dataArr[i],
Math.sin((this.angles[i][0] * Math.PI) / 180) * this.angles[i][1],
this.splitY * i
);
} else {
this.ctx.putImageData(
this.dataArr[Tool.randomNumber(0, this.splitNum - 1)],
Math.sin((this.angles[i][0] * Math.PI) / 180) * canvas.width,
this.splitY * i
);
}
}
}
changeAngle() {
for (var i = 0; i < this.angles.length; i++) {
this.angles[i][0] += Tool.randomNumber(-50, 50);
}
}
render() {
this.dataArr = [];
this.getImageData();
this.changeAngle();
this.updateAnglesForRGB();
this.addImage();
}
}
(function () {
"use strict";
window.addEventListener("load", function () {
canvas = new Canvas(true);
canvas.init();
function render() {
window.requestAnimationFrame(function () {
canvas.render();
render();
});
}
render();
// event
window.addEventListener(
"resize",
function () {
canvas.resize();
},
false
);
canvas.canvas.addEventListener(
"click",
function (e) {
canvas.mouseX = e.clientX;
canvas.mouseY = e.clientY;
},
false
);
});
})();
simplex-noise.min.js
!(function () {
"use strict";
var r = 0.5 * (Math.sqrt(3) - 1),
e = (3 - Math.sqrt(3)) / 6,
t = 1 / 6,
a = (Math.sqrt(5) - 1) / 4,
o = (5 - Math.sqrt(5)) / 20;
function i(r) {
var e;
(e =
"function" == typeof r
? r
: r
? (function () {
var r = 0,
e = 0,
t = 0,
a = 1,
o =
((i = 4022871197),
function (r) {
r = r.toString();
for (var e = 0; e < r.length; e++) {
var t = 0.02519603282416938 * (i += r.charCodeAt(e));
(t -= i = t >>> 0),
(i = (t *= i) >>> 0),
(i += 4294967296 * (t -= i));
}
return 2.3283064365386963e-10 * (i >>> 0);
});
var i;
(r = o(" ")), (e = o(" ")), (t = o(" "));
for (var n = 0; n < arguments.length; n++)
(r -= o(arguments[n])) < 0 && (r += 1),
(e -= o(arguments[n])) < 0 && (e += 1),
(t -= o(arguments[n])) < 0 && (t += 1);
return (
(o = null),
function () {
var o = 2091639 * r + 2.3283064365386963e-10 * a;
return (r = e), (e = t), (t = o - (a = 0 | o));
}
);
})(r)
: Math.random),
(this.p = n(e)),
(this.perm = new Uint8Array(512)),
(this.permMod12 = new Uint8Array(512));
for (var t = 0; t < 512; t++)
(this.perm[t] = this.p[255 & t]), (this.permMod12[t] = this.perm[t] % 12);
}
function n(r) {
var e,
t = new Uint8Array(256);
for (e = 0; e < 256; e++) t[e] = e;
for (e = 0; e < 255; e++) {
var a = e + ~~(r() * (256 - e)),
o = t[e];
(t[e] = t[a]), (t[a] = o);
}
return t;
}
(i.prototype = {
grad3: new Float32Array([
1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1, 0, 1, 0, 1, -1, 0, 1, 1, 0, -1, -1,
0, -1, 0, 1, 1, 0, -1, 1, 0, 1, -1, 0, -1, -1,
]),
grad4: new Float32Array([
0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1,
-1, 0, -1, -1, 1, 0, -1, -1, -1, 1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1,
0, -1, -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1, 1, 1,
0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1,
-1, -1, 0, 1, -1, -1, 0, -1, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1,
-1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0,
]),
noise2D: function (t, a) {
var o,
i,
n = this.permMod12,
f = this.perm,
s = this.grad3,
v = 0,
h = 0,
l = 0,
u = (t + a) * r,
d = Math.floor(t + u),
p = Math.floor(a + u),
M = (d + p) * e,
m = t - (d - M),
c = a - (p - M);
m > c ? ((o = 1), (i = 0)) : ((o = 0), (i = 1));
var y = m - o + e,
w = c - i + e,
g = m - 1 + 2 * e,
A = c - 1 + 2 * e,
x = 255 & d,
q = 255 & p,
D = 0.5 - m * m - c * c;
if (D >= 0) {
var S = 3 * n[x + f[q]];
v = (D *= D) * D * (s[S] * m + s[S + 1] * c);
}
var U = 0.5 - y * y - w * w;
if (U >= 0) {
var b = 3 * n[x + o + f[q + i]];
h = (U *= U) * U * (s[b] * y + s[b + 1] * w);
}
var F = 0.5 - g * g - A * A;
if (F >= 0) {
var N = 3 * n[x + 1 + f[q + 1]];
l = (F *= F) * F * (s[N] * g + s[N + 1] * A);
}
return 70 * (v + h + l);
},
noise3D: function (r, e, a) {
var o,
i,
n,
f,
s,
v,
h,
l,
u,
d,
p = this.permMod12,
M = this.perm,
m = this.grad3,
c = (r + e + a) * (1 / 3),
y = Math.floor(r + c),
w = Math.floor(e + c),
g = Math.floor(a + c),
A = (y + w + g) * t,
x = r - (y - A),
q = e - (w - A),
D = a - (g - A);
x >= q
? q >= D
? ((s = 1), (v = 0), (h = 0), (l = 1), (u = 1), (d = 0))
: x >= D
? ((s = 1), (v = 0), (h = 0), (l = 1), (u = 0), (d = 1))
: ((s = 0), (v = 0), (h = 1), (l = 1), (u = 0), (d = 1))
: q < D
? ((s = 0), (v = 0), (h = 1), (l = 0), (u = 1), (d = 1))
: x < D
? ((s = 0), (v = 1), (h = 0), (l = 0), (u = 1), (d = 1))
: ((s = 0), (v = 1), (h = 0), (l = 1), (u = 1), (d = 0));
var S = x - s + t,
U = q - v + t,
b = D - h + t,
F = x - l + 2 * t,
N = q - u + 2 * t,
C = D - d + 2 * t,
P = x - 1 + 0.5,
T = q - 1 + 0.5,
_ = D - 1 + 0.5,
j = 255 & y,
k = 255 & w,
z = 255 & g,
B = 0.6 - x * x - q * q - D * D;
if (B < 0) o = 0;
else {
var E = 3 * p[j + M[k + M[z]]];
o = (B *= B) * B * (m[E] * x + m[E + 1] * q + m[E + 2] * D);
}
var G = 0.6 - S * S - U * U - b * b;
if (G < 0) i = 0;
else {
var H = 3 * p[j + s + M[k + v + M[z + h]]];
i = (G *= G) * G * (m[H] * S + m[H + 1] * U + m[H + 2] * b);
}
var I = 0.6 - F * F - N * N - C * C;
if (I < 0) n = 0;
else {
var J = 3 * p[j + l + M[k + u + M[z + d]]];
n = (I *= I) * I * (m[J] * F + m[J + 1] * N + m[J + 2] * C);
}
var K = 0.6 - P * P - T * T - _ * _;
if (K < 0) f = 0;
else {
var L = 3 * p[j + 1 + M[k + 1 + M[z + 1]]];
f = (K *= K) * K * (m[L] * P + m[L + 1] * T + m[L + 2] * _);
}
return 32 * (o + i + n + f);
},
noise4D: function (r, e, t, i) {
var n,
f,
s,
v,
h,
l,
u,
d,
p,
M,
m,
c,
y,
w,
g,
A,
x,
q = this.perm,
D = this.grad4,
S = (r + e + t + i) * a,
U = Math.floor(r + S),
b = Math.floor(e + S),
F = Math.floor(t + S),
N = Math.floor(i + S),
C = (U + b + F + N) * o,
P = r - (U - C),
T = e - (b - C),
_ = t - (F - C),
j = i - (N - C),
k = 0,
z = 0,
B = 0,
E = 0;
P > T ? k++ : z++,
P > _ ? k++ : B++,
P > j ? k++ : E++,
T > _ ? z++ : B++,
T > j ? z++ : E++,
_ > j ? B++ : E++;
var G = P - (l = k >= 3 ? 1 : 0) + o,
H = T - (u = z >= 3 ? 1 : 0) + o,
I = _ - (d = B >= 3 ? 1 : 0) + o,
J = j - (p = E >= 3 ? 1 : 0) + o,
K = P - (M = k >= 2 ? 1 : 0) + 2 * o,
L = T - (m = z >= 2 ? 1 : 0) + 2 * o,
O = _ - (c = B >= 2 ? 1 : 0) + 2 * o,
Q = j - (y = E >= 2 ? 1 : 0) + 2 * o,
R = P - (w = k >= 1 ? 1 : 0) + 3 * o,
V = T - (g = z >= 1 ? 1 : 0) + 3 * o,
W = _ - (A = B >= 1 ? 1 : 0) + 3 * o,
X = j - (x = E >= 1 ? 1 : 0) + 3 * o,
Y = P - 1 + 4 * o,
Z = T - 1 + 4 * o,
$ = _ - 1 + 4 * o,
rr = j - 1 + 4 * o,
er = 255 & U,
tr = 255 & b,
ar = 255 & F,
or = 255 & N,
ir = 0.6 - P * P - T * T - _ * _ - j * j;
if (ir < 0) n = 0;
else {
var nr = (q[er + q[tr + q[ar + q[or]]]] % 32) * 4;
n =
(ir *= ir) *
ir *
(D[nr] * P + D[nr + 1] * T + D[nr + 2] * _ + D[nr + 3] * j);
}
var fr = 0.6 - G * G - H * H - I * I - J * J;
if (fr < 0) f = 0;
else {
var sr = (q[er + l + q[tr + u + q[ar + d + q[or + p]]]] % 32) * 4;
f =
(fr *= fr) *
fr *
(D[sr] * G + D[sr + 1] * H + D[sr + 2] * I + D[sr + 3] * J);
}
var vr = 0.6 - K * K - L * L - O * O - Q * Q;
if (vr < 0) s = 0;
else {
var hr = (q[er + M + q[tr + m + q[ar + c + q[or + y]]]] % 32) * 4;
s =
(vr *= vr) *
vr *
(D[hr] * K + D[hr + 1] * L + D[hr + 2] * O + D[hr + 3] * Q);
}
var lr = 0.6 - R * R - V * V - W * W - X * X;
if (lr < 0) v = 0;
else {
var ur = (q[er + w + q[tr + g + q[ar + A + q[or + x]]]] % 32) * 4;
v =
(lr *= lr) *
lr *
(D[ur] * R + D[ur + 1] * V + D[ur + 2] * W + D[ur + 3] * X);
}
var dr = 0.6 - Y * Y - Z * Z - $ * $ - rr * rr;
if (dr < 0) h = 0;
else {
var pr = (q[er + 1 + q[tr + 1 + q[ar + 1 + q[or + 1]]]] % 32) * 4;
h =
(dr *= dr) *
dr *
(D[pr] * Y + D[pr + 1] * Z + D[pr + 2] * $ + D[pr + 3] * rr);
}
return 27 * (n + f + s + v + h);
},
}),
(i._buildPermutationTable = n),
"undefined" != typeof define &&
define.amd &&
define(function () {
return i;
}),
"undefined" != typeof exports
? (exports.SimplexNoise = i)
: "undefined" != typeof window && (window.SimplexNoise = i),
"undefined" != typeof module && (module.exports = i);
})();
indx.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>仿苹果Siri动画特效</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="mes1" class="siri">
<p>What can I help you with?</p>
</div>
<div id="mes2">
<p>Go ahead, I'm listening...</p>
</div>
<div id="list">
<p>Some things you can ask me.</p>
<ul></ul>
</div>
<script src="js/simplex-noise.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>