processing-js / processing-js Goto Github PK

A port of the Processing visualization language to JavaScript.

License: Other

JavaScript 2.75% HTML 0.08% Processing 97.18%

processing-js's Introduction

⚠️ This project has been archived ⚠️

With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having been in maintenance mode for quite a few years now, this project has been archived as of December 2018.

Processing.js would like to thank everyone who contributed over the years: it's been an amazing project! The code will still be available in read-only mode, no releases will be pulled from any of the places it was distributed through, but the last version is, and will forever be, v1.6.6.

Thank you for your support, and happy coding (with newer solutions)!

processing-js's People

Contributors

Stargazers

Watchers

Forkers

jeresig ericallam mcarlson rikrd dotimpact rockitbaby baoilleach spike brady mchelen ulsci rootsikal patcito tilgovi devadattas kamilszot kiddphunk minyxo tyrant911 anupom dliu53 notmasteryet phinze devguy muaz bob0the0mighty maciek416 asydik pjs-rc03 pjs-rc04 saket-zz corbanbrook asalga dhodgin annasob dcbarans abelnation localhuman zbhuang1 jmchen4 tdao75 aribn sunilrvtech phoenix24 kalpeshdave norgg gducharme frfeni cbrumelle mlam19 latosha danielw3b hwinkler resistorsoftware temp4446 rkabir hongpong yureckey stinie minoo vvasabi ben1amin raybaq danventura kojingharang banksean duluoz greco roc abeartaytest paolomainardi jkew frankk00 speednoisemovement fmaulanaa greggman brynnperit shaunoconnor jonbro iros rsodre egradman snithya psiborg tkpage rwaldron gkrilov jsiu3 kmcdonald11 tentaclepentacle jboelen rhotin anuragbhatnagar marcneuwirth archanasahota midakun grabiller rainyin adamaly27 juil

processing-js's Issues

Cannot read property 'data' of undefined when use img.pixels[]

/* @pjs preload="tux.png"; */

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int columns, rows;   // Number of columns and rows in our system
int ololo = 30;

void setup(){
    size(screen.width, screen.height, P3D);
    img = loadImage("tux.png"); 
    columns = img.width / cellsize; 
    rows = img.height / cellsize;
    smooth();

}

void draw(){  
  background(0);
// Begin loop for columns
  for ( int i = 0; i < columns; i++) {
// Begin loop for rows
    for ( int j = 0; j < rows; j++) {
        int x = i*cellsize + cellsize/2;  // x position
        int y = j*cellsize + cellsize/2;  // y position
        int loc = x + y*img.width;  // Pixel array location
        color c = img.pixels[loc];  // Grab the color
        // Calculate a z position as a function of mouseX and pixel brightness
        float z = (ololo / float(screen.width)/2) * brightness(img.pixels[loc]) - 100.0;
        // Translate to the location, set fill and stroke, and draw the rect
        pushMatrix();
        translate(x + 200, y + 100, z);
        fill(c, 204);
        noStroke();
        rectMode(CENTER);
        rect(0, 0, cellsize, cellsize);
        popMatrix();
    }
  }

}

When I use 2D mode i get

Uncaught TypeError: Cannot read property 'data' of undefined - processing.js:18301
getPixel - processing.js:18301
draw - VM48:21
Drawing2D.redraw - processing.js:13468
(anonymous function) - processing.js:13550

About time to provide a consistent asynchronous API for loading stuff in both Java and JavaScript mode

processing/processing#3075

I guess the Processing and Processing-js teams have to work together at the specs for this

Installation via Bower : "error browserify not found" etc

Trying to install via Bower results in the following errors

