index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Coding Challenge #30: Phyllotaxis">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css" />
<title>JS Bin</title>
</head>
<body>
<canvas id="can"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
canvas {
border: black 1px solid;
}
script.js
var canvas = document.getElementById("can");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var { sqrt, cos, sin } = Math;
var c = 5;
let n = 0;
function draw(){
var a = n * 137.3;
var r = c * sqrt(n);
var x = r * cos(a) + canvas.width / 2;
var y = r * sin(a) + canvas.height / 2;
ctx.beginPath();
ctx.ellipse(x, y, 2, 2, 0, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
n++;
if(n > 1000){
ctx.clearRect(0, 0, canvas.width, canvas.height)
n = 0;
}
requestAnimationFrame(draw);
}
draw();
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Coding Challenge #30: Phyllotaxis">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css" />
<title>JS Bin</title>
</head>
<body>
<canvas id="can"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
canvas {
border: black 1px solid;
}
script.js
var canvas = document.getElementById("can");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var { sqrt, cos, sin } = Math;
var c = 5;
let n = 0;
function draw(){
var a = n * 137.3;
var r = c * sqrt(n);
var x = r * cos(a) + canvas.width / 2;
var y = r * sin(a) + canvas.height / 2;
ctx.beginPath();
ctx.ellipse(x, y, 2, 2, 0, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
n++;
if(n > 1000){
ctx.clearRect(0, 0, canvas.width, canvas.height)
n = 0;
}
requestAnimationFrame(draw);
}
draw();
Комментариев нет:
Отправить комментарий