Education/Projects/ProcessingForTheWeb/Tasks

Summary

This page lists tasks to be done as part of the Processing For The Web project, in order to fully implement all of Processing in processing.js. The work is being led by David Humphrey and Al MacDonald, and done by students at Seneca College. You are welcome to join this work.

Task List

The following lists of Bugs, Features, and Functions was compiled by Al MacDonald.

Bugs

Bug	Description	Difficulty
variable + space + semicolon	Defining a variable such as "float y ;" with a space between the number and the semicolon can cause regex parsing errors.	Difficult
// Comment	Using double slashed comments // at the end of any script will cause REGEX to loop on parsing, subsequently crashing browser. Quick solution is to add a blank line at the end of every script.	Difficult
mouseX & mouseY	mouseX and mouseY are returned as incorrect values when the canvas is a child of a relative element.	Medium
nf()	Using nf() on some numbers crashes FireFox. EG: String sf = nf(9.012, 3, 5); from http://processing.org/reference/color_datatype.html will not work.	Difficult
keyCode, CODED, etc	Keyboard functions need fleshing out and cross-browser/cross-platform testing.	Medium
The Angel Bug	When the regex parse encounters strings with a comma in, it parses the word before the comma as a variable. Work around is to escape strings... String myString = “this \, is a string”; But that is in no way ideal. More info: http://hyper-metrix.com/processing-js/docs/?page=Angels%20Weep	Difficult
Drop frame system	A method to drop frames that are not drawn in time. This would be great for media-syncing if you want your app to stay in-time with audio and video. Not sure how plain-old JS timers will handle this... but it's worth testing	Medium

Missing Features

This is a list of all the out-standing functions in the Processing.js implementation. A more detailed description of the unfinished functions can be found at: http://processingjs.org/reference. (Click “toggle all” to see the list.)

3D Features

Name	Description	Who's working on it.	STATUS	Difficulty
curve()	Need the 3rd dimension here.			Difficult
box()	And here.	asalga		Difficult
sphere()	And here...			Difficult
sphereDetail()	Yep... lots of 3D needed.			Difficult
rotateX()	Done the math. Not implemented in in Processing.js. See: http://hascanvas.com/Disco for example.			Difficult
rotateY()	Done the math. Not implemented in in PJS. Superior code welcome.			Difficult
rotateZ()	Done the math. Not implemented in in PJS. Superior code welcome.			Difficult
abientLight()				Difficult
directionalLight()				Difficult
lightFalloff()
lightSpecular()				Difficult
lights()				Difficult
noLights()				Difficult
normal()	Done the math. Not implemented in in PJS. Superior code welcome.			Difficult
pointLight()				Difficult
spotLight()				Difficult
beginCamera()				Difficult
camera()				Difficult
endCamera()				Difficult
frustrum()	Done the math. Not implemented in in PJS. Superior code welcome.			Difficult
ortho()				Difficult
perspective()				Difficult
printCamera()
printProjection()				Difficult
modelX()				Difficult
modelY()
modelZ()				Difficult
screenX()				Difficult
screenY()				Difficult
screenZ()				Difficult
ambient()				Difficult
emissive()				Difficult
shininess()				Difficult
specular()				Difficult
scale()	Only 2D implemented			Difficult
rotate()	Only 2D implemented			Difficult
translate()	Only 2D implemented			Difficult
hint()	Detects OpenGL hardware, specs etc.			Difficult
PVector	2D or 3D vector should be returned.			Difficult

Misc. Features

Name	Description	Who's working on it.	STATUS
delay()	Some exploration done... a couple of work-arounds found. A deeper look into this needed as the work-arounds did not function as expected in all situations due to the non-blocking nature of Javascript animation techniques.
popStyle()	Requested by Google Group.
private	Worth the effort in Javascript? Maybe.
pushStyle()	Requested by Google Group.
cursor()	Some work finished and pushed to master.
focused
noCursor()
online	Relevant in a Javascript environment? Perhaps.
screen	Could be useful to get window.innerHeight etc?
long
Hashmap
XMLElement
binary()
boolean()
hex()
unbinary()
unhex()
join()
match()
matchAll()
nfc()
nfp()
nfs()
trim()
split()
splitTokens()
append()
arrayCopy()
concat()
expand()
reverse()
shorten()
sort()
splice()
subset()
PShape()	Started working on this myself (outside of PJS). Can parse most SVGs. A whole ton of quircks/bugs cross-browser that stop this in it's tracks in terms of a pure-implementation. Have been adding these to Apple, Opera, BugZilla as I go. More details if needed.
bezierDetail()
bezierPoint()
bezierTangent()
curveDetail()
curvePoint()
curveTangent()
noSmooth()	Possible/worth the processing with Canvas? Probably not. Feedback welcome.
strokeCap()
strokeJoin()
texture()
textureMode()
loadShape()	SVG function.
shape()	SVG function.
shapeMode()	SVG function.
createInput()
loadBytes()	Started working on this. Can read binary from file with JS using someone else's open-source. Not added into Processing.js yet.
open()
selectFolder()
selectInput()
param()	Needed in JS?
status()	Don't think Firefox will let you change status bar with JS re: security.
save()	Some work done by Google group. Could be combined with binary functions ot HTML5 functions to write directly to server?
saveFrame()	As above in save(). Probably don't want to start saving TIFs in a web environment. Canvas exports png, gif, jpg natively already. Spec deviation from Processing proper may be wise.
PrintWriter	Saves text to file.
beginRaw()
beginRecord()
createOutput()
createReader()
createWriter()
endRaw()
endRecord()
saveBytes()
saveStream()
saveStrings()
selectOutput()
applyMatrix()
printMatrix()
resetMatrix()
blendColor()
brightness()
hue()
saturation()
PImage	Pimage is in the library but it would be great to get PJS loading the images into the DOM dynamically. This is also a fairly common request on the Google group.
imageMode()
noTint()
requestImage()	No sure if this is actually needed in JS as DOM image would load async anyway. Probably worth looking into a little more.
blend()
copy()
filter()
PGraphics	Could be worth-while to get PGraphics to use a separate canvas and getPixels() from it. Great for say... animating the mouth moving on one canvas before applying the result to a UV map for a 3D object.
	Would this offer any performance/feature reward over using a reagular Javascript 1 dimensional array containing pixels?
PFont	Already working. The existing routines will likely get either a) merged with PShape's SVG functions or b) dropped in favor of something faster re: real browser fonts if we can borrow a little time from Mozilla developers. (We are currently using SVGs.)
PVector	2D...3D vector should be returned.
exp()
log()
mag()		asalga
map()
acos()
asin()
atan()