Skip to content

Instantly share code, notes, and snippets.

@Garciat
Last active January 17, 2016 21:38
Show Gist options
  • Save Garciat/cc5ea4bf19838a41e527 to your computer and use it in GitHub Desktop.
Save Garciat/cc5ea4bf19838a41e527 to your computer and use it in GitHub Desktop.
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
}
</style>
<script>
'use strict';
const TAU = 2 * Math.PI;
function main() {
const UNIT = Math.min(document.body.clientWidth, document.body.clientHeight) / 2;
const canvas = document.createElement('canvas');
canvas.width = 2*UNIT;
canvas.height = 2*UNIT;
document.body.appendChild(canvas);
const minput = document.createElement('input');
minput.type = 'number';
document.body.appendChild(minput);
minput.addEventListener('keyup', () => {
m = parseFloat(minput.value) || 0;
draw();
});
const ctx = canvas.getContext('2d');
ctx.translate(UNIT, UNIT);
ctx.font = '30px Arial';
let m = 2;
let dm = 0.005;
let n = 500;
let c = 0;
let dc = 1;
function draw() {
ctx.clearRect(-UNIT, -UNIT, 2*UNIT, 2*UNIT);
ctx.strokeStyle = 'hsl(' + c + ', 50%, 50%)';
for (let i = 0; i < n; ++i) {
let z = i * m;
let a1 = TAU * (i % n) / n;
let a2 = TAU * (z % n) / n;
let x1 = UNIT * Math.cos(a1);
let y1 = UNIT * Math.sin(a1);
let x2 = UNIT * Math.cos(a2);
let y2 = UNIT * Math.sin(a2);
ctx.beginPath();
ctx.moveTo(-x1, y1);
ctx.lineTo(-x2, y2);
ctx.stroke();
}
ctx.stroke();
ctx.fillText(m.toFixed(4), -UNIT, UNIT);
}
function animate() {
m += dm;
c += dc;
}
let paused = false;
function loop() {
if (!paused) {
animate();
draw();
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
canvas.addEventListener('click', () => {
paused = !paused;
});
canvas.addEventListener('wheel', ev => {
if (!paused) return;
m += dm * Math.sign(ev.deltaY);
draw();
});
canvas.addEventListener('touchstart', ev1 => {
let wasPaused = paused;
ev1.preventDefault();
paused = true;
let moved = false;
let y1 = ev1.touches[0].pageY;
function updater(ev2) {
let y2 = ev2.touches[0].pageY;
let dy = y2 - y1;
if (Math.abs(dy) < 10) return;
m += 20 * dm * Math.sign(dy);
draw();
y1 = y2;
moved = true;
}
function stopper() {
canvas.removeEventListener('touchmove', updater);
canvas.removeEventListener('touchend', stopper);
if (moved) {
paused = wasPaused;
} else {
paused = !wasPaused;
}
}
canvas.addEventListener('touchmove', updater);
canvas.addEventListener('touchend', stopper);
});
}
window.addEventListener('load', main);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment