Created
July 6, 2021 16:42
-
-
Save faithandbrave/d0a21dc74ad2a04d31d16b30245a4cb5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<META http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<script type="text/javascript" src="https://rawgithub.com/maxkueng/victor/master/build/victor.js"></script> | |
<script> | |
var context; | |
var pos; | |
var theta; | |
function onInitialize() { | |
var canvas = document.getElementById("canvas"); | |
context = canvas.getContext("2d"); | |
clearCanvas(); | |
pos = new Victor(getCenterX(), getCenterY()); | |
theta = 0.0 | |
var frameRate = 1000/30; | |
setTimeout(function updateFrame() { | |
onUpdate(); | |
onDraw(); | |
setTimeout(updateFrame, frameRate); | |
}, frameRate); | |
} | |
function getCenterX() { return canvas.getBoundingClientRect().width / 2; } | |
function getCenterY() { return canvas.getBoundingClientRect().height / 2; } | |
function drawCircle(x, y, radius, color) { | |
context.beginPath(); | |
var startAngle = 0; | |
var endAngle = 2 * Math.PI; | |
context.arc(x, y, radius, startAngle, endAngle, false); | |
context.fillStyle = color; | |
context.fill(); | |
} | |
function clearCanvas() { | |
context.fillStyle="rgb(255,255,255)"; | |
context.fillRect(0, 0, canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height); | |
} | |
function onUpdate() { | |
r = Math.E * theta; | |
pos = new Victor(getCenterX() + r * Math.cos(theta), getCenterY() + r * Math.sin(theta)); | |
theta += 0.1; | |
} | |
function onDraw() { | |
clearCanvas(); | |
drawCircle(pos.x, pos.y, 10, "rgb(0,0,0)"); | |
drawCircle(getCenterX(), getCenterY(), 10, "rgb(255,0,0)"); | |
} | |
</script> | |
</head> | |
<body onload="onInitialize();"> | |
<div style="border:solid 1px #000000;width:800px;" id="candiv"> | |
<canvas id="canvas" width="800px" height="300px"></canvas> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ネイピア数eは螺旋の動きに使えるようなのでやってみた。