<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js