Skip to content

Instantly share code, notes, and snippets.

@tong
Last active November 11, 2020 13:49
Show Gist options
  • Save tong/8f19c6b1c08285225ac7980f4a6056a9 to your computer and use it in GitHub Desktop.
Save tong/8f19c6b1c08285225ac7980f4a6056a9 to your computer and use it in GitHub Desktop.
CiCi Spiral
import js.Browser.document;
import js.Browser.window;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;
class App {
static var canvas : CanvasElement;
static var ctx : CanvasRenderingContext2D;
static var numCircles = 2455;
static var circleRadius = 0.5;
static function main() {
canvas = document.createCanvasElement();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild( canvas );
canvas.style.background = '#000000';
ctx = canvas.getContext2d();
render();
window.addEventListener( 'resize', e -> {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
}, false );
window.addEventListener( 'wheel', e -> {
numCircles += e.deltaY;
if( numCircles < 1000 ) numCircles = 1000;
else if( numCircles > 10000 ) numCircles = 10000;
circleRadius += e.deltaX / 50;
if( circleRadius < 0.01 ) circleRadius = 0.01;
else if( circleRadius > 100 ) circleRadius = 100;
render();
}, false );
}
static function render() {
var startRadius = 50;
var endRadius = canvas.width / 2;
var circleRadius = App.circleRadius;
var rad = 0.0;
var rot = 0.0;
var px = 0.0;
var py = 0.0;
var sv = 0.4;
ctx.fillStyle = '#000';
ctx.fillRect( 0, 0, canvas.width, canvas.height );
ctx.fillStyle = '#efefef';
ctx.lineWidth = 1;
for( i in 0...numCircles ) {
rad += sv;
circleRadius += 0.01;
rot += Math.PI * 2 / numCircles * 100;
px = canvas.width / 2 + Math.cos( rot ) * rad;
py = canvas.height/ 2 + Math.sin( rot ) * rad;
ctx.beginPath();
ctx.arc( px, py, circleRadius, 0, Math.PI * 2 );
ctx.fill();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment