From CDOT Wiki
Revision as of 01:50, 17 December 2009 by Esin (talk | contribs)
Jump to: navigation, search

Project Name


Project Description

Processing.js is a proposed Mozilla-sponsored project, its main purpose is to wrap Java-based language functions into Javascript. The purpose of this is to use visuals on the open web, using standard technologies such as JavaScript and Canvas.

Read more about processing for the web

Read more about Canvas

Read more about Drawing with Canvas

Check out for a cool visual.

Project Leader(s)

Name/User Page Blog IRC Nick(s)
David Humphrey blog humph
Anna Sobiepanek blog annasob
Andor Salga blog andor
Mickael Medel blog aSydiK
Matthew Lam blog mlam19
Donghui Liu blog dliu53
Edward Sin blog MinyXO
Alex Londono blog Tyrant911
Carlos Xudiera blog xudiera
Daniel Hodgin blog dhodgin

Project Contributor(s)

Related Bugs


  • Bug 381930 - No repaint inside very large canvas
  • Bug 370450 - Safari "canvas" demonstration cause Minefield to hang while page is loaded
  • Bug 408372 - <canvas> canvas animation is jerky on Firefox 3 beta 1, Linux x86_64
  • Bug 501677 - Drawing lines in big Canvas don't work always
  • Bug 518173 - webgl does not build on Darwin/X11 (bad gl.h)
  • Bug 411475 - Canvas3D not working on Radeon 9250
  • Bug 488271 - Examples crash with ATI on Vista
  • Bug 480993 - Canvas 3D spec tests


Project Details

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. Processing is an alternative to proprietary software tools in the same domain.

Processing.js will:

  • enable Processing users to take advantage of the full power of the open web
  • serve as a forcing function to drive improvements in key aspects of Mozilla products and technologies, including; JavaScript, Camvas Functionality, applications of Bespin, Ubiquity, Multi-Touch and others

Read more on the project Processing For The Web.

Project Task List is here



  1. Processing (Java) @
  2. Processing JS code @
  3. Minefield builds for WebGL (build your own or See also Vlad's post on this:
  4. Git, & a great video tutorial on Git @
  5. AlertThingy (can plug your Github repo rss feed in and get live updates when other users submit code) @
  6. HasCanvas, a Processing JS IDE @


  1. Recent interview with creators of Processing about the language and its future
  2. Download the Java version of Processing @
  3. Look at what Processing Java is capable of @
  4. Look at what has been done with Processing JS so far @ & @
  5. Read Processing articles "Getting Started" & "Coordiante System & Shapes" @ & @
  6. Experiment around with the Processing Java app, use the Basic Examples @ and make something cool, interesting, wacky, where-ever your experiment takes you.
  7. Test whether you can re-create your sketch by copying your code to You can share your work so others can see what you have done, you can also use hasCanvas to embed your visualization in your web site / blog.

Processing.js 0.1 Code status

This table is for students who have 0.1 code that needs to be pushed into the processing.js library
Please add your functions below that require review by Al.
A new format for submitting work for review and a bug tracker will be implemented by 0.2 release time
How to use this chart:

  • function: your functions name or function you modified
  • name: your name
  • code link: a link to the code snippet or diff file if you had to change a function
  • state: r?, needs review by Al. r-, reviewed by Al and not fit for check-in yet. r+, reviewed by Al and work looks ok. checked-in, reviewed by Al and checked into the library.
  • comments: comments you can put for Al or he can put regarding his review of your work.
FunctionNameCode linkState
(r?, r-, r+, checked-in)
shorten() Daniel Hodgin shorten() r? Al review needed by Al
expand() Daniel Hodgin expand() r? Al review needed by Al
unhex() Daniel Hodgin unhex() r? Al review needed by Al
nfs() Daniel Hodgin nfs() r? Al review needed by Al
split(), trim(), arrayCopy() Edward Sin link r? Al review needed by Al
match() Edward Sin match() r? Al review needed by Al
append() Edward Sin append() r? Al review needed by Al
online(), splitToken() Edward Sin link r? Al review needed by Al
splice(), subset(), mag(), focused Andor Salga patch r? Al review needed by Al
nfc() Daniel Hodgin nfc() r? Al review needed by Al
cursor(), noCursor() Anna Sobiepanek path 0.1 r+ Al Fixed and pushed changes
PVector Mickael Medel PVector r? Al review needed by Al
concat Alex Londono(tyrant911) concat() r? Al review needed by Al
hex Alex Londono(tyrant911) hex() r? Al review needed by Al
join Alex Londono(tyrant911) join() r? Al review needed by Al
nfp Alex Londono(tyrant911) nfp() r? Al review needed by Al
unbinary Alex Londono(tyrant911) unbinary() r? Al review needed by Al
brightness(),hue(),saturation() Donghui Liu 0.1 r? Al review needed by Al
curve(),blendColor() Donghui Liu 0.2(curve), 0.2(blendColor) r? Al review needed by Al
bezierPoint()() Donghui Liu 0.3 r? Al review needed by Al
PImage const, get(), set(), copy(), loadPixels(), updatePixels() Anna Sobiepanek patch 0.2 r? Al review needed by Al
3D: sphere() sphereDetail() box() rotateX() rotateY() rotateZ() Non-3D: curve() Anna Sobiepanek patch 0.3 r? Al review needed by Al

Project Tests

Project html template for creating tests that all look the same ProcessingTestsTemplate

Processing tests available for usage

Student Date Test Description
Andor Salga Oct 15 2009 mag()
Andor Salga Oct 15 2009 splice()
Andor Salga Oct 15 2009 focused
Daniel Hodgin Oct 21 2009 shorten()
Andrew Grimo Oct 23 2009 subset() - done for Andor's function, calling the Processing.js file on his Matrix account
Mickael Medel Oct 23 2009 PVector.add() version 1 version 2
Mickael Medel Oct 23 2009 PVector.sub() version 1 version 2
Mickael Medel Oct 23 2009 PVector.mult() version 1 version 2
Mickael Medel Oct 23 2009 PVector.div() version 1 version 2
Anna Sobiepanek Oct 23 2009 cursor(MODE)
Anna Sobiepanek Oct 23 2009 cursor(src,x,y)
Anna Sobiepanek Oct 23 2009 noCursor()
Daniel Hodgin Oct 24 2009 expand()
Daniel Hodgin Oct 27 2009 unhex()
Daniel Hodgin Oct 28 2009 nfs()
Daniel Hodgin Nov 13 2009 nfc()
Donghui Liu Nov 13 2009 brightness(),hue(),saturation()
Matthew Lam Nov 19 2009 pushStyle()/popStyle(), boolean()
Donghui Liu Nov 25 2009 curve(), blendColor()
Anna Sobiepanek Nov 27 2009 PImage()
Anna Sobiepanek Nov 27 2009 PImage.get()
Anna Sobiepanek Nov 27 2009 PImage.set()
Anna Sobiepanek Nov 27 2009 PImage.copy()v1 PImage.copy() v2
Matthew Lam Dec 2 2009 strokeCap(), strokeJoin()