<script src="//nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js" type="text/javascript"></script>
$ -> new Renderer
class Renderer
constructor: ->
@width = $(window).width()
@height = $(window).height()
@stats = new Stats()
@stats.setMode(0)
@stats.domElement.style.position = 'absolute';
@stats.domElement.style.left = '0px';
@stats.domElement.style.top = '0px';
document.body.appendChild(@stats.domElement)
@canvas = $("<canvas width='#{@width}' height='#{@height}' style='width: #{@width}px; height: #{@height}px' />").appendTo 'body'
@ctx = @canvas[0].getContext('2d')
# create a canvas 2D point for pixel view world
point = new obelisk.Point(200, 200)
# create view instance to nest everything
# canvas could be either DOM or jQuery element
@pixelView = new obelisk.PixelView(@canvas, point)
# create shadow primitive
colorShadow = new obelisk.SideColor(0x66666677, 0x66666677)
dimensionShadow = new obelisk.BrickDimension(20, 20)
@brick = new obelisk.Brick(dimensionShadow, colorShadow)
#create cube primitive
colorCube = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.PURPLE)
dimensionCube = new obelisk.CubeDimension(20, 20, 20)
@cube = new obelisk.Cube(dimensionCube, colorCube, true)
@nodes = []
for i in [0..50]
@nodes.push {
x : Math.random()
y : Math.random()
t : Math.random() * 0xFFFF
}
setInterval @tick, 1000/60
tick: =>
@stats.begin()
@ctx.clearRect(0,0,@width,@height)
for node in @nodes
t = (node.t + new Date().getTime()) / 1000.0
x = Math.sin(t * node.x) * @width
y = Math.sin(t * node.y) * @height
# Location
pointCube = new obelisk.Point3D(x, y, 0)
pointShadow = new obelisk.Point3D(x, y + 20, 0);
# render shadow
@pixelView.renderObject(@brick, pointShadow)
# render cube primitive into view
@pixelView.renderObject(@cube, pointCube)
@stats.end()
return
View Compiled
This Pen doesn't use any external CSS resources.