<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="script.js"></script>
</body>
body, html {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
border: 1px solid #fff;
}
xxxxxxxxxx
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const initialSize = 100; //начальный размер центрального треугольника
const rotationSpeed = 0.02; // скорость вращения центрального треугольника
const triangleSpeed = 2; //скорость движения маленьких треугольников
const spawnDistance = 100; //расстояние, на которое маленькие треугольники будут вылетать из центрального
let angle = 0;
class Triangle {
constructor(x, y, size, rotation, depth, angle) {
this.x = x;
this.y = y;
this.size = size;
this.rotation = rotation;
this.depth = depth;
this.angle = angle;
}
draw() {
ctx.beginPath();
ctx.moveTo(
this.x + this.size * Math.cos(this.rotation),
this.y + this.size * Math.sin(this.rotation)
);
ctx.lineTo(
this.x + this.size * Math.cos(this.rotation + 2 * Math.PI / 3),
this.y + this.size * Math.sin(this.rotation + 2 * Math.PI / 3)
);
ctx.lineTo(
this.x + this.size * Math.cos(this.rotation + 4 * Math.PI / 3),
this.y + this.size * Math.sin(this.rotation + 4 * Math.PI / 3)
);
ctx.closePath();
ctx.strokeStyle = '#FFD700';
ctx.stroke();
/* ctx.fillStyle = 'white';
ctx.fill() */
}
update() {
this.x += triangleSpeed * Math.cos(this.angle);
this.y += triangleSpeed * Math.sin(this.angle);
this.rotation += rotationSpeed;
this.draw();
}
}
const triangles = [];
function createNestedTriangles(x, y, size, rotation, depth) {
if (depth === 0) return;
for (let i = 0; i < 3; i++) {
const newX = x + spawnDistance * Math.cos(rotation + i * 2 * Math.PI / 3);
const newY = y + spawnDistance * Math.sin(rotation + i * 2 * Math.PI / 3);
const newAngle = rotation + i * 2 * Math.PI / 3;
const triangle = new Triangle(newX, newY, size / 2, rotation, depth - 1, newAngle);
triangles.push(triangle);
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
angle += rotationSpeed;
createNestedTriangles(centerX, centerY, initialSize, angle, 1);
for (let i = 0; i < triangles.length; i++) {
triangles[i].update();
}
requestAnimationFrame(animate);
}
animate();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.