Processing on the Web

**debtboy** · 11-15-2009, 09:20 AM

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.

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 javascript libraries in the <head></head> section:

Code:

  <script src="./js/init.js"></script>
  <script src="./js/processing.js"></script>

Note the simple script creating this neat graphical effect:

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.

Jordan · 11-17-2009, 10:42 AM

That is so cool! The animation on your site is very smooth. Nicely formated tutorial as well!

Why didn't you attach the images or upload them to your CC site (vs your Comcast site)?

+rep!

**amrosama** · 11-17-2009, 11:17 AM

love this tutorial *bookmark*
ive always been interested in canvas +rep

**chili5** · 11-17-2009, 01:27 PM

Very cool! +rep

**zeroradius** · 11-17-2009, 01:57 PM

Nice tutorial + rep

Does this offer any advantages over using something such as flash, other than the user not having to download flash to use it? Does it have capabilities that make it easier than making an animated gif or is it just somthing fun to do and not for serious production?

**debtboy** · 11-17-2009, 03:12 PM

Thanks everyone for the positive feedback

Originally Posted by zeroradius

Nice tutorial + rep

Does this offer any advantages over using something such as flash, other than the user not having to download flash to use it? Does it have capabilities that make it easier than making an animated gif or is it just somthing fun to do and not for serious production?

It's free/open and very easy to program, but you will
have to decide for yourself.

**zeroradius** · 11-17-2009, 04:12 PM

I guess every thing is worth trying once (^_^)

Thread: Processing on the Web

LinkBack

Thread Tools

Search Thread

Display

Processing on the Web

Re: Processing on the Web

Re: Processing on the Web

Re: Processing on the Web

Re: Processing on the Web

Re: Processing on the Web

Re: Processing on the Web

Thread Information

Users Browsing this Thread

Similar Threads

Not processing keypress

File Processing in C

Not processing php

I/O processing

Processing

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions