Skip to content

Instantly share code, notes, and snippets.

Created August 4, 2016 02:00
Show Gist options
  • Save anonymous/486f514a237dc2994cccfc8c2d48ebc8 to your computer and use it in GitHub Desktop.
Save anonymous/486f514a237dc2994cccfc8c2d48ebc8 to your computer and use it in GitHub Desktop.
JS Bin Coding Challenge #30: Phyllotaxis // source http://jsbin.com/hezidi
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Coding Challenge #30: Phyllotaxis">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
canvas {
border: black 1px solid;
}
</style>
</head>
<body>
<canvas></canvas>
<script id="jsbin-javascript">
"use strict";
var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var sqrt = Math.sqrt;
var cos = Math.cos;
var sin = Math.sin;
var c = 5;
var n = 0;
function draw() {
var a = n * 137.5;
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, 4, 4, 0, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
n++;
if (n > 500) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
n = 0;
}
requestAnimationFrame(draw);
}
draw();
</script>
<script id="jsbin-source-css" type="text/css">canvas {
border: black 1px solid;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const canvas = document.getElementsByTagName("canvas")[0];
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext("2d");
const { sqrt, cos, sin } = Math;
const c = 5;
let n = 0;
function draw(){
const a = n * 137.5;
const r = c * sqrt(n);
const x = r * cos(a) + canvas.width / 2;
const y = r * sin(a) + canvas.height / 2;
ctx.beginPath();
ctx.ellipse(x, y, 4, 4, 0, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
n++;
if(n > 500){
ctx.clearRect(0, 0, canvas.width, canvas.height)
n = 0;
}
requestAnimationFrame(draw);
}
draw()
</script></body>
</html>
canvas {
border: black 1px solid;
}
"use strict";
var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var sqrt = Math.sqrt;
var cos = Math.cos;
var sin = Math.sin;
var c = 5;
var n = 0;
function draw() {
var a = n * 137.5;
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, 4, 4, 0, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
n++;
if (n > 500) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
n = 0;
}
requestAnimationFrame(draw);
}
draw();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment