
HTML5 Canvas & Processing JS - jenhsun
http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js
======
MCompeau
I'm a huge fan of processing and processing.js . I come from a design
background without any formal training in software development. Processing has
been a really easy way for me to get visual results quickly without a degree
in software engineering. I've tried to start using it on my blog as a way to
quickly visualize ideas about more abstract topics [1]. I'm hoping to do a lot
more experimenting with it in the near future.

[1] [http://www.emergentforms.com/blog/2012/01/23/growth-vs-
robus...](http://www.emergentforms.com/blog/2012/01/23/growth-vs-robustness/)

------
lbotos
Can someone elaborate as to what purpose strike-throughs serve on this
article? Am I right to assume they are a mistake?

~~~
yardie
I assume he meant to underline and used strikethrough instead.

Then again, it could be intentional, looking at the source this style is
applied inline instead of in a css file.

~~~
hornbaker
Either way, it's a surprise coming from someone with a professed focus on
design.

~~~
joeycadle
eh. I did it on purpose. I try to do what _I_ think looks different than most.
Instead of making those sectional headlines a larger font or underlining them
I decided to use strikethrough as I thought the little break from the
conventional norm would be noted. Goal achieved, obviously. Sorry I decided to
not be a complete sheep in the herd and do things the way EVERYONE ELSE does
them. My bads, yo!

~~~
lbotos
Please do not take this as a personal attack but strike-throughs are typically
used to denote a change of thought or deleted information. As I was reading
your article the context was lost as I was struggling to understand why that
type was "deleted" or marked as incorrect. Again, I don't want to sound
pretentious but the first thing you learn in design school is that breaking
conventions creatively only works if you don't cause confusion. As a creative,
I completely understand your desire to do things uniquely but I don't think it
worked in this case.

------
akarambir
For those who don't quite fully grasp what HTML5 Canvas check out the
W3Schools entry for the element before reading any further, but it's basically
an element that defines graphics.

RED flag - w3schools. Please check <http://w3fools.com>

~~~
joeycadle
I'm not the biggest fan of w3 schools either but as it stands if someone is
new to design in general, and doesn't fully grasp the concept of such html5
elements, then it stands to reason that they probably trust the definition
given by W3.

------
untog
This looks very interesting. I've always been disappointed that Canvas totally
eclipsed SVG in browsers- SVG elements are _in the DOM_ , so it makes things
like click actions a lot easier. It looks like processing.js goes some way to
help with the pain of using Canvas.

~~~
Homunculiheaded
I don't know if I'd say that "Canvas totally eclipsed SVG", it has gotten more
attention. But as far as I know libraries like Raphael.js[0] are relatively
popular. Additionally Raphael.js has ridiculous cross browser compatibility
(For my usage it has actually held up to it's claims of being ie6 compatable),
so I'd imagine anyone doing interesting graphical work on the web that has to
reach a wide range of users is looking to SVG rather than Canvas.

[0] <http://raphaeljs.com/>

------
DrCatbox
Alot of graphing/plot libraries use the new canvas element, I think even
jqplot does it that way these days.

WIth Canvas and WebGL I wonder why we dont see more coolness.

------
bri3d
node-canvas [0], node.js, and processing.js are a very powerful combination
for allowing designers to implement server-side image filters.

[0]: <https://github.com/LearnBoost/node-canvas>

------
anm8tr
Site is unreadable on the iPhone.

~~~
joeycadle
errant view-port metatag left over from my last design, try again :)

------
geuis
Sorry man, but I can't read your site on the iPhone. You've got zooming
disabled and the text overlaps the screen. Also the left and top floating bits
keep moving around. Stay away from the javascript and just use some static
CSS.

~~~
joeycadle
damn leftover view-port metatag from my last design that was a Responsive
design. try again

