topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

chart(s) / help / lookat(s) / tutorial(s)

section 6 -- graphics with canvas

lookat -- sketch / particle(s) / mix
read -- basic(s) / tutorial(s) / blog(s)
explore -- ff3.5: video with canvas: [resource(s)]

graphic framework(s)

raphaeljs.com -- boid(s) / reflection(s) / pie / clock
processingjs.org -- link(s) / snake / barchart / intersection(s)
read -- wikipedia / wii SK / SVG?
explore -- www.c3dl.org / addon(s) / gamejs
lookat -- canvascape(s) / beautytip(s) / raytracer / painter / liquid(s) / pixastic(s) / ray(s) / draw tool / selection(s)

processing (on) canvas

basic(s): processing (on) canvas

array -- simple / object(s)
color -- brightness / wheel / square(s) / hue / gradient(s) / relative(s) / saturation(s)
control -- conditional(0) / conditional(s) / interaction(s) / iteration(double) / operator(s)
data -- conversion(s) / (true|false) / scope(s) /
form -- bezier / bezier/ellipse / piechart(s) / point(s)/line(s) / primitive(s) / curve(s) / strip(s) / vertices
image -- ???
input -- constraint(s) / easing / second(s) / mouse/1D / mouse/2D / mouse(s) / press / signal(s) / storing(s)
math -- wave(s) / arctangent / distance(s) / distance/2D / random / graphing / dec/inc / modulo / noise / noise/2D / noise/wave / precedence / polar/cartesian / random / sine / sin/cos / sin/sin
object(s) -- composite(s) / inheritance / constructor(s) / neighbour(s) / object(s)
shape(s) -- scale
structure(s) -- coordinate(s) / graphic(s) / function(s) / loop(s) / no loop(s) / recursion(0) / recursion(s) / redraw / draw(s) / comment(s) / width/height
transform(s) -- arm / rotation(s) / scale / flower(s)
typography -- letter(s) / word(s)
web -- links(s)

topic(s): processing (on) canvas

interaction -- tickle
motion -- brownian / curve(s) / puff(s)
simulate -- chain(s) / softbody / spring(s)

learning(s): processing (on) canvas

1: setup & shape(s) -- square / outline / ellipse(s) / color(s) / zoog(s)
3: interaction(s) -- square / follow(s) / draw(s) / click(s) / zoog
4: variable(s) -- circle / motion / square(s) / ellipse / dot(s) / zoog
5: conditional(s) -- mood(s) / single(s) / square(s) / alternate(s) / motion(s) / color(s) / loop(s) / bounce(s) / zoog
6: loop(s) -- space(s) / (2) / (3) / black / (4) / vertical / line(s) / gradient(s) / motion(s) / zoog(s)
7: function(s) -- dot / motion(s) / square(s) / jiggle(s)
8: class(es) -- move(s) / object(s) / jiggle(s)
9: array(s) -- follow
10: timer(s) & drop(s) -- timer / rain / drop
13: random -- gray(s) / track(s) / fill(s) / dot / round / pendulum / wave(s) / circle(s) / point(s)
14: transform(s) -- zoom(s) / grab(s) / rotation(s) / solar / angle(s)
15: pixel(s) -- random / load
16: walk(s) -- grid / scribble(s) / path(s)
[]: graphic(s)

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.

chart(s) / help / lookat(s) / tutorial(s)

section 6 -- graphics with canvas

section 6 -- graphics with canvas

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('sub-tutorial-web-6.html#slide-'); } document.write('sub-tutorial-web-6'); if (!slidemode) document.write('.html');document.write('>');

graphic framework(s)

graphic framework(s)

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('sub-tutorial-web-6.html#slide-'); } document.write('sub-tutorial-web-6-graphic'); if (!slidemode) document.write('.html');document.write('>');

processing (on) canvas

basic(s): processing (on) canvas

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('sub-tutorial-web-6.html#slide-'); } document.write('sub-tutorial-web-6-processing-basics'); if (!slidemode) document.write('.html');document.write('>');

topic(s): processing (on) canvas

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('sub-tutorial-web-6.html#slide-'); } document.write('sub-tutorial-web-6-processing-topics'); if (!slidemode) document.write('.html');document.write('>');

learning(s): processing (on) canvas

document.write(' <a href=');if (!slidemode) { document.write('@slide-'); } else { document.write('sub-tutorial-web-6.html#slide-'); } document.write('sub-tutorial-web-6-processing-learning'); if (!slidemode) document.write('.html');document.write('>');