Processing ported to JavaScript

by tzury • 18 years ago

112 28 18 years ago

gibsonf12• 18 years ago

Wow, I'd love to use this to generate dynamic graphs with text - but does it support text?

llimllib5• 18 years ago

Canvas itself does not support text; there are various hacks to, e.g., port PS fonts to canvas, but it's a really ugly scene. Other methods include overlaying HTML text via CSS and server-side image rendering fonts. It's all really ugly.

jeresig2• 18 years ago

Firefox 3 supports native text rendering. There's a couple demos that show this (although you're out in the cold in other browsers, for now at least).

f1lt3r3• 17 years ago

Processing.js now supports Ture Type Fonts: http://processingjs.org/source/ttf-pfonts/ttf-pfont-pjs.html

pkrumins• 18 years ago

A-M-A-Z-I-N-G

dhotson• 18 years ago

This is pretty sweet, I've been a big fan of Processing for ages.

Processing reminds me of what was great about languages like QBasic. You could draw graphics on the screen and animate them without needing to understand how to use complicated graphics libraries.

It doesn't necessarily need to be fast, it just needs to be easy and fast-enough!

Raphael• 18 years ago

Long live the king of JavaScript.

bootload2• 18 years ago

"... Processing ported to JavaScript ..."

My project just got a lot more interesting. One of the things I was having trouble with is generating an image from data with severe constraints on modules & processing time. Processing.js fills the gap of PIL which I couldn't use. I'm finding more and more interesting JS modules. Take this one for instance ~ http://www.nihilogic.dk/labs/canvas2image/ Converts the canvas to a binary image.

bootload2• 18 years ago

"... Converts the canvas to a binary image ..."

Just realised that in fox3 right mouse click on the canvas allows you to save the image as a .png

llimllib5• 18 years ago

You can also save an image via the toDataUrl method of a canvas object: http://www.whatwg.org/specs/web-apps/current-work/#todataurl

tectonic• 18 years ago

Wow, I'm very impressed. Looking forward to playing with this.

programnature• 18 years ago

Needless to say this is very cool.

Could someone explain the technical advantages of having it in javascript rather than as a java applet?

Obviously java applets are a pain, but at least right now they much more widely supported than the canvas element.

nex3• 18 years ago

Are they? At least for my tech-oriented blog, the percentage of visitors using canvas-compatible browsers and the percentage with Java applets enabled is roughly the same. And the former is bound to get higher while the latter goes the other way. So for sites that have a high ratio of non-IE users that are concerned about subjecting those users to the various Java applet pains.

jeresig2• 18 years ago

In my testing the JavaScript version had a better "boot time" (it was able to begin showing results instantly) - and rendered better/faster for simple examples. However, the Java Applets simply scale better. They can handle pretty much anything you throw at them. If you're just tackling simple stuff (pretty much anything that I demoed on the site) then Processing/Canvas is probably the way to go.

f1lt3r3• 17 years ago

File size of a Processing.js compared to a Java app is generally smaller.

I did a quick test and got 22kb overhead with the JS version and 233kb overhead with the Java Applet, that's WITH the library included.

More details here:

http://processingjs.org/reference/articles/comparing-process...

andreyf3• 18 years ago

More canvas goodness:

http://www.abrahamjoffe.com.au/ben/canvascape/

llimllib5• 18 years ago

add the textures and watch your browser slowwwww

boucher• 18 years ago

Not if you're using Safari!

justinbmeyer• 18 years ago

Why not make a JavaScript API instead of Processing?

Processing ported to JavaScript

Related Stories