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
Daniel Hodgin	blog	dhodgin
Tiago Moreira	blog	Kamots
Dominic Baranski	blog	dcbarans

Project Contributor(s)

Name/User Page	Blog	IRC Nick(s)
Abel Allison	blog	aallison
Andrew Grimo	blog

Former Member(s)

Name/User Page	Blog	IRC Nick(s)
Donghui Liu	blog	dliu53
Edward Sin	blog	MinyXO
Alex Londono	blog	Tyrant911
Carlos Xudiera	blog	xudiera

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

• Bug 520134
• Bug 518894
• Bug 518173

Resources

Tools

1. Processing (Java) @ http://Processing.org
2. Processing JS code @ http://ProcessingJS.org
3. 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/
4. Git, http://Github.com & a great video tutorial on Git @ http://peepcode.com/products/git
5. AlertThingy (can plug your Github repo rss feed in and get live updates when other users submit code) @ http://www.alertthingy.com/
6. HasCanvas, a Processing JS IDE @ http://HasCanvas.com

Learning

1. Recent interview with creators of Processing about the language and its future
2. Download the Java version of Processing @ http://processing.org/download/
3. Look at what Processing Java is capable of @ http://processing.org/exhibition/
4. Look at what has been done with Processing JS so far @ http://processingjs.org/exhibition & @ http://hascanvas.com/#open-about
5. Read Processing articles "Getting Started" & "Coordiante System & Shapes" @ http://processing.org/learning/gettingstarted/ & @ http://processing.org/learning/drawing/
6. 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.
7. 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.

Conference Call

Up until the end of April, we will be doing conference calls with the processing.js developers on a weekly basis. We will post the links to the minutes here as well as any agendas, etc.

Call Details

Call will take place Thursdays at 5:15pm

Primary Dial-in Numbers

+1 416-848-3114 [ Extension 92, Conference# 7600 ] (Canada)
+1 800-707-2533 [ Pin 369, Conference# 7600 ] (Canada/US Toll Free)

Agendas/Minutes

Conference Call Meetings

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
Mickael
- Fix camera()
- Write test for camera()
- Fix perspective()
- Write test for perspective()
- Fix P3DMatrixStack
- Write test for P3DMatrixStack

Andor
- Write setUniformf()
- Write setUniformi()
- Write setUniformMatrix()
- Write test for frustum()
- Write test for PMatrix3D trans(), mult(), set(), apply(), scale()

Anna
- Fix box()
- Write test for PMatrix3D rotateX()
- Write test for PMatrix3D rotateY()
- Write test for PMatrix3D rotateZ()
- Write test for PMatrix3D rotate()
- Write test for PMatrix3D applyMatrix
- Write test for PMatrix3D reset()

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
- Implement resetMatrix()
- Implement pushMatrix()
- Implement popMatrix()
- Implement translate()
- Implement scale()
- Implement applyMatrix()

- Implement 3D noStroke()
- Implement 3D stroke()
- Implement 3D fill()
- Implement 3D noFill()

- Write test for sphere()
- Write test for sphereDetail()
- 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
texture
PGraphics blocks triangle, quad, vertex, bezierVertex, rect()
beginShape() endShape() line()