Created
July 15, 2012 09:16
-
-
Save japboy/3116040 to your computer and use it in GitHub Desktop.
Canvas demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| fs = require('fs') | |
| {print} = require('util') | |
| {spawn} = require('child_process') | |
| build = (callback) -> | |
| coffee = spawn('coffee', ['-c', '-o', './js', './js']) | |
| jade = spawn('jade', ['-P', '-O', './', './']) | |
| stylus = spawn('stylus', ['./css']) | |
| coffee.stderr.on 'data', (data) -> | |
| process.stderr.write(data.toString()) | |
| coffee.stdout.on 'data', (data) -> | |
| print(data.toString) | |
| coffee.on 'exit', (code) -> | |
| callback?() if code is 0 | |
| jade.stderr.on 'data', (data) -> | |
| process.stderr.write(data.toString()) | |
| jade.stdout.on 'data', (data) -> | |
| #print(data.toString) | |
| jade.on 'exit', (code) -> | |
| callback?() if code is 0 | |
| stylus.stderr.on 'data', (data) -> | |
| process.stderr.write(data.toString()) | |
| stylus.stdout.on 'data', (data) -> | |
| #print(data.toString) | |
| stylus.on 'exit', (code) -> | |
| callback?() if code is 0 | |
| task 'build', 'Build CoffeeScript, Jade, & Stylus', -> | |
| build() | |
| task 'watch', 'Watch CoffeeScript & Stylus', -> | |
| # FIXME: These processes will be conflicted | |
| coffee = spawn('coffee', ['-w', '-c', '-o', './js', './js']) | |
| stylus = spawn('stylus', ['-w', './css']) | |
| coffee.stderr.on 'data', (data) -> | |
| process.stderr.write(data.toString()) | |
| coffee.stdout.on 'data', (data) -> | |
| print(data.toString()) | |
| stylus.stderr.on 'data', (data) -> | |
| process.stderr.write(data.toString()) | |
| stylus.stdout.on 'data', (data) -> | |
| #print(data.toString()) | |
| task 'open', 'Open index.html', -> | |
| spawn('open', 'index.html') | |
| invoke('watch') | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #! coffeescript | |
| # Canvas demo | |
| # [Yu Inao](http://twitter.com/japboy) in 2012 | |
| proxy = (fn, self) -> | |
| -> | |
| fn.apply(self, arguments) | |
| Playground = | |
| ctx: {} | |
| width: 0 | |
| height: 0 | |
| init: -> | |
| canvas = document.getElementById('demo') | |
| @ctx = canvas.getContext('2d') | |
| @width = @ctx.canvas.width = window.innerWidth | |
| @height = @ctx.canvas.height = window.innerHeight | |
| window.addEventListener('resize', proxy(@update, @)) | |
| update: -> | |
| @width = @ctx.canvas.width = window.innerWidth | |
| @height = @ctx.canvas.height = window.innerHeight | |
| class Arc | |
| ctx: {} | |
| x: 0 | |
| y: 0 | |
| radius: 0 | |
| constructor: (@ctx, width, height) -> | |
| @x = width / 2 | |
| @y = height / 2 | |
| @radius = if width - height > 0 then height / 2 else width / 2 | |
| update: (width, height) -> | |
| @x = width / 2 | |
| @y = height / 2 | |
| @radius = if width - height > 0 then height / 2 else width / 2 | |
| draw: (winWidth, winHeight) -> | |
| gradient = @ctx.createLinearGradient(winWidth / 2, (winHeight / 2) - @radius, winWidth / 2, (winHeight / 2) + @radius) | |
| gradient.addColorStop(0, 'rgba(84,38,56,0.1)') | |
| gradient.addColorStop(1, 'rgba(232,111,158,1)') | |
| @ctx.fillStyle = gradient | |
| @ctx.beginPath() | |
| @ctx.arc(winWidth / 2, winHeight / 2, @radius, 0, Math.PI * 2, false) | |
| @ctx.fill() | |
| Playground.init() | |
| arc = new Arc(Playground.ctx, Playground.width, Playground.height) | |
| arc.draw(Playground.width, Playground.height) | |
| window.addEventListener 'resize', -> | |
| arc.update(Playground.width, Playground.height) | |
| arc.draw(Playground.width, Playground.height) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #000; | |
| background-image: url("../img/bg-gradient.svg"); | |
| background-repeat: repeat-x; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #filter { | |
| background-image: url("../img/bg-filter.svg"); | |
| background-repeat: repeat; | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1; | |
| } | |
| #debug { | |
| background-color: #542638; | |
| border: 1px solid #8f244d; | |
| bottom: 10px; | |
| color: #4dab8c; | |
| padding: 5px; | |
| position: absolute; | |
| right: 10px; | |
| z-index: 2; | |
| } | |
| #debug ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #debug ul li { | |
| margin: 0; | |
| margin-left: 1em; | |
| padding: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Canvas demo</title> | |
| <meta name="author" content="Yu Inao"> | |
| <meta name="rights-standard" content="pd"> | |
| <link rel="stylesheet" href="http://normalize-css.googlecode.com/svn/trunk/normalize.min.css"> | |
| <link rel="stylesheet" href="./css/demo.css"> | |
| </head> | |
| <body> | |
| <div id="filter"></div> | |
| <section id="playground"> | |
| <canvas id="demo"></canvas> | |
| </section> | |
| <section id="debug"> | |
| <ul> | |
| <li id="log">log here</li> | |
| </ul> | |
| </section> | |
| <script src="./js/Tween.js" charset="UTF-8"></script> | |
| <script src="./js/demo.js" charset="UTF-8"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !!! 5 | |
| html | |
| head | |
| meta(charset='utf-8') | |
| title Canvas demo | |
| meta(name='author', content='Yu Inao') | |
| meta(name='rights-standard', content='pd') | |
| link(rel='stylesheet', href='http://normalize-css.googlecode.com/svn/trunk/normalize.min.css') | |
| link(rel='stylesheet', href='./css/demo.css') | |
| body | |
| div#filter | |
| section#playground | |
| canvas#demo | |
| section#debug | |
| ul | |
| li#log log here | |
| script(src='./js/Tween.js', charset='UTF-8') | |
| script(src='./js/demo.js', charset='UTF-8') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by CoffeeScript 1.3.3 | |
| (function() { | |
| var Arc, Playground, arc, proxy; | |
| proxy = function(fn, self) { | |
| return function() { | |
| return fn.apply(self, arguments); | |
| }; | |
| }; | |
| Playground = { | |
| ctx: {}, | |
| width: 0, | |
| height: 0, | |
| init: function() { | |
| var canvas; | |
| canvas = document.getElementById('demo'); | |
| this.ctx = canvas.getContext('2d'); | |
| this.width = this.ctx.canvas.width = window.innerWidth; | |
| this.height = this.ctx.canvas.height = window.innerHeight; | |
| return window.addEventListener('resize', proxy(this.update, this)); | |
| }, | |
| update: function() { | |
| this.width = this.ctx.canvas.width = window.innerWidth; | |
| return this.height = this.ctx.canvas.height = window.innerHeight; | |
| } | |
| }; | |
| Arc = (function() { | |
| Arc.prototype.ctx = {}; | |
| Arc.prototype.x = 0; | |
| Arc.prototype.y = 0; | |
| Arc.prototype.radius = 0; | |
| function Arc(ctx, width, height) { | |
| this.ctx = ctx; | |
| this.x = width / 2; | |
| this.y = height / 2; | |
| this.radius = width - height > 0 ? height / 2 : width / 2; | |
| } | |
| Arc.prototype.update = function(width, height) { | |
| this.x = width / 2; | |
| this.y = height / 2; | |
| return this.radius = width - height > 0 ? height / 2 : width / 2; | |
| }; | |
| Arc.prototype.draw = function(winWidth, winHeight) { | |
| var gradient; | |
| gradient = this.ctx.createLinearGradient(winWidth / 2, (winHeight / 2) - this.radius, winWidth / 2, (winHeight / 2) + this.radius); | |
| gradient.addColorStop(0, 'rgba(84,38,56,0.1)'); | |
| gradient.addColorStop(1, 'rgba(232,111,158,1)'); | |
| this.ctx.fillStyle = gradient; | |
| this.ctx.beginPath(); | |
| this.ctx.arc(winWidth / 2, winHeight / 2, this.radius, 0, Math.PI * 2, false); | |
| return this.ctx.fill(); | |
| }; | |
| return Arc; | |
| })(); | |
| Playground.init(); | |
| arc = new Arc(Playground.ctx, Playground.width, Playground.height); | |
| arc.draw(Playground.width, Playground.height); | |
| window.addEventListener('resize', function() { | |
| arc.update(Playground.width, Playground.height); | |
| return arc.draw(Playground.width, Playground.height); | |
| }); | |
| }).call(this); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| background-color: rgb(0,0,0) | |
| background-image: url('../img/bg-gradient.svg') | |
| background-repeat: repeat-x | |
| margin: 0 | |
| padding: 0 | |
| #filter | |
| background-image: url('../img/bg-filter.svg') | |
| background-repeat: repeat | |
| height: 100% | |
| left: 0 | |
| position: absolute | |
| top: 0 | |
| width: 100% | |
| z-index: 1 | |
| #debug | |
| background-color: rgb(84,38,56) | |
| border: 1px solid rgb(143,36,77) | |
| bottom: 10px | |
| color: rgb(77,171,140) | |
| padding: 5px | |
| position: absolute | |
| right: 10px | |
| z-index: 2 | |
| #debug ul | |
| margin: 0 | |
| padding: 0 | |
| #debug ul li | |
| margin: 0 | |
| margin-left: 1em | |
| padding: 0 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment