LinkBack URL
About LinkBacks
Processing on the Web
This tutorial is a brief intro to the Processing Language
and Processing.js (Processing ported to Javascript).
The Processing Language
Here is the opening paragraph from Processing.org
Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool.
Below are 2 images where I use the Processing IDE to create a simple animation and execute it.
I have to say...
Processing is by far the easiest language I've tried, but it offers some awesome graphic capabilities.
The syntax is very easy to understand, just click Help -> Reference in the IDE or click the
Reference Tab at Extended Language (API) \ Processing 1.0
Processing.js (Processing Language ported to javascript)
Here is the opening paragraph from Processingjs.org
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
Processing.js runs in FireFox, Safari, Opera, Chrome and will also work with Internet Explorer, using Explorer Canvas.
Processing.js requires a few javascript files/libraries which can be downloaded here:
Processing.js
The commands available for Processing.js are slightly reduced and can be found here:
Processing.js. It you click the "toggle all" link on this page, it shows the Processing commands that are not available to Processing.js
Here is a simple website using the script I created above.
Note the javascript libraries in the <head></head> section:Code:<!DOCTYPE html> <html> <head> <title>Debtboy's Processing Language Site</title> <script src="./js/init.js"></script> <script src="./js/processing.js"></script> </head> <body> <center> <h2>Debtboy's Processing Ported to Javascript Site</h2> <script type="application/processing" target="debtboy_canvas"> float a = 0.0; float s = 0.0; PImage img1; void setup() { size(400,400); noStroke(); frameRate(20); img1 = loadImage( "./images/debtboy_cow.jpg" ); } void draw() { background(255); a = a + 0.04; s = cos(a)*2; translate(width/2, height/2); scale(s); image(img1,-103,-90); } </script> <canvas width="300" height="300" id="debtboy_canvas"></canvas> <br></br> </center> </body> </html>
Note the simple script creating this neat graphical effect:Code:<script src="./js/init.js"></script> <script src="./js/processing.js"></script>
Code:<script type="application/processing" target="debtboy_canvas"> float a = 0.0; float s = 0.0; PImage img1; void setup() { size(400,400); noStroke(); frameRate(20); img1 = loadImage( "./images/debtboy_cow.jpg" ); } void draw() { background(255); a = a + 0.04; s = cos(a)*2; translate(width/2, height/2); scale(s); image(img1,-103,-90); } </script
Note that the canvas object is used:
Code:<canvas width="400" height="400" id="debtboy_canvas"></canvas>
Here is a link to my website with the animation:
Debtboy's Processing Language Site
Below are a few website images (at different points) of the running animation:
I'm quite impressed by Processing and Processing.js capabilities. I'll be experimenting quite a bit with this language on my member website. It's very easy to understand and use which are sought after features for a lazy programmer like myself
If you haven't already... give Processing (Processing.js) a try.
Reply With Quote
im a code-warrior, see my avatar
Originally Posted by zeroradius
Bookmarks
Algorithms and Data Structures
Java tutorials
Algorithms Forum