Exploring
the Web

as a Graphical Medium

April 29, 2014 — FITC — Toronto, ON, Canada

Hi

I'm CJ Gammon

Creative Technologist @ Adobe

DOCUMENTS

FLASH

Mobile

the technology

html5

caniuse.com

Alexis Deveria

CSS

Hi.

Hi.

clip paths

clip paths

clip-path: ellipse(50%, 50%, 50%, 50%); clip-path: polygon(0 0, 100% 0, 80% 25%, 20% 25%);

masks

masks

mask-image: url(...); mask-position: center; mask-repeat: no-repeat;

blend modes

blend modes

background-image: url(...), url(...); background-blend-mode: multiply, screen; mix-blend-mode: difference;

Filters

filters

filter: saturate(3);

saturate(0.0) contrast(1.0) grayscale(0.0) brightness(1.0) hue-rotate(0deg) blur(0px) sepia(0.0) invert(0.0) opacity(1.0)

SVG

raphaël.js

d3.js

snap.svg

generative art

2d canvas

easel.js

processing.js

pixi.js

& many more..

blend modes

dynamic masks

CSS Canvas Drawing

http://bit.ly/csscanvas

CSS Canvas Drawing

var ctx = document.getCSSCanvasContext(canvas, 'id'); mask: -webkit-canvas(id);

CUPCAKES!

webgl

SHADERS

VERTEX SHADER

FRAGMENT SHADER

three.js

babylon.js

pixi.js

& many more..

Shader Transitions

video

OK GO - WTF

video games

sprite sheet

camera

parallax

MYST

semantics

off the grid

webgl + css

communication

webRTC

demo

state of the web

flight of the unicorn

workflows

camera tool

http://bit.ly/cameratool

generator

Adobe Tools + Node

word girl

a global resource

html.adobe.com

thanks

@cjgammon

http://bit.ly/graphicweb

resources

Concepts

CSS Canvas Drawing
Food Network Project

SVG Libraries

d3.js
snap.svg
raphael.js

2D Libraries

Easel.js
pixi.js

3D Libraries

three.js
babylon.js

attribution

Looping Videos by BEEPLE VJ CLIPS
Filter Flower Photo by Matt Gammon
Other Photos by CJ Gammon

@CJGAMMON

Hi, this site tries to show off some cutting edge features that are not supported in your browser. Maybe try viewing it in chrome.
Thanks.