Язык программирования:
Javascript
Среда программирования:
Visual Studio Code
<html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <div align = "center"> <canvas id="canvas" width = "600px" height = "600px"></canvas> </div> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var growthspeed = 200; //скорость роста var rotationspeed = 1; //скорость вращения var beginSize = 10; //начальный размер var difSize = 40; //разница размеров между соседними var params = function(size, rotation) { this.size = size; this.rotation = rotation; } var Squares = []; // массив с параметрами квадратов function play(){ //анимация now = Date.now(); dt = (now - last)/1000; render(); update(dt); requestAnimationFrame(play); last = now; } function update(dt){ var p = Squares.length; if(p == 0 || Squares[p-1].size >= difSize) Squares.push(new params(beginSize, 0)); //создание нового квадрата for(var i in Squares){//пересчет параметров Squares[i].size += growthspeed*dt; Squares[i].rotation += rotationspeed*dt; if(Squares[i].size >= canvas.width*2) Squares.splice(i, 1); // удаление квадрата } } function render(){//отрисовка всех квадратов ctx.fillStyle = 'black'; ctx.fillRect(0,0,canvas.width, canvas.height); for(var i in Squares){ drawCenterSquare(0, 0, Squares[i].size, Squares[i].rotation); } } function drawCenterSquare(centerX, centerY, size, angle=0){ var v1x = centerX - size/2, v2x = centerX + size/2, v3x = centerX + size/2, v4x = centerX - size/2, v1y = centerY - size/2, v2y = centerY - size/2, v3y = centerY + size/2, v4y = centerY + size/2; var t1x = v1x, t2x = v2x, t1y = v1y, t2y = v3y; v1x = t1x*Math.cos(angle) - t1y*Math.sin(angle); v1y = t1x*Math.sin(angle) + t1y*Math.cos(angle); v2x = t2x*Math.cos(angle) - t1y*Math.sin(angle); v2y = t2x*Math.sin(angle) + t1y*Math.cos(angle); v3x = t2x*Math.cos(angle) - t2y*Math.sin(angle); v3y = t2x*Math.sin(angle) + t2y*Math.cos(angle); v4x = t1x*Math.cos(angle) - t2y*Math.sin(angle); v4y = t1x*Math.sin(angle) + t2y*Math.cos(angle); ctx.lineWidth = '4'; ctx.strokeStyle = 'white'; ctx.beginPath(); ctx.moveTo(canvas.width/2 + v1x, canvas.height/2 - v1y); ctx.lineTo(canvas.width/2 + v2x, canvas.height/2 - v2y); ctx.lineTo(canvas.width/2 + v3x, canvas.height/2 - v3y); ctx.lineTo(canvas.width/2 + v4x, canvas.height/2 - v4y); ctx.closePath(); ctx.stroke(); } var last = Date.now(); play(); </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| Borseitov_hypnotic_square.zip | 1.27 кб |