Merge branch 'master' of github.com:processing/p5.js

Author: Lauren McCarthy

Gruntfile.js

@@ -142,7 +142,8 @@ module.exports = function(grunt) {
             'polargeometry': 'src/var/polargeometry',
             'shim': 'src/var/shim',
             'reqwest': 'node_modules/reqwest/reqwest',
-            'filters': 'src/image/filters'
+            'filters': 'src/image/filters',
+            'utils.color_utils': 'src/utils/color_utils'
           },
           useStrict: true,
           wrap: {

README.md

@@ -8,9 +8,9 @@ Using the original metaphor of a software sketchbook, p5.js has a full set of dr
 
 p5.js is a new interpretation, not an emulation or port, and it is in active development. An official editing environment is coming soon, as well as many more features!
 
-If you already know the basics of JS or Processing, the [p5.js overview](https://github.com/lmccart/p5.js/wiki/p5.js-overview) wiki page is a good place to start. The [frequently asked questions](https://github.com/lmccart/p5.js/wiki/Frequently-Asked-Questions) might also be helpful.
+If you already know the basics of JS or Processing, the [p5.js overview](https://github.com/processing/p5.js/wiki/p5.js-overview) wiki page is a good place to start. The [frequently asked questions](https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions) might also be helpful.
 
-If you have found a bug in the p5.js library, you can file it here under the [“issues” tab](https://github.com/lmccart/p5.js/issues). 
+If you have found a bug in the p5.js library, you can file it here under the [“issues” tab](https://github.com/processing/p5.js/issues). 
 
 ##p5.js library
 
@@ -19,18 +19,18 @@ You can [download the p5.js library here](http://p5js.org/download) or use `lib/
 ##Learning
 
 * [Get Started](http://p5js.org/get-started) — Create and run your first sketch!
-* [p5.js overview](https://github.com/lmccart/p5.js/wiki/p5.js-overview) — An overview of the main features and functionality of p5.js.
+* [p5.js overview](https://github.com/processing/p5.js/wiki/p5.js-overview) — An overview of the main features and functionality of p5.js.
 * [Reference](http://p5js.org/reference) — The functionality supported by p5.js.
 * [Learn](http://p5js.org/learn) — Tutorials and short, prototypical examples exploring the basics of p5.js.
 * [Forum](http://forum.processing.org/two/) — Ask and answers questions about how to make things with p5.js here.
 * [Libraries](http://p5js.org/libraries) — Extend p5 functionality to interact with HTML, manipulate sound, and more!
-* [FAQ](https://github.com/lmccart/p5.js/wiki/Frequently-Asked-Questions)
+* [FAQ](https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions)
 
 ##Get Involved
 
 p5.js is a collaborative project created by many individuals, and you are invited to help. All types of involvement are welcome. See the [contribute section](http://p5js.org/contribute) to get started!
 
-Developers, check out the [development](https://github.com/lmccart/p5.js/wiki/Development) wiki page for more in-depth details about contributing code, bug fixes, and documentation.
+Developers, check out the [development](https://github.com/processing/p5.js/wiki/Development) wiki page for more in-depth details about contributing code, bug fixes, and documentation.
 
 
 

examples/addons/p5.dom/instance/sketch.js

@@ -1,43 +1,43 @@
-var s0 = function( sketch ) {
+var sketch0 = function( p ) {
 
   var v;
   var h1;
 
-  sketch.setup = function() {
-    sketch.createCanvas(400, 400);
+  p.setup = function() {
+    p.createCanvas(400, 400);
 
-    h1 = sketch.createElement('h1', 'press a key');
+    h1 = p.createElement('h1', 'press a key');
     h1.position(40, 250);
     h1.mousePressed(function() {
       v.pause();
       h1.html('press a key');
     });
 
-    v = sketch.createVideo('../fingers.mov');
+    v = p.createVideo('../fingers.mov');
     v.hide();
   };
 
-  sketch.draw = function() {
-    sketch.background(30, 100, 200);
-    sketch.image(v, 30, 30, 200, 200);
+  p.draw = function() {
+    p.background(30, 100, 200);
+    p.image(v, 30, 30, 200, 200);
   };
 
-  sketch.keyPressed = function() {
+  p.keyPressed = function() {
     v.loop();
     h1.html('click here to pause');
   };
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     console.log('press')
   }
 
-  sketch.mouseReleased = function() {
+  p.mouseReleased = function() {
     console.log('released')
   }
 
 };
 
-var myp5_0 = new p5(s0, 'div0');
+var myp5_0 = new p5(sketch0, 'div0');
 
 
 

examples/async/loadImage/instance/sketch.js

@@ -9,21 +9,21 @@
 // This is called asynchronous loading, because it happens whenever
 // the computer is done and ready, not necessarily when you call it.
 
-var s = function(sketch) {
+var sketch = function(p) {
   var largeImage;
 
-  sketch.preload = function() {
-    largeImage = sketch.loadImage('test.gif'); // preloading the image guarantees it will be ready by setup()
+  p.preload = function() {
+    largeImage = p.loadImage('test.gif'); // preloading the image guarantees it will be ready by setup()
   };
 
-  sketch.setup = function() {
-    sketch.createCanvas(1300, 600);
-    sketch.image(largeImage, 0, 0);
+  p.setup = function() {
+    p.createCanvas(1300, 600);
+    p.image(largeImage, 0, 0);
   };
 
-  sketch.draw = function() {
+  p.draw = function() {
   	// do nothing
   };
 }
 
-var myp5 = new p5(s);
+var myp5 = new p5(sketch);

examples/instantiation-instance/case0/sketch.js

@@ -1,18 +1,19 @@
 // CASE 0: no node specified
 // Canvas is auto-generated and appended to body.
-var s = function( sketch ) {
+
+var sketch = function( p ) {
 
   var gray = 0; 
 
-  sketch.draw = function() {
-    sketch.background(gray);
-    sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
+  p.draw = function() {
+    p.background(gray);
+    p.rect(p.width/2, p.height/2, 50, 50);
   }
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     gray += 10;
   }
 
 };
 
-var myp5 = new p5(s);
+var myp5 = new p5(sketch);

examples/instantiation-instance/case1/sketch.js

@@ -1,8 +1,7 @@
 // CASE 1: no node specified, createCanvas called
 // Canvas is generated and appended to body.
 
-
-var s = function( p ) {
+var sketch = function( p ) {
 
   var gray = 0; 
 
@@ -21,5 +20,4 @@ var s = function( p ) {
 
 };
 
-var myp5 = new p5(s);
-
+var myp5 = new p5(sketch);

examples/instantiation-instance/case3/sketch.js

@@ -1,22 +1,23 @@
 // CASE 2: node specified, node is a DIV ELEMENT ID
 // A canvas with p5 attached will be inserted inside of it.
-var s = function( sketch ) {
+
+var sketch = function( p ) {
 
   var gray = 0; 
 
-  sketch.setup = function() {
-    sketch.createCanvas(400, 400);
+  p.setup = function() {
+    p.createCanvas(400, 400);
   };
 
-  sketch.draw = function() {
-    sketch.background(gray);
-    sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
+  p.draw = function() {
+    p.background(gray);
+    p.rect(p.width/2, p.height/2, 50, 50);
   }
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     gray += 10;
   }
 
 };
 
-var myp5 = new p5(s, 'p5-container');
+var myp5 = new p5(sketch, 'p5-container');

examples/instantiation-instance/case4/sketch.js

@@ -1,25 +1,26 @@
 // CASE 2: node specified, node is a DIV ELEMENT
 // A canvas with p5 attached will be inserted inside of it.
-var s = function( sketch ) {
+
+var sketch = function( p ) {
 
   var gray = 0; 
 
-  sketch.setup = function() {
-    sketch.createCanvas(400, 400);
+  p.setup = function() {
+    p.createCanvas(400, 400);
   };
 
-  sketch.draw = function() {
-    sketch.background(gray);
-    sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
+  p.draw = function() {
+    p.background(gray);
+    p.rect(p.width/2, p.height/2, 50, 50);
   }
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     gray += 10;
   }
 
 };
 
 window.onload = function() {
   var containerNode = document.getElementById( 'p5-container' );
-  var myp5 = new p5(s, containerNode);
+  var myp5 = new p5(sketch, containerNode);
 };

examples/instantiation-instance/case5/sketch.js

@@ -1,19 +1,20 @@
 // CASE 3: alternate syntax
 // Canvas is auto-generated and appended to body.
-var myp5 = new p5(function( sketch ) {
+
+var myp5 = new p5(function( p ) {
 
   var gray = 0; 
 
-  sketch.setup = function() {
-    sketch.createCanvas(400, 400);
+  p.setup = function() {
+    p.createCanvas(400, 400);
   };
 
-  sketch.draw = function() {
-    sketch.background(gray);
-    sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
+  p.draw = function() {
+    p.background(gray);
+    p.rect(p.width/2, p.height/2, 50, 50);
   }
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     gray += 10;
   }
 

examples/instantiation-instance/case6/sketch.js

@@ -1,74 +1,74 @@
-var s0 = function( sketch ) {
+var sketch0 = function( p ) {
 
   var gray = 0;
   var h = 10; 
 
-  sketch.setup = function() {
-    var cnv = sketch.createCanvas(400, 400);
+  p.setup = function() {
+    var cnv = p.createCanvas(400, 400);
     cnv.mousePressed(increaseH);
-    sketch.rectMode(sketch.CENTER);
-    sketch.print("both gray values should change, rect in sketch0 should change only when clicking on canvas0");
+    p.rectMode(p.CENTER);
+    p.print("both gray values should change, rect in sketch0 should change only when clicking on canvas0");
   };
 
-  sketch.draw = function() {
-    sketch.background(gray);
-    sketch.rect(sketch.width/2, sketch.height/2, h, h);
+  p.draw = function() {
+    p.background(gray);
+    p.rect(p.width/2, p.height/2, h, h);
   };
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     gray += 10;
   };
 
-  sketch.mouseMoved = function() {
-    sketch.print("sketch0 x:"+sketch.mouseX+" y:"+sketch.mouseY);
+  p.mouseMoved = function() {
+    p.print("sketch0 x:"+p.mouseX+" y:"+p.mouseY);
   };
 
   function increaseH() {
     h += 5;
   }
 };
 
-var myp5_0 = new p5(s0, 'div0');
+var myp5_0 = new p5(sketch0, 'div0');
 
 
 
 
 
-var s1 = function( sketch ) {
+var sketch1 = function( p ) {
 
   var gray = 0; 
 
-  sketch.setup = function() {
-    sketch.createCanvas(400, 400);
+  p.setup = function() {
+    p.createCanvas(400, 400);
   };
 
-  sketch.draw = function() {
-    sketch.background(255, 0, 100);
-    sketch.fill(gray);
-    sketch.rect(sketch.width/2, sketch.height/2, 50, 50);
+  p.draw = function() {
+    p.background(255, 0, 100);
+    p.fill(gray);
+    p.rect(p.width/2, p.height/2, 50, 50);
   };
 
-  sketch.mousePressed = function() {
+  p.mousePressed = function() {
     gray += 10;
   };
 
-  sketch.mouseMoved = function() {
-    console.log("sketch1 x:"+sketch.mouseX+" y:"+sketch.mouseY);
+  p.mouseMoved = function() {
+    console.log("sketch1 x:"+p.mouseX+" y:"+p.mouseY);
   };
 
-  sketch.mouseReleased = function() {
+  p.mouseReleased = function() {
     console.log("mouseReleased");
   };
 
-  sketch.keyPressed = function() {
+  p.keyPressed = function() {
     console.log("keyPressed");
   };
 
-  sketch.mouseDragged = function() {
+  p.mouseDragged = function() {
     console.log("mouseDragged");
   };
 };
 
 
-var myp5_1 = new p5(s1, 'div1');
+var myp5_1 = new p5(sketch1, 'div1');