"hello world"
article in Tech programming

WebGL canvas and pretty things.

WebGL - OpenGL in yo *modern* browser canvas.

WebGL - Wikipedia
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.

WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.
WebGL Specification
Chrome Experiments - WebGL Experiments
does your browser support WebGL?


html2canvas - Screenshots with JavaScript - take screenshots of your user's DOM in Javascript!
skorulis/stork - PNG images from dynamic drawing on a HTML canvas
hongru/canvas2image


paper.js

Paper.js - Paper.js - Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph/DOM

Processing || p5.js

lmccart/p5.js A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
p5js.org/workshop - p5.js examples.
Getting started tutorial for p5.js
p5.js CodePen account for examples
antiboredom/p5-ide an IDE for p5.js, grunt.
antiboredom/waves
processing GUI, controlP5 - A GUI (graphical user interface) library for processing. Sliders, Buttons, Toggles, Knobs, Textfields, RadioButtons, Checkboxes


d3.js

D3.js - Data-Driven Documents
Tutorials · mbostock/d3 Wiki
C2: Clojure(Script) data visualization - inspired by d3.js
Raw
Multi-Attribute Rankings - Harvard's tabular data dynamic ranking; not just sortable columns. combine columns visually.


three.js

three.js - JavaScript 3D library
Making MathBox — Acko.net - Presentation-Quality Math with Three.js and WebGL


Scene.js

SceneJS xeoLabs


Game Engines · bebraw/jswiki Wiki - large list of game engines.


KineticJS

KineticJS HTML5 Canvas Framework
Tango with KineticJS - CodePen


Phaser

Phaser - Desktop and Mobile HTML5 game framework
photonstorm/phaser - Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.


Pixi.js

enjoy the power of hardware acceleration without prior knowledge of webGL. it's also fast.
GoodBoyDigital/pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
Speaking our brains - goodboy blog — goodboy© - maker of pixi's blog.


not all pretty things are WebGL though..and really everyone should know some canvas primitives right?.

Canvas

Canvas Tutorial - Introduction - build yourself a breakout clone.
EaselJS | A Javascript library that makes working with the HTML5 Canvas element easy. CreateJS/EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier. Follow EaselJS Example
okapi JS - Okapi.js is a small library for using Adobe Flash's symbol/instance model with HTML5s canvas tag. okapijs/INTRODUCITON at master · okapijs/okapijs
digitalfruit/limejs


other related content from me, but isn't it all...

Music, sound, visuals, art. - Dave Horner's Website - live coding scene...visual programming, algorithmic music generation, like you do.
David Horner on CodePen



(please excuse the autoplay, I couldn't help myself.)
Created: 2014-06-13 03:15:53 Modified: 2014-09-19 13:11:34
/root sections/
>peach custard pie
>linux
>windows
>programming
>random tech
>science
>research


moon and stars



My brain

Visible Dave Project


$$e = \sum_{n=0}^\infty \frac{1}{n!}$$ satis dictum.