# bower install Processing.js                    
bower cloning git://github.com/processing-js/processing-js.git
bower fetching Processing.js
bower cached git://github.com/processing-js/processing-js.git
bower checking out Processing.js#v1.4.8
bower copying /Users/james/.bower/Processing.js
bower error argv not found
bower error node-minify not found
bower error browserify not found
bower cloning git://github.com/mozilla/nunjucks.git
bower cached git://github.com/mozilla/nunjucks.git
bower fetching nunjucks
bower cloning git://github.com/peigong/poet.git
bower cached git://github.com/peigong/poet.git
bower fetching express
bower error open not found
bower error Can not find tag: express#~3.3.3
bower copying /Users/james/.bower/express
bower checking out nunjucks#v0.1.10
bower copying /Users/james/.bower/nunjucks
# which browserify                                
/usr/local/share/npm/bin/browserify

As you can see Browserify is installed.

Unable to catch Index Out Of Bounds Exception

Try catch error handling is used in both java and javascript in a very similar manner.

It would be nice if the processing js converter was able to take try and catch statements.

As of now, the lines for try and catch just produce errors or are completely ignored.

p.loop should use requestAnimationFrame where available.

p.loop should use requestAnimationFrame where available instead of setInterval.

lines show up above another object when objects are drawn less than 1 away

its hard to describe just check out the code

void setup(){
  size(100,100,P3D);
}

int x = 0;

void draw(){
  rotateX(PI*x/180);x++;
  x = x%360;
  background(255);
  fill(255,0,0);
  rect(30, 20,50, 55);
  translate(0,0,.01);
  fill(0,255,0);
  rect(0,0,50, 55);
}

check if we really need the "if (Processing.instances[i]) {" test in init()

It should not be the case that we can grab an "empty spot in the list of instances", that list should be compact.

__mousePressed inside mouseMoved event

I get a very strange behavior. Look at the follow example. It works fine:

<!DOCTYPE html>
<html>
<head>
    <title>Test init fun</title>
    <script type="text/javascript" src="processing.js"></script>
</head>
<body>
    <canvas id="pid"></canvas>
    <script type="text/javascript">
        function sketchProc(prc) {     
            prc.setup = function() {
                prc.size(300, 300);
            };

        prc.draw = function() {  
            prc.background(224);
            if (prc.__mousePressed) {
                prc.background(102);
            }
        };
        };   
        var canvas = document.getElementById("pid");
        var processingInstance = new Processing(canvas, sketchProc);
    </script>
</body>
</html>

If I press mouse button - test message is printed.

But in the next example message don't printed if we press mouse button and move mouse:

<!DOCTYPE html>
<html>
<head>
    <title>Test init fun</title>
    <script type="text/javascript" src="processing.js"></script>
</head>
<body>
    <canvas id="pid"></canvas>
    <script type="text/javascript">
        function sketchProc(prc) {     
            prc.setup = function() {
                prc.size(300, 300);
            };

        prc.draw = function() {  
            prc.background(224);
        };

        prc.mouseMoved = function() {           
            if (prc.__mousePressed) {
                prc.println("test");
            }
        }
        };   
        var canvas = document.getElementById("pid");
        var processingInstance = new Processing(canvas, sketchProc);
    </script>
</body>
</html>

and the follow code not working (text not printed, but I moved ant pressed mouse button!):

<!DOCTYPE html>
<html>
<head>
    <title>Test init fun</title>
    <script type="text/javascript" src="processing.js"></script>
</head>
<body>
    <canvas id="pid"></canvas>
    <script type="text/javascript">
        function sketchProc(prc) {     
            var pressed = false;

            prc.setup = function() {
                prc.size(300, 300);
            };

        prc.draw = function() {  
            prc.background(224);
        };

        prc.mousePressed = function() {
            pressed = true;
        }

        prc.mouseReleased = function() {
            pressed = false;
        }

        prc.mouseMoved = function() {           
            if (pressed) {
                prc.println("test");
            }
        }
        };   
        var canvas = document.getElementById("pid");
        var processingInstance = new Processing(canvas, sketchProc);
    </script>
</body>
</html>

And the last example:

<!DOCTYPE html>
<html>
<head>
    <title>Test init fun</title>
    <script type="text/javascript" src="processing.js"></script>
