processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

Since the release of Processing 3.5.4 in January 2020, development has moved to a new repository.

Using a 4.0 release (even an alpha or beta version) is recommended if you find an issue. To avoid confusion, this repo will remain open at least until a 4.0 release is the default download at https://processing.org/download. We chose to move to a new repository so that we could clean out old files accumulated over the last 20 years.

Processing

This is the official source code for the Processing Development Environment (PDE), the “core” and the libraries that are included with the download.

I've found a bug! Let us know here (after first checking if someone has already posted a similar problem). If it's a reference, web site, or examples issue, take that up with folks here. There are also separate locations for Android Mode, or the Video and Sound libraries. The processing.js project is not affiliated with us, but you can find their issue tracker here.

Locked Issues Where possible, I've started locking issues once resolved. This helps reduce the amount of noise from folks adding to an issue that's been closed for years. Because this project has existed for a long time and we have thousands of closed issues, lots of them may sound similar to an issue you're having. But if there's a new problem, it'll be missed if it's lost in a comment added to an already closed issue. I don't like to lock issues because it cuts off conversation, but it's better than legitimate problems being missed. Once an issue has been resolved for 30 days, it will automatically lock.

That processing-bugs fella is suspicious. The issues list has been imported from Google Code, so there are many spurious references amongst them since the numbering changed. Basically, any time you see references to changes made by processing-bugs, it may be somewhat suspect. Over time this will clean itself up as bugs are fixed and new issues are added from within GitHub. Help speed this process along by helping us!

Please help. The instructions for building the source are here. Please help us fix problems, and if you're submitting code, following the style guidelines helps save me a lot of time.

And finally... Someday we'll also fix all these bugs, throw together hundreds of unit tests, and get rich off all this stuff that we're giving away for free. But not today.

So in the meantime, I ask for your patience, participation, and patches.

Ben Fry, 20 January 2019

p5.js's Issues

calling 'saturation' results in an error

 exports.saturation = function(hsv) {                                                                                
    if (rgb.length > 2) return rgb[1]; //should be hsv
    else return 0;
  }

Cross-browser testing

Check in Firefox and IE. A later feature would be some kind of method that tests the capabilities of your browser and prints what is and is not supported so if things don't work you know whether it's a bug in the code or a browser limitation. I would love to make the documentation site show on each page whether that function is supported in the browser it's running in or not, but that's more of a +++ feature...

implement clear()

http://processing.org/reference/clear_.html

Better commenting and organization of the internal functions and vars.

Detect browser on pCreate for handling of browser specific fxns (ex mouse button)

pCurCanvas is undefined

Hello, I started playing around with processing-js, and found a problem when writing my first js sketch. Actually, I just copied the interactive sketch listed in the Getting Started section:

var setup = function() {
  createCanvas(480, 120);
}

