JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
const Bounds = {
height: window.innerHeight,
width: window.innerWidth
};
const colors = ['#15AB88', '#6AD97D', '#AEFF79', '#D0FF78', '#F1FF79'];
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = Bounds.width;
canvas.height = Bounds.height;
document.body.appendChild(canvas);
class Circle {
constructor(center, radius, color, alpha) {
this.center = center;
this.radius = 0;
this.maxRadius = radius;
this.color = color;
this.triangles = this.generateTriangles();
this.alpha = alpha;
}
generateTriangles() {
let triangles = [];
for(let i = 0; i <= Math.PI*2; i += Math.PI/5) {
triangles.push(new Triangle({
x: this.center.x + this.radius * Math.cos(i),
y: this.center.y + this.radius * Math.sin(i),
},
i,
25,
this.color
));
}
return triangles;
}
update() {
if(this.radius / this.maxRadius > 0.985) {
this.radius = 0;
this.alpha = Math.PI * Math.random();
}
this.radius += (this.maxRadius - this.radius) * 0.02;
}
render() {
this.triangles.forEach((triangle, index) => {
triangle.position = {
x: this.center.x + this.radius * Math.cos(triangle.alpha + this.alpha),
y: this.center.y + this.radius * Math.sin(triangle.alpha + this.alpha),
};
triangle.size = triangle.maxSize * Math.sin(Math.PI*(this.radius/this.maxRadius))
let t1, t2;
if(index === 0) {
t1 = this.triangles[this.triangles.length-1].position;
} else {
t1 = this.triangles[index-1].position;
}
t2 = triangle.position;
const gradient = context.createLinearGradient(t1.x, t1.y, t2.x, t2.y);
gradient.addColorStop(0, 'rgba(235, 235, 250, 0.5)');
gradient.addColorStop(0.5, 'rgba(235, 235, 250, 0)');
gradient.addColorStop(1, 'rgba(235, 235, 250, 0.5)');
context.beginPath();
context.strokeStyle = gradient;
context.moveTo(t1.x, t1.y);
context.lineTo(t2.x, t2.y);
context.stroke();
context.closePath();
triangle.render();
});
}
}
class Triangle {
constructor(position, alpha, size, color) {
this.position = position;
this.size = 0;
this.maxSize = size/3 + 2*size/3*Math.random();
this.color = color;
this.alpha = alpha;
this.angle = 0;
}
render() {
this.angle += Math.PI/24;
context.save();
context.translate(this.position.x, this.position.y);
context.rotate(this.angle + this.alpha);
context.fillStyle = this.color;
context.beginPath();
context.moveTo(0, -this.size/2);
context.lineTo(-this.size/2 ,this.size/2);
context.lineTo(this.size/2 ,this.size/2);
context.closePath();
context.fill();
context.restore();
}
}
let circles = [];
for(let i = 0; i <= 12; i++) {
circles.push(new Circle({x: Bounds.width/2, y: Bounds.height/2}, 160+(160*Math.random())-80, colors[(i+1)%colors.length], Math.PI * Math.random()));
}
function loop() {
context.clearRect(0, 0, Bounds.width, Bounds.height);
circles.forEach((circle, index) => {
circle.render();
setTimeout(() => circle.update(), 0);
});
requestAnimationFrame(loop);
}
loop();
window.onresize = () => {
Bounds.width = window.innerWidth;
Bounds.height = window.innerHeight;
canvas.width = Bounds.width;
canvas.height = Bounds.height;
circles = [];
for(let i = 0; i <= 12; i++) {
circles.push(new Circle({x: Bounds.width/2, y: Bounds.height/2}, 160+(160*Math.random())-80, colors[(i+1)%colors.length], Math.PI * Math.random()));
}
}