Skip to content

Instantly share code, notes, and snippets.

@tong

tong/Tetroid.hx

Created Mar 22, 2016
Embed
What would you like to do?
import js.Browser.document;
import js.Browser.window;
import js.html.CanvasElement;
import js.html.CanvasRenderingContext2D;
private typedef Point = {
var x : Float;
var y : Float;
}
class Tetroid {
public var canvas(default,null) : CanvasElement;
public var context(default,null) : CanvasRenderingContext2D;
public var size(default,null) : Int;
public var speed = 1.0;
public var circleSize = 16;
public var clockwise = true;
public var rotation : Float;
public var points(default,null) : Array<Point>;
var height : Int;
var offsetX : Int;
var offsetY : Int;
public function new( size : Int, circleSize = 16, strokeStyle = '#000', speed = 1.0, clockwise = true ) {
this.size = size;
this.circleSize = circleSize;
this.speed = speed;
this.clockwise = clockwise;
height = Std.int( size/2 * Math.sqrt(3) );
points = [for(i in 0...6){x:0,y:0}];
rotation = 0.0;
offsetX = 0;
offsetY = circleSize;
//offsetX = Std.int( (size-size) / 2 - circleSize );
//offsetY = Std.int( (size-height) / 2 - circleSize );
canvas = document.createCanvasElement();
canvas.width = size;
canvas.height = size;
context = canvas.getContext2d();
context.strokeStyle = strokeStyle;
}
public function update() {
var rad = rotation * Math.PI / 180;
var rot = rad;
// 0 tl-1
points[0].x = Math.cos(rot) * circleSize;
points[0].y = Math.sin(rot) * circleSize;
// 1 tr-1
rot = rad + (Math.PI*2/3);
points[2].x = Math.cos(rot) * circleSize + size - circleSize*2;
points[2].y = Math.sin(rot) * circleSize;
// 2 b-1
rot = rad + (Math.PI*2/3*2);
points[4].x = Math.cos(rot) * circleSize + size/2;
points[4].y = Math.sin(rot) * circleSize + height - circleSize;
// 3 tl-2
//rot = rad;
points[1].x = - points[0].x; //Math.cos(rot) * circleSize;
points[1].y = - points[0].y; //Math.sin(rot) * circleSize;
// 4 tr-2
rot = rad + (Math.PI*2/3);
points[3].x = - Math.cos(rot) * circleSize + size - circleSize*2;
points[3].y = - Math.sin(rot) * circleSize;
// 5 b-2
rot = rad + (Math.PI*2/3*2);
points[5].x = - Math.cos(rot) * circleSize + size/2;
points[5].y = - Math.sin(rot) * circleSize + height - circleSize;
}
public function draw() {
context.clearRect( 0, 0, window.innerWidth, window.innerHeight );
context.save();
context.translate( circleSize, circleSize );
context.beginPath();
context.moveTo( offsetX + points[0].x, offsetY + points[0].y );
context.lineTo( offsetX + points[2].x, offsetY + points[2].y );
context.lineTo( offsetX + points[4].x, offsetY + points[4].y );
context.lineTo( offsetX + points[1].x, offsetY + points[1].y );
context.lineTo( offsetX + points[3].x, offsetY + points[3].y );
context.lineTo( offsetX + points[5].x, offsetY + points[5].y );
context.lineTo( offsetX + points[0].x, offsetY + points[0].y );
context.stroke();
context.restore();
if( clockwise ) {
rotation += speed;
if( rotation >= 360 ) rotation = 0;
} else {
rotation -= speed;
if( rotation <= 0 ) rotation = 360;
}
}
static var tetroid : Tetroid;
static function step( time : Float ) {
window.requestAnimationFrame( step );
tetroid.update();
tetroid.draw();
}
static function main() {
window.onload = function(_) {
tetroid = new Tetroid( 300, 14, '#e0e0e0' );
//tetroid.canvas.style.background = '#000';
document.body.appendChild( tetroid.canvas );
window.requestAnimationFrame( step );
document.body.onclick = function(_){ tetroid.clockwise = !tetroid.clockwise; }
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment