Javascript Canvas
Audiovisual Light & Magic

Filipe Cruz

Dan Peddle

javascript, processingjs, webgl, html5

canvas element, realtime sound synthesis, emulators

size optimization, html5 on mobiles

demoscene, creative coding, closure compiler, png compressors

and the benefits of using parsley in your cooking.

feel free to interrupt for questions

Experimental music with buzz

inércia Demoparty

The potential of Javascript Canvas

https://github.com/dazld/canvas-fx

First time for everything!

Everyone in this room is better at maths than me :D

Let's make hundreds of cubes and animate them!

Particles are pretty fun

Can use multiple canvas elements in a page

How far can we push this?

Threads (in the form of web workers) to the rescue

Turned an effect into a "polar clock" idea

Thank you for watching, over to Filipe!

Where to start?

Demo or die!

You don't actually need to die...

Code every single day

Even if it's just 15 minutes

Focus on putting something moving on the screen

Your mega engine will come later

OOP and Software Design Patterns?

"Fuck that shit!"

"Just KISS it!"

Keep It Simple, Stupid

1) When in doubt, do a new effect

(the more effects available the better)

(HTML5 cheat sheet is your friend)

2) Get a soundtrack that brings stuff together

(don't settle for crap sounds, even if your code is crap)

3) Don't let the coder pick the colorscheme

(god invented graphic designers for a reason, use them)

(if you dont have a graphics designer: 1 2)

4) Set a realistic deadline and meet it

(Sure you could do the best engine ever, in 5 years)

(Releasing stuff is motivating, use it in your favor)

Filipe's earlier experiments

Baby Demo @ Stream 2011

Failed Android webview HTML5 benchmark test demo

Blind Serpent @ The Flame Party Helsinki 2011

WebGL remix

pgen @ Assembly 2011

ProcessingJS generative art slideshow

shogun neophyte @ LGRU 2011

javascript animation using comic creator tool by kesiev

Spreading Love Liebe Amor @ JS1K Love 2012

Cyboman 5 4k @ Stream 2012

making of article

code some new effects

bytesize music

http://countercomplex.blogspot.com

http://pouet.net/topic.php?which=8357

http://wurstcaptures.untergrund.net/music/

javascript 1k speech synth

http://www.p01.org/releases/JS1K_Speech_Synthesizer/

16k original.js

12k UglifyJS min.js

4k PNGinator final.html

better then UglifyJS:

crush on js

closure compiler

better then PNGinator:

JsExe

Creative Coding and Size Optimization

JS performance

sci-fi web book game

http://enoughrecords.scene.org/uass

making of article

imposed myself a deadline

(demoparty accepting IF entries in 2 months)

started writing storyline

(based on unpublished sci fi novel i had written months before)

re-structured storyline and re-engineered engine

(after chapter 1 was half-way done)

added audio support (tracks taken from my netlabel)

adapted effects to match project

bothered graphician friends for some graphics

polished chapter 1

finished chapter 2

beta tested

polish until deadline

<audio> problems cross-fading

variable resolutions

button drag/tap problems

10k for DemoJS 2012

making of article

code some new effects

soundtrack options:

• bytecode music (like in Cyboman 5)
• sonant-js
• ahx replayer
• js mod player

requestAnimationFrame

off-screen rendering

compositing

problems:

• off-screen rendering conflicted with audio player
• pruning converted svg graphics to take less size
• including ahx file format required base conversion (binhexjs)
• closure exclude files for audio and canvas (and their hashes)

https://github.com/gasman/jsspeccy2

74k original.js

33k closure.js

10k pnginator.js

• Parsley is an excellent breath freshener, eliminating strong mouth odours such as garlic or onion.
• It cleanses and strengthens the kidney and can even help break up kidney stones.
• Helps with bladder or urinary tract infections.
• Parsley aids digestion and promotes a faster elimination of waste materials from the body.
• It acts as an anti-inflammatory, reducing joint pain and stiffness.

• It boosts the immune system and protects against colds and infections.
• It can help to protect the body against heart disease and cardiovascular disease.
• Parsley can help with water retention, bloating, indigestion and flatulence.
• Parsley aids the digestion of proteins and fats.
• It is helpful in pregnancy and fertility.
• The calcium and fluorine that is present in parsley can strengthen bones and teeth.

sci-fi web book game

http://www.tpolm.org/~ps/becoming_1337/

github

Questions?