</head>
<body>
    <canvas id="pid"></canvas>
    <script type="text/javascript">
        function sketchProc(prc) {     
            var pressed = false;

            prc.setup = function() {
                prc.size(300, 300);
            };

        prc.draw = function() {  
            prc.background(224);
        };

        prc.mousePressed = function() {
            pressed = true;
        }

        prc.mouseReleased = function() {
        }

        prc.mouseMoved = function() {           
            if (pressed) {
                prc.println("test");
            }
        }
        };   
        var canvas = document.getElementById("pid");
        var processingInstance = new Processing(canvas, sketchProc);
    </script>
</body>
</html>

In this case text is printed. Ok, it's expected because I don't reset pressed to false.

Why I got this behavior? It's normally or not?

P.S. I test it at the last versions of Chrome and Firefox.

Cannot set value for size()

Hi everyone. I want to set a size value for the screen. But when I set a size using size(width,height), my app doesn't work anymore:

int size = 1024;
size(size, 708);

Thanks.

Allow to overwrite processing functions in javascript

There should be a way to overwrite all functions (like print of example), I found a way to do this but in

var sketch = Processing.compile(texarea.val());
var processing = new Processing(canvas[0]);

processing.print = function(str) { output.append('<span>' + str + '</span>'); };
processing.println = function(str) { processing.print(str + '\n'); };

sketch.attach(processing, Processing.prototype);
sketch.onLoad(processing);
if (processing.setup) {
    processing.setup();
    processing.resetMatrix();
    sketch.onSetup();
}
if (processing.draw) {
    processing.redraw();
}

but it don't handle loop because executeSketch function use doLoop variable.

The only think that it's needed is Processing.Sketch.exec or Processing.Sketch.run function. (and there will need to be a method or property in processing instance isloop or doLoop so sketch can call it)

p5 and pjs does not show same result for sphere mesh

p5 and pjs are not showing the same result for sphere meshes. Here is the sketch to reproduce results:

void setup(){
    size(600,600,OPENGL);
//  noStroke();
}
void draw(){
    pushMatrix();
    translate(300,300,300);
    fill(255,0,0);
    sphereDetail(10);
    sphere(50);
    popMatrix();
    pushMatrix();

    translate(0,0,-300);
    fill(0,255,0);
    sphere(25); 
    popMatrix();
}

p5 screenshot:

pjs screenshot:

Animated GIFs?

Other than extracting the frames of the GIF and playing one every frame, is there any way to properly render an animated GIF?

SVG shapes add vertex at origin on Chrome.

Quote from http://stackoverflow.com/questions/16415304/how-to-correctly-cleanly-draw-svg-graphics-using-processingjs/28285366#28285366:
I'm getting started with ProcessingJS and I'm currently playing with SVG a bit. Unfortunately I've ran into a strange behaviour displaying SVG. Here is the output:

and here is the code that produces that:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script>
$(document).ready(function() {  
    $('body').append($('<canvas id="preview"><p>Your browser does not support the canvas tag.</p></canvas>'));
    function onPJS(p) {
        var glasses;
        p.setup = function(){
            glasses = p.loadShape("brighteyes.svg");
            p.size(Math.floor(glasses.width), Math.floor(glasses.height)+Math.floor(glasses.height * .25));
            //p.shape(glasses,0,0);
            p.frameRate(1);
        }
        //*
        p.draw = function() {
            p.background(32);
            p.shape(glasses, 0, 0);
            console.log(p.mousePressed);//prints undefined
        };
        //*/
    }
    new Processing(document.getElementById("preview"), onPJS);  
});
</script>

I'm experiencing this odd rendering (renderer seems to place a vertex at 0,0 for the shape) on OSX 10.8 on Chrome Version 26.0.1410.65 (but not on Safari (6.0 (8536.25))). You can run the code here.

How do I get read of these weird rendering bug ?

There is another unexpected thing happening: mousePressed prints undefined, but might address that in a different question.

Does not coerce into int as in java

I bet this is a known issue and one that's hard to fix, but numbers that would be coerced into ints aren't being coerced in processing-js.

e.g.

int getXCell() {
    return int(this.x) / cellWidth;
}

This returns an integer in java, but a floating point (e.g. nonzero decimals) in processing-js.

rotate() with four parameters always rotates on Z axis

Try executing the following code in Java mode, and then in JavaScript mode:

void setup()
{
  size(400, 400, P3D);
  frameRate(60);
}

void draw()
{
  background(0);
  stroke(255);
  noFill();

  translate(200, 200, 0);
  rotate(frameCount / 240.0 * TWO_PI, 0, 1, 0);
  box(200, 200, 200);
}

In Java mode it behaves properly, rotating around the Y axis, but in JavaScript mode it rotates around the Z axis, completely ignoring the last three parameters.

println is broken

PShape getChild positioning and size behaviour

In Processing 2.2.1 the child is positioned and sizes relatively to the parent. In Processingjs 1.4.8 the behaviour is different.

The width and height parameters are ignored with child shapes. According to the processingjs reference it should work: shape(sh,x,y,width,height)
[http://processingjs.org/reference/shape_/]

It's strange because getChild returns a new PShape object. disableStyle(), enabelStyle() doesn't matter. Scaling the Shape with the scale function works.

PShape knob;
PShape knobInside;

void setup() {
  size(800, 800); 

  knob = loadShape("lumiflow_colorknob.svg");
  knob.disableStyle();  
  knobInside = knob.getChild("pointer");  
}

void draw() {  
  background(0,0,0);  

  fill(255,0,0); 
  shape(knob, 0, 0, 400,400);

  fill(255,255,0);
  shape(knobInside, 0,0, 400,400);  
}

Processing 2.2.1

ProcessingJS 1.4.8

Link to the SVG file

Folder with the whole code

Add an option to not round coordinates in Drawing2D

I was working on a method to draw dashed lines by drawing a series of short lines. Unfortunately, the output look a little funny. Here a screenshot comparing processing output vs. native canvas output using the same technique. Notice how the lines on the bottom are parallel to the centre line whereas the lines on top aren't always parallel.

I found the cause of difference in rendering:

Drawing2D.prototype.line = function(x1, y1, x2, y2) {
      if (!doStroke) {
        return;
      }
      x1 = Math.round(x1);
      x2 = Math.round(x2);
      y1 = Math.round(y1);
      y2 = Math.round(y2);
      ...

It would be nice if there was an option to turn off the rounding.

[processingjs.org] obsolete link to lighthouse for reporting bugs

I'm reporting this here because https://github.com/processing-js/processing-js.github.io doesn't seem to have an issue tracker.

At http://processingjs.org/reference/
where it says "If you encounter any problems with these commands or their documentation please file a bug"
the link points to:
http://lighthouseapp.com/signup?account%5Bname%5D=processing-js

which no longer exists (since a prettly long time ago, if I'm not mistaken)

[processingjs.org] param() incorrectly marked as not implemented

I'm reporting this here because https://github.com/processing-js/processing-js.github.io doesn't seem to have an issue tracker.

At http://processingjs.org/reference/ param() is marked as "not yet implemented" (and consistently, its documentation page is missing).
But the method is implemented and it works.

I hope you're not planning to remove it.

PImage still lives in Processing.js instead of its own file

The latest code seems to be missing PImage in https://github.com/processing-js/processing-js/tree/master/src/Objects ... entirely

Help > Quickstart for Javascript Devs gives page not found

It links to http://processingjs.org/reference/articles/jsQuickStart which is missing.

Gamepad support?

Is it possible to support gamepad input in processing.js? If so, a brief overview of how to do it would be much appreciated. :)

CHORD is not implemented

In the Java implementation of processing, there is a constant called CHORD defined, this is used for the drawing of arcs. I see that there was an issue opened on lighthouse, but it still doesn't work. I should get this , from this code

arc(50, 50, 80, 80, 0, PI+QUARTER_PI, 2);

but nothing shows up, and I see the error: Processing.js: Unable to execute pjs sketch: ReferenceError: 'CHORD' is undefined in the browser console.

The value of CHORD in Java processing is the int 2, and when I tried using 2 instead of CHORD in processing.js, I got this shape:

Loading a sketch spawns a new instance of the IDE, even if no code had been written yet

If Processing is started, without any code being written but the user instead picking file -> load or file -> recent, a new instance of Processing gets fired up, leading to two instances being open - one empty (the original Processing instance) and one loaded with meaningful code.

It would be nicer if a project-load by a not-used-for-writing-code-yet instance would instead load that project into the still empty instance, rather than spawning a new IDE instance

Not supported in Chrome

Just wondering, why PJS is not supported in Chrome ? (I know this is silly question, consider me as a beginner).
What kind of security reasons are there, because of which it is not supported by Chrome but Firefox supports it ?

touch events not working after v1.4.1

When I try to use the touch events with a version of processing.js after 1.4.1 I get the following error in the console: "Uncaught ReferenceError: eventHandlers is not defined" and the touch events are not working, when using 1.4.1 it works but i get another message in the console: "Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.".
I used the example code from this page: http://www.bradchen.com/blog/2011/04/processing-js-touch-events
This problem occurred with chrome on android, safari on iOS and when using the touch screen emulator of chrome on windows to try it on the pc.
When using v1.4.1 it works, with v1.4.7 and after it doesn't and I get the first error message.

Canvas performance degrades when focused

Hi,
I'm experiencing this bug described here:
http://stackoverflow.com/questions/6194791/focusing-on-the-canvas-element-degrades-performance-of-processing-js-page

In my case I am quite confident that my HTML is well formatted. It's such a weird bug that I'm not really sure what to do and how to debug. Any help is very appreciated.
It's my uni project so the whole code is here:
https://github.com/groupnoto/semicolon/

Thanks

p.random is not randomised on startup.

I'm seeing the same random numbers when restarting a sketch on a page, suggesting that p.random() is seeded with the same value when Processing.js gets loaded.

Noise has always the same seed

I always get the same pattern, even though I'm applying random numbers to noiseSeed each time mouse is pressed. Even without calling the noiseSeed function the pattern is always the same each time I run the sketch.
It seems that it's not a problem with the sketch, noiseSeed works as expected on Java mode.

Link for more information and code: http://forum.processing.org/two/discussion/8858/does-noiseseed-work-on-javascript-mode#Item_2

nfc not behaving as exepected in javascript

In JavaScript mode, the following code does produce the desired result

float f = 42525.34343;
String fi = nfc(f, 2);
println(fi); // Should print "42,525.34", but returns "42,525" instead

This behaves as expected in Java mode.

(Confirmed broken in JavaScript Processing release 2.2.1 and 3.05a)

submodule "The-Nature-of-Code" broken

After clone this repo, if I run git submodule, it will show:

No submodule mapping found in .gitmodules for path 'test/parser/The-Nature-of-Code'

Javascript object notation in a return statement is butchered

The code:

void update()
{
    return {this: "Will Fail"};
}

incorrectly compiles into this (note the extra semicolon after "Will Fail"):

// this code was autogenerated from PJS
(function($p) {

function update() {
return {
this: "Will Fail";
};
}
$p.update = update;
})

This doesn't happen if you put it in parenthesis:

void update()
{
    return ({this: "Won't Fail"});
}

I remember that an earlier version of Processing didn't do this. I don't remember which version though.

Some links in README.md

Looking at the tortuous route of #97, could you link at the README to fjenett/javascript-mode-processing and processing/processing, with some description of what each one is? I don't mean to be a pain, but it helps to not have to post issues on three separate repos.

implement loadJSONObject

Processing 2.0 loadJSONObject is very nice. However, it is not implemented in processing.js. Would this be relatively easy to do?

processingjs in cocoonjs?

I'm trying to get a minimal processingjs sketch to work with cocoonjs. The sketch works as expected in Firefox, but when ran from the cocoonjs launcher app, I get the following stack trace:

Any ideas how fix/sidestep this issue?

Thanks!

No consistent way to apply a matrix

Expected result:

Bug: None of the black box lines shown above are drawn

Code:

void setup()
{
  size(200, 200, P3D);
}

void draw()
{
  background(0,0,128);
  noFill();

  lights();

  camera(1000, 0, 0,
         0, 0, 0,
         0, 1, 0);

  PMatrix3D mx = new PMatrix3D();

  // This works in Java mode but not JavsScript mode
  applyMatrix(mx);

/*
  // This works in JavaScript mode but not Java mode
  applyMatrix(mx.elements[0],  mx.elements[1],  mx.elements[2],  mx.elements[3],
              mx.elements[4],  mx.elements[5],  mx.elements[6],  mx.elements[7],
              mx.elements[8],  mx.elements[9],  mx.elements[10], mx.elements[11],
              mx.elements[12], mx.elements[13], mx.elements[14], mx.elements[15]);

  // This works in Java mode but not JavaScript mode
  applyMatrix(mx.m00, mx.m01, mx.m02, mx.m03,
              mx.m10, mx.m11, mx.m12, mx.m13,
              mx.m20, mx.m21, mx.m22, mx.m23,
              mx.m30, mx.m31, mx.m32, mx.m33);
 */

  box(600, 500, 400);
}

Is support for TIFF in the roadmap?

I know that modern browsers dont support TIFF rendering. Is there any plan to include TIFF parsing and rendering as part of your library in the future?

Syntax errors do not provide line number or other details

Syntax errors in the processing code typically produce syntax errors in the generated Javascript. The resulting SyntaxException does not provide any useful information about the line number with the error. I'd like to use processing.js for an intro to programming class but am concerned the error reporting will be a source of frustration. I'm interested in fixing this, but would like to discuss the options before I take it on. It seems like the possible options are either:

enhance the existing existing parser to provide more error checking and diagnostics
use a full parser generator (PEG.js or similar) and rely on that to provide error details. Continue to use the existing parser for codegen.
bite the bullet and use a parser generator for everything including codegen.
#2 seems like the easiest, and would be a necessary prerequisite for #3 anyways. Thoughts?

p.randomSeed turns a function into a number

currentRandom is the internal random() function, but randomSeed does this:

    p.randomSeed = function(seed) {
      currentRandom = (new Marsaglia(seed)).nextDouble;
    };

this turns a function handle into a number primitive. Bad mojo.

Update the guides to explain that "char" is an incredibly dangerous datatype

Because JavaScript cannot model it (JS can only do numeric, or string, but not a string-that's-also-a-16-bit-number)

Mouse clicks not being recognized

Just set up a processing.js page with my processing sketch which runs fine in desktop version of processing and registers the mouse clicks and displays circles and line corresponding to the mouseX and mouseY but when living on web with processing.js these clicks are not recognized, rest of file is working as the image displayed is from an XML file that is loaded in the processing sketch

www.shanepisko.com/pijektor

omitting endShape() fails differently than in Java version

A student of mine failed to call endShape() at the end of her drawing operation, in "static" mode. The java version runs and shows the graphics nonetheless, but the JS version shows just the background. Perhaps pjs needs to fail in the same way by adding safety calls to endShape() when needed.

example code:

size(500, 200);
background(92, 207, 234);
translate(width/2, 1);
noStroke();

for (int i=0; i<20; i++) {
  beginShape(TRIANGLES);
  fill(247, 120, 190);
  vertex(0, 50);
  vertex(-10, 70);
  vertex(10, 70);
  endShape();
}

P3D does not seem to like pushStyle or shapes with holes

Expected output:

Bug output:

Bug output with push/popStyle commented - the hole is filled in:

Code:

// Note this sketch works fine in Java-mode, and if you switch down to 2D
// it will work fine in JavaScript-mode too
size(250,250,P3D);

pushStyle();
noStroke();

beginShape();
vertex( 50,  50);
vertex(100, 100);
vertex(100, 150);
vertex(150, 150);
vertex(150, 100);
vertex(100, 100);
vertex( 50,  50);
vertex(200,  50);
vertex(200, 200);
vertex(50,  200);
endShape(CLOSE);

popStyle();

stroke(0);
noFill();
rect(50, 50, 150, 150);
rect(100, 100, 50, 50);

`char` cannot be correctly supported by JS, and should be documented in guides

Per @Pomax : char cannot be correctly supported by JS, so we have that fact documented in our guides, and will not try to make it work correctly, since making it work correctly for one case (treating it as string in context X) automatically breaks it for the other (now it won't work as int in that same context). [...] that is an excellent question, actually. It's supposed to be in the quick start guides (http://processingjs.org/articles/jsQuickStart.html and http://processingjs.org/articles/p5QuickStart.html) but for some reason that entry is no longer listed.

This is quoted from #66; I haven't seen an open issue explicitly referencing it, so here is one.

Improper cast from float to int

Some difference for float between Java Processing and Processing.js. For example,

float xinc = 4.99;
float currx = (int)(200*xinc);

The result is 997.0 in Processing.
The result is 998 in Processing.js.

Initially thought it was a int casting bug in Processing.js. Maybe the issue is that the value in Processingjs is not a float so the end values are different? Any way to get the same values in Processingjs ?

view npm-debug.log

$ npm install processing

[email protected] install /Users/julz/node_modules/processing/node_modules/canvas
node-gyp rebuild

Package cairo was not found in the pkg-config search path.
Perhaps you should add the directory containing cairo.pc' to the PKG_CONFIG_PATH environment variable No package 'cairo' found gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error:gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack at ChildProcess.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:810:12)
gyp ERR! System Darwin 12.5.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/julz/node_modules/processing/node_modules/canvas
gyp ERR! node -v v0.10.31
gyp ERR! node-gyp -v v1.0.1
gyp ERR! not ok

[email protected] install /Users/julz/node_modules/processing/node_modules/jsdom/node_modules/contextify
node-gyp rebuild

Traceback (most recent call last):
File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py", line 18, in
sys.exit(gyp.script_main())
File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/init.py", line 534, in script_main
return main(sys.argv[1:])
File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/init.py", line 527, in main
return gyp_main(args)
File "/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/init.py", line 491, in gyp_main
'cwd': os.getcwd(),
OSError: [Errno 2] No such file or directory
gyp ERR! configure error
gyp ERR! stack Error: gyp failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:343:16)
gyp ERR! stack at ChildProcess.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:810:12)
gyp ERR! System Darwin 12.5.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/julz/node_modules/processing/node_modules/jsdom/node_modules/contextify
gyp ERR! node -v v0.10.31
gyp ERR! node-gyp -v v1.0.1
gyp ERR! not ok
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get their info via:
npm ERR! npm owner ls canvas
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 12.5.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "processing"
npm ERR! cwd /Users/julz
npm ERR! node -v v0.10.31
npm ERR! npm -v 2.0.0-beta.0
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/julz/npm-debug.log
npm ERR! not ok code

view npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'install', 'processing' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink /usr/local/bin/node
5 verbose config Skipping project config: /Users/julz/.npmrc. (matches userconfig)
6 verbose cache add [ 'processing', null ]
7 verbose cache add spec="processing" args=["processing",null]
8 verbose parsed spec { raw: 'processing',
8 verbose parsed spec scope: null,
8 verbose parsed spec name: 'processing',
8 verbose parsed spec rawSpec: '',
8 verbose parsed spec spec: '',
8 verbose parsed spec type: 'range' }
9 verbose addNamed [ 'processing', '' ]
10 verbose addNamed [ null, '' ]
11 silly lockFile d5dfeb1b-processing processing@
12 verbose lock processing@* /Users/julz/.npm/d5dfeb1b-processing.lock
13 silly addNameRange { name: 'processing', range: '', hasData: false }
14 verbose mapToRegistry name processing
15 verbose mapToRegistry uri https://registry.npmjs.org/processing
16 verbose request on initialization, where is /processing
17 verbose request after pass 1, where is /processing
18 verbose request url raw /processing
19 verbose request resolving registry [ 'https://registry.npmjs.org/', './processing' ]
20 verbose request after pass 2, where is https://registry.npmjs.org/processing
21 verbose request no auth needed
22 info retrier registry request attempt 1 at 17:35:54
23 verbose request id 33663dd8f7229546
24 verbose etag "2QZNH5ICT8DI4Y6TW5ZAHD9PA"
25 http request GET https://registry.npmjs.org/processing
26 http 304 https://registry.npmjs.org/processing
27 silly registry.get cb [ 304,
27 silly registry.get { date: 'Thu, 28 Aug 2014 07:35:55 GMT',
27 silly registry.get server: 'Apache',
27 silly registry.get via: '1.1 varnish',
27 silly registry.get 'last-modified': 'Thu, 28 Aug 2014 07:35:55 GMT',
27 silly registry.get 'cache-control': 'max-age=60',
27 silly registry.get etag: '"2QZNH5ICT8DI4Y6TW5ZAHD9PA"',
27 silly registry.get 'x-served-by': 'cache-syd1623-SYD',
27 silly registry.get 'x-cache': 'MISS',
27 silly registry.get 'x-cache-hits': '0',
27 silly registry.get 'x-timer': 'S1409211355.207800,VS0,VE238',
27 silly registry.get vary: 'Accept',
27 silly registry.get 'content-length': '0',
27 silly registry.get 'keep-alive': 'timeout=10, max=50',
27 silly registry.get connection: 'Keep-Alive' } ]
28 verbose etag https://registry.npmjs.org/processing from cache
29 silly addNameRange number 2 { name: 'processing', range: '', hasData: true }
30 silly addNameRange versions [ 'processing', [ '0.0.1', '0.1.0', '0.2.0' ] ]
31 verbose addNamed [ 'processing', '0.2.0' ]
32 verbose addNamed [ '0.2.0', '0.2.0' ]
33 silly lockFile d6b2159d-processing-0-2-0 [email protected]
34 verbose lock [email protected] /Users/julz/.npm/d6b2159d-processing-0-2-0.lock
35 silly lockFile d6b2159d-processing-0-2-0 [email protected]
36 silly lockFile d6b2159d-processing-0-2-0 [email protected]
37 silly lockFile d5dfeb1b-processing processing@*
38 silly lockFile d5dfeb1b-processing processing@*
39 silly resolved [ { author:
39 silly resolved { name: 'Seiya Konno',
39 silly resolved email: '[email protected]',
39 silly resolved url: 'http://null.ly' },
39 silly resolved name: 'processing',
39 silly resolved description: 'Processing.js for Node.js',
39 silly resolved version: '0.2.0',
39 silly resolved homepage: 'https://github.com/uniba/node-processing',
39 silly resolved repository: { url: '[email protected]:uniba/node-processing.git' },

Memory leak in createGraphics

If createGraphics is used in draw then it leaks memory quite heavily. I assume it saves graphics object somewhere in global object. It might be expected behaviour, I don't know, but documentation says nothing about it. I think it either should be fixed or documentation updated to state that createGraphics should be used only in setup.

processingjs.org links to lighthouseapp.com, not github

The link for "Bug Tracker" seems outdated in the processingjs.org website.

Help understanding and building

I'm here: http://processingjs.org/tools/processing-helper.html

And I'm plugging in code from quick learn, and it's generating process.js but it won't run what it's generate; if I copy and paste it in.

I was hoping of seeing this as an extension of canvas api... But with just a different name space... Can process and the canvas rendering2dcontext be use at the same time?

The quick learn does not truly help those of us with no knowledge of processing.

I'm looking for function and objects;

Process.setup = function(){

//I don't mind this at all... As long as it work

}

I'm not a java person I favor c/c++ more than java... And other language.

Do process deal with the physic of collision and hit detection?