var draw = function() {
  if (isMousePressed()) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

One thing I noticed first is that the the function createCanvas() doesn't appear to be defined in pjs.js, but size() does, so I replaced createCanvas() with size() in the code above. And then I get the following error:

[16:14:39.892] TypeError: pCurCanvas is undefined @ .../lib/pjs.js:64

I'm using firefox 23.0.1 on OSX 10.6.8.

Thanks a lot for your work!
Andres

key variable is empty

It seems that the key variable is not properly set. if I add the following code to my sketch:

var keyPressed = function() {
println("key: |" + key + "| (" + keyCode + ")");
};

then I get this output in the console:

key: || (0)
key: || (101)
key: || (114)
key: || (101)
key: || (52)
key: || (53)
key: || (53)

Also, the keyCode doesn't appear to be consistent, as it changes when pressing the same key at different times. I'm running Chrome 29.0.1547.57 on OSX 1.6.8.

Libraries

How to include external non-Processing libraries?
Template for building new Processing libraries.

fill out DOM extensions documentation page

https://github.com/lmccart/processing-js/blob/master/extensions.md

createGraphics / PGraphics:
should explain that this replaces size.
also that it is used for on screen drawing as well as offscreen.
also that you can use setContext (name?) to switch between graphics elements or call methods directly as shown in the example. but begin draw and enddraw are not necessary (right?).

http://processing.org/reference/PGraphics.html

and rest of functions on page...

requestAnimationFrame

two.js

Another 2D html5 drawing framework:

http://jonobr1.github.io/two.js/
https://github.com/jonobr1/two.js

calling textWidth() in setup() gives incorrect results

In the following sketch

var txt = "HELLO";
var txtWidth;

var setup = function() {
  createGraphics(800, 400);

  textSize(20);
  txtWidth = textWidth(txt);  
}

var draw = function() {
  background(255);

  //txtWidth = textWidth(txt);  

  fill(0);  
  text(txt, 30, 30);

  noFill(0);
  stroke(0);
  rect(30, 30, txtWidth, -20);
}

the rectangle doesn't bound the text completely, even tough its width is calculated with textWidth(txt) in setup(). The problem goes away when using the txtWidth = textWidth(txt) line in draw().

Namespacing?

yes or no

implment focused

http://processing.org/reference/focused.html

Other languages and Processing

Here are some other Processing dialects for your list:

• https://github.com/quil/quil
• https://github.com/martinleopold/PythonMode
• https://github.com/jdf/processing.py
• https://github.com/fjenett/coffeescript-mode-processing
• http://spde.technically.us/Spde.html

implement pushStyle() and popStyle()

update api.mid and api-progress.md to reflect this

implement arc

http://processing.org/reference/arc_.html

incorrect check for arg undefined

needs to be

if (typeof variable === 'undefined')

Call pCreate with window.onload instead of body onload

Think about and begin to implement methods for interfacing with divs/elements outside of canvas.

Think about / implement typography / text

Typography

• PFont

Loading & Displaying

• createFont()
• loadFont()
• text()
• textFont()

Attributes

• textAlign()
• textLeading()
• textSize()
• textWidth()

Metrics

• textAscent()
• textDescent()

invalid assignment left-hand side

I was curious but I could not run your script. On firefox I get an error: "invalid assignment left-hand side". It tries to give a value to this, which is actually a reserved keyword... maybe it had to be _this?

// line 597
this = pCurCanvas.context.createImageData(w,h); 
// line 607
this = context.createImageData(imageData); 

Flesh out color (add alpha, image tint, etc), text (load and set fonts).

Flesh out API page and link to processing pages

and add where it differs from processing documentation for nec functions

Rhino test

Hey Lauren, are these issues working for you as a way to commit snippets? .. let me know if you feel there is a better way.

I did a tiny Processing test using Rhino (Mozilla's JavaScript engine that is based in Java):
https://gist.github.com/fjenett/5517144

The great thing about Rhino would be that the whole Processing (Java) library ecosystem could be used without much changing.

https://developer.mozilla.org/en-US/docs/Rhino

Ringo is based upon Rhino and brings some additional features like better networking and CommonJS:
http://ringojs.org/

finish DOM extension implementation

Access

• get(id)
• get(class)

Set context

• context(id)

finish implementing string functions

http://processing.org/reference/matchAll_.html

and array versions for these two:
http://processing.org/reference/nfc_.html
http://processing.org/reference/nfp_.html

Think about error handling in functions, come up with a general format for this -- later on, it will interface with new IDE.

JS Desktop apps

Writing desktop apps with JS, found this:
http://stackoverflow.com/questions/109399/can-you-do-desktop-development-using-javascript

Reorganize class docs (gdocs, github, etc)

finish implementing blending and pixel stuff

http://www.w3.org/TR/2dcontext2/#dom-context-2d-globalcompositeoperation
http://processing.org/reference/blendMode_.html

Pixels

• blend()
• copy()
• filter()
• set()

shaders (later!)

Shaders

• loadShader()
• PShader
• resetShader()
• shader()

node.js & Java

A rather strange finding and i'm not sure what to think of it ... node.js and Java:

https://github.com/nearinfinity/node-java

I think if node.js is a ingredient then it should work similar to Plask (draw using native libs) instead of binding good ol' Java, no?

Implement curves

Curves

• bezier()
• bezierDetail()
• bezierPoint()
• bezierTangent()
• curve()
• curveDetail()
• curvePoint()
• curveTangent()
• curveTightness()

Vertex

• beginContour()
• beginShape()
• bezierVertex()
• curveVertex()
• endContour()
• endShape()
• quadraticVertex()
• vertex()

Implement guideline/spec for canvas startup different cases

1. no setup() and draw(), no createGraphics()
   doesn't work
2. no setup() and draw(), createGraphics()
   doesn't work
3. setup() and draw(), no createGraphics()
   works, default canvas created
4. setup() and draw(), and createGraphics()
   autodeletes the default canvas, uses createcanvas call to create new one

***Try out examples in learningprocessing /chp1, /chp2, /chp6 once decided.

use arguments object instead of typeof !== undefined for method overloading?

will think about this for a while

implement textures

Textures

• texture()
• textureMode()
• textureWrap()

finish file I/O implementation

Updated after work by @therewasaguy:

XML is the one thing that could really benefit from some more work. Currently, we can load it, but it's hard to do anything with it because there is not yet an XML object like there is in Processing. An XML object could be really useful in tandem with p5.dom. An XML to JSON converter could also be useful even though that wouldn't always translate. I'd like to work on XML in theory, but in reality I'm not sure when I will get a chance, so if anybody is inspired they should go for it (and maybe open up a new ticket?).

More stuff that isn't supported and might be worth adding:

• loadBytes() / saveBytes() --> actually spent a decent amount of time trying to figure this one out. Maybe this will help.
• beginRecord() / endRecord() --> save a PDF of the sketch
• beginRaw() / endRaw() --> could create a vector?

implement PShape

http://processing.org/reference/PShape.html

Shape

• PShape
• createShape()
• loadShape()

Loading & Displaying

• shape()
• shapeMode()

Later version!

finish implementing PImage

implement:

• resize()
• set()
• mask()
• filter()
• copy()
• blend()
• save()
• fix Pimage vs Image
• tint
• noTint
• sort out loadImage vs requestImage (and loadImage (within canvas) not loading from url without a few refreshes)

Dive deeper into drawing and implement rest of drawing 2D primitive and shapes.

Implement file input/reading and think about file output (possible on frontend only?).

Color handling

do we have a color type? seems unnecessary.
overloaded color functions (fill, stroke, background) need to be double checked and cleaned up. maybe there should be one helper fxn for processing the overloaded args and then handing back as a standardized obj.

Implement PVector

Implement other missing functions (leaving off 3D, lights & camera, etc).

finish implementing mouse

Mouse

• mouseButton
• mouseClicked()
• mouseDragged()
• mouseMoved()
• mousePressed()
• mousePressed
• isMousePressed()
• mouseReleased()
• mouseWheel()
• mouseX
• mouseY
• pmouseX
• pmouseY

General wrapper function to be used for making async functions (like image loading, etc) blocking.

implement cursor(img), cursor(img, x, y)

IDEs

Hey Lauren,

not sure how to add things here in an open way, so trying issues for now.

About IDEs: there are some open IDEs around that i think might be interesting for your research here as they embrace JS directly:

Komodo Edit (free, open source version) based on Mozilla XULRunner (like Firefox), comes with SpiderMonkey JS engine included and uses Scintilla as code editor:
http://www.activestate.com/komodo-edit

ICE Coder (pure browser IDE):
http://icecoder.net/

Classes??