7 ms·

HTML5 Canvas & Processing JS

69 points by jenhsun 15y ago

lbotos 15y ago
Can someone elaborate as to what purpose strike-throughs serve on this article? Am I right to assume they are a mistake?
- yardie 15y ago
  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 15y ago
    Either way, it's a surprise coming from someone with a professed focus on design.
    - joeycadle 15y ago
      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 15y ago
        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.
MCompeau 15y ago
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-robustness/ http://www.emergentforms.com/blog/2012/01/23/growth-vs-robus...
akarambir 15y ago
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 http://w3fools.com
- joeycadle 15y ago
  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.
anm8tr 15y ago
Site is unreadable on the iPhone.
- joeycadle 15y ago
  errant view-port metatag left over from my last design, try again :)
untog 15y ago
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 15y ago
  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/ http://raphaeljs.com/
geuis 15y ago
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 15y ago
  damn leftover view-port metatag from my last design that was a Responsive design. try again
DrCatbox 15y ago
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 15y ago
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 https://github.com/LearnBoost/node-canvas

69 points by jenhsun 15y ago

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

yardie 15y ago
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 15y ago
  Either way, it's a surprise coming from someone with a professed focus on design.
  - joeycadle 15y ago
    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 15y ago
      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.

MCompeau 15y ago

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-robustness/ http://www.emergentforms.com/blog/2012/01/23/growth-vs-robus...

akarambir 15y ago

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 http://w3fools.com

joeycadle 15y ago
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.

anm8tr 15y ago

Site is unreadable on the iPhone.

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

untog 15y ago

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 15y ago
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/ http://raphaeljs.com/

geuis 15y ago

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 15y ago
damn leftover view-port metatag from my last design that was a Responsive design. try again

DrCatbox 15y ago

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 15y ago

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 https://github.com/LearnBoost/node-canvas