processing · lmccart · Jul 25, 2015 · Jul 10, 2015 · Jul 10, 2015 · Jul 10, 2015
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -157,6 +157,7 @@ module.exports = function(grunt) {
     browserify: {
       p5: {
         options: {
+          transform: ['brfs'],
           browserifyOptions: {
             standalone: 'p5'
           },

diff --git a/examples/3d/center_origin/index.html b/examples/3d/center_origin/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="">
+  <script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <style>
+    html, body {margin:0; padding:0;}
+  </style> 
+</head>
+<body>
+<p style="position: absolute; width:400px; left:50%; margin-left: -200px; text-align: center; color:green;">[0, 0, 0] is in the center of the screen by default</p>
+<script>
+(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
+</script>
+
+</body>
+</html>
diff --git a/examples/3d/center_origin/sketch.js b/examples/3d/center_origin/sketch.js
@@ -0,0 +1,29 @@
+function setup(){
+  createCanvas(windowWidth, windowHeight, 'webgl');
+}
+
+function draw(){
+
+  background(255);
+
+  translate(0, 0, -800);
+  rotateY(frameCount * 0.01);
+
+  var gap = 200;
+  var w = 100;
+  var h = 100;
+
+  for(var i = -2; i < 3; i++){
+    for(var j = -2; j < 3; j++){
+      fill( (i+2) * 40, (j+2) * 40, 0);
+      quad(
+        i * gap, j * gap, 0,
+        i * gap + w, j * gap, 0,
+        i * gap, j * gap + h, 0,
+        i * gap + w, j * gap + h/2 * (sin(frameCount * 0.1 + i + j) + 1), 0
+        );
+    }
+  }
+
+
+}
diff --git a/examples/3d/geometry/sketch.js b/examples/3d/geometry/sketch.js
@@ -7,47 +7,48 @@ var theta = 0;
 function draw(){
   background(255, 255, 255, 255);
 
-  translate(-120, 0, -170);
+  translate(-width/2, 0, -800);
+  normalMaterial();
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  plane(100, 100);
+  plane(80, 80);
   pop();
-  translate(50, 0, 0);
+  translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  box(100, 100, 100);
+  box(80, 80, 80);
   pop();
-  translate(50, 0, 0);
+  translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  cylinder(100, 100);
+  cylinder(80, 80);
   pop();
-  translate(50, 0, 0);
+  translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  cone(100, 100);
+  cone(80, 80);
   pop();
-  translate(50, 0, 0);
+  translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  torus(100, 20);
+  torus(80, 20);
   pop();
-  translate(50, 0, 0);
+  translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  sphere(100, 100);
+  sphere(80, 80);
   pop();
   theta += 0.05;
 }
diff --git a/examples/3d/light/index.html → examples/3d/immediateMode/index.html b/examples/3d/light/index.html → examples/3d/immediateMode/index.html
diff --git a/examples/3d/immediateMode/sketch.js b/examples/3d/immediateMode/sketch.js
@@ -0,0 +1,58 @@
+var theta = 0;
+
+function setup(){
+  createCanvas(windowWidth, windowHeight, 'webgl');
+}
+
+function draw(){
+
+  background('white');
+  colorMode(HSB);
+
+  translate(0, 0, -1000);
+
+  rotateY(frameCount * 0.01);
+
+  //point
+  stroke(0, 200, 200);
+  point(0, 0, 0);
+
+  //lines
+  translate(100, 0, 0);
+  push();
+  rotateX(frameCount * 0.01);
+  for(var i = 0 ; i < 12; i++){
+    var offset = i * PI / 6;
+    fill(i * 20, 100, 100);
+    line(0, 0, 0, 200 * sin(offset + frameCount*0.01), 200 * cos(offset + frameCount*0.01), 0);
+  }
+  pop();
+
+
+  //triangles
+  translate(400, 0, 0);
+  push();
+  for(var i = 0; i < 3; i++){
+  fill(i * 30 + 200, 100, 100);
+  translate(100, 50, 0);
+  triangle(
+    100, 0, 0, 
+    60 * sin(frameCount * 0.1 + i), 0, 0, 
+    0, 100, 0);
+  }
+  pop();
+
+
+  //triangle strip
+  translate(200, 0, 0);
+  for(var i = 0; i < 30; i++){
+    fill(i * 10, 120, 120);
+    translate(100, -50, 0);
+    beginShape('TRIANGLE_STRIP')
+    vertex(0, 0, (cos(frameCount * 0.1 + i) + 1) * 100);
+    vertex(0, 200, 100);  
+    vertex(100, 100, 100);  
+    vertex(100, 0, (sin(frameCount * 0.1 + i) + 1) * 100);
+    endShape();
+  }
+}
diff --git a/examples/3d/interaction/index.html b/examples/3d/interaction/index.html
@@ -12,10 +12,10 @@
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:green;">Press Mouse To Toggle The World</p>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:green; text-align: center;">Press Mouse To Toggle The World</p>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
 </script>
 
 </body>
-</html>
+</html>
diff --git a/examples/3d/interaction/sketch.js b/examples/3d/interaction/sketch.js
@@ -4,22 +4,27 @@ function setup(){
 
 function draw(){
   background(250, 250, 250, 255);
-  var radius = width / 6;
-  translate(-10, 0, -200);
+  var radius = width;
+  translate(0, 0, -1600);
   orbitControl();
 
   if(!mouseIsPressed){
     rotateY(frameCount * 0.001);
   }
 
+  normalMaterial();
   for(var i = 0; i <= 20; i++){
     for(var j = 0; j <= 20; j++){
       push();
       var a = j/20 * PI;
       var b = i/20 * PI
-      translate(sin(2 * a) * radius * sin(b), cos(b) * 50 , cos(2 * a) * radius * sin(b));
-      if(j % 2 === 0) box(60, 60, 60);
-      else cone(60, 60);
+      translate(sin(2 * a) * radius * sin(b), cos(b) * radius / 2 , cos(2 * a) * radius * sin(b));
+      if(j % 2 === 0) {
+        box(60, 60, 60);
+      }
+      else{
+        cone(60, 60);
+      }
       pop();
     }
   }

diff --git a/examples/3d/material/index.html b/examples/3d/material/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="">
+  <script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <style>
+    html, body {margin:0; padding:0;}
+  </style> 
+</head>
+<body>
+<script>
+(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
+</script>
+
+</body>
+</html>
diff --git a/examples/3d/light/sketch.js → examples/3d/material/sketch.js b/examples/3d/light/sketch.js → examples/3d/material/sketch.js
@@ -6,33 +6,34 @@ function setup(){
 
 function draw(){
   background(250, 250, 250, 255);
-
-  translate(-10, 0, -100);
   // directionalLight(153, 153, 153, .5, 0, -1);
   // ambientLight(153, 102, 0);
   // ambient(51, 26, 0);
+  translate(-100, 0, -1000);
   push();
   rotateX(theta * 0.1);
   rotateZ(theta);
   rotateY(theta * 0.1);
+  normalMaterial();
   box(60, 60, 60); 
   pop();
-  translate(30, 0, 0);
-  basicMaterial();
+  translate(300, 0, 0);
   push();
   rotateX(-theta * 0.1);
   rotateZ(-theta);
   rotateY(-theta * 0.1);
+  normalMaterial();
   sphere(60); 
-  translate(30, 0, 0);
+  translate(300, 0, 0);
+  basicMaterial(0, 255, 0);
   box(60,60,60);
   pop();
-  translate(30, 0, 0);
-  normalMaterial();
+  translate(300, 0, 0);
   push();
   rotateX(theta * 0.1);
   rotateZ(theta);
   rotateY(theta * 0.1);
+  basicMaterial(250, 0, 200);
   plane(60, 60); 
   pop();
   theta += 0.03;

diff --git a/examples/3d/performance/index.html b/examples/3d/performance/index.html
@@ -11,6 +11,7 @@
     html, body {margin:0; padding:0;}
   </style> 
 </head>
+<p style="position: absolute; width:300px; left:50%; text-align: center; margin-left: -150px; color:green;">1000 spheres, how's the speed?</p>
 <body>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()

diff --git a/examples/3d/performance/sketch.js b/examples/3d/performance/sketch.js
@@ -7,13 +7,14 @@ function setup(){
 function draw(){
   background(250, 250, 250, 255);
 
-  translate(-10, 0, -100);
+  translate(0, 0, -1500);
+  normalMaterial();
+  rotateY(frameCount * 0.01);
+
   for(var j = 0; j < 5; j++){
     push();
-    for(var i = 0; i < 100; i++){
-      translate(sin(theta + j) * 4, sin(theta + j) * 4, i * 0.001);
-      rotateX(theta * 0.1);
-      rotateY(theta);
+    for(var i = 0; i < 200; i++){
+      translate(sin(theta + j) * 100, sin(theta + j) * 100, i * 0.1);
       rotateZ(theta * 0.2);
       push();
       sphere(8); 

diff --git a/examples/3d/topleft_origin/index.html b/examples/3d/topleft_origin/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="">
+  <script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <style>
+    html, body {margin:0; padding:0;}
+  </style> 
+</head>
+<body>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; text-align: center; color:green;">[0, 0, 0] is in the top left corner now</p>
+<script>
+(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
+</script>
+
+</body>
+</html>
diff --git a/examples/3d/topleft_origin/sketch.js b/examples/3d/topleft_origin/sketch.js
@@ -0,0 +1,30 @@
+function setup(){
+  createCanvas(windowWidth, windowHeight, 'webgl');
+}
+
+function draw(){
+
+  background(255);
+
+  translate( -width/2, -height/2, -600);
+
+  rotateY(frameCount * 0.01);
+
+  var gap = 200;
+  var w = 100;
+  var h = 100;
+
+  for(var i = 0; i < 5; i++){
+    for(var j = 0; j < 5; j++){
+      fill( i * 40, j * 40, 0);
+      quad(
+        i * gap, j * gap, 0,
+        i * gap + w, j * gap, 0,
+        i * gap, j * gap + h, 0,
+        i * gap + w, j * gap + h/2 * (sin(frameCount * 0.1 + i + j) + 1), 0
+        );
+    }
+  }
+
+
+}
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     }
   ],
   "dependencies": {
+    "brfs": "^1.4.0",
     "reqwest": "^1.1.5"
   },
   "main": "./lib/p5.js",