Processing.js
Project Name
Processing.js
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 http://processing.org
Read more about Canvas http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
Read more about Drawing with Canvas https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
Check out http://9elements.com/io/projects/html5/canvas/ 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 | asalga |
| 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 |
| Tiago Moreira | blog | Kamots |
Project Contributor(s)
Related Bugs
Canvas
- 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
WebGL
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
Resources
Tools
- Processing (Java) @ http://Processing.org
- Processing JS code @ http://ProcessingJS.org
- Minefield builds for WebGL (build your own or http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/). See also Vlad's post on this: http://blog.vlad1.com/2009/09/18/webgl-in-firefox-nightly-builds/
- Git, http://Github.com & a great video tutorial on Git @ http://peepcode.com/products/git
- AlertThingy (can plug your Github repo rss feed in and get live updates when other users submit code) @ http://www.alertthingy.com/
- HasCanvas, a Processing JS IDE @ http://HasCanvas.com
Learning
- Recent interview with creators of Processing about the language and its future
- Download the Java version of Processing @ http://processing.org/download/
- Look at what Processing Java is capable of @ http://processing.org/exhibition/
- Look at what has been done with Processing JS so far @ http://processingjs.org/exhibition & @ http://hascanvas.com/#open-about
- Read Processing articles "Getting Started" & "Coordiante System & Shapes" @ http://processing.org/learning/gettingstarted/ & @ http://processing.org/learning/drawing/
- Experiment around with the Processing Java app, use the Basic Examples @ http://processing.org/learning/basics/ and make something cool, interesting, wacky, where-ever your experiment takes you.
- Test whether you can re-create your sketch by copying your code to http://hasCanvas.com 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.
| Function | Name | Code link | State (r?, r-, r+, checked-in) | Comments |
| 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()-2D,blendColor() | Donghui Liu | 0.2(curve), 0.2(blendColor) | r? Al | review needed by Al |
| bezierPoint(),curvePoint() | Donghui Liu | 0.3(bezierPoint),0.3(curvePoint) | r? Al | review needed by Al |
| bezierTangent(),curveTangent() | Donghui Liu | 0.3(bezierTangent,curveTangent) | 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() |
3D Implementation Roadmap
I have done my best to identify what tickets will block others and have created
a roadmap for integrating 3D into the library. I have done so by analyzing the
Processing site and looking through the Processing source.
Items marked 'fix' have been reviewed but need to corrected.
Items marked 'implement' need to be coded, but it also implies writing a good test.
Items marked 'write test' are done, but need a test before they can be reviewed.
A good test should take a peer-reviewer only a few minutes to check and pass on for super-review.
We still need to address what will happen if a ticket isn't complete. This roadmap needs to be
robust enough to not crumble if this occurs.
Release 0.5
- Fix camera(), Write test
- Fix perspective(), Write test
- Write test for frustum()
- Fix P3DMatrixStack, Write test
- Write test for PMatrix3D trans(), mult(), set(), apply(), scale()
- Write test for box()
Once 0.5 tickets are in, we will each be able to render
a simple box to test the functions we will be writing for 0.6
Release 0.6
- Write test for PMatrix3D's applyMatrix
- Write test for PMatrix3D's reset()
- Implement resetMatrix()
- Implement pushMatrix()
- Implement popMatrix()
- Implement translate()
- Implement scale()
- Implement 3D noStroke()
- Implement 3D stroke()
- Implement 3D fill()
- Implement 3D noFill()
- Write test for PMatrix3D rotateX()
- Write test for PMatrix3D rotateY()
- Write test for PMatrix3D rotateZ()
- Implement rotateX()
- Implement rotateY()
- Implement rotateZ()
0.6 "extras" not mandatory, but no longer blocked
- Write test for ortho()
- Implement printCamera()
- Implement printProjection()
- Implement hint()
- Write test for screenX()
- Write test for screenY()
- Write test for screenZ()
Release 0.7
0.7 "extras" not mandatory, but no longer blocked
- Implement beginCamera()
- Implement endCamera()
- Write test for modelX()
- Write test for modelY()
- Write test for modelZ()
Release 0.8
- Update DirectionalLight test
- Update ambientLight test
- Implement pointLight()
- Implement emissive()
??? still trying to sort these out
sphere, sphereDetail - Blocked, but don't want to put it in 0.7, that's very late
texture
PGraphics blocks triangle, quad, vertex, bezierVertex, rect()
beginShape()
endShape()
line()