forked from processing-js/processing-js
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch '0.9.7' of http://github.com/annasob/processing-js.git i…
…nto ticket-229-closure Conflicts: processing.js TODO: sketch fonts, color.pde test
- Loading branch information
Showing
149 changed files
with
16,000 additions
and
3,440 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,3 +23,4 @@ Yuri Delendik | |
| Zhibin Huang | ||
| John Turner | ||
| Mike Kamermans | ||
| Tom Brown | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="../../processing.js"></script> | ||
| <link rel="stylesheet" href="../style.css"/></head> | ||
| <body><h1><a href="http://processingjs.org/">Processing.js</a></h1> | ||
| <h2>Advanced processing.js via JavaScript</h2> | ||
|
|
||
| <p>Processing.js Cube</p> | ||
| <p><em>Note: runs via a web server or requres local files access in the web browser settings.</em></p> | ||
| <p>Converted to the JavaScript language from the Processing code<br> | ||
| Original souce code : <a href="http://processing.org/learning/3d/texturecube.html">TexturedCube</a> by Dave Bollinger.<br> | ||
| <canvas id="canvas1" width="200" height="200"></canvas> | ||
| </p> | ||
|
|
||
| <script id="script1" type="text/javascript"> | ||
|
|
||
| // Attaching js code to the canvas by using a sketch object | ||
|
|
||
| var sketch = new Processing.Sketch(); | ||
| // define 3D context | ||
| sketch.use3DContext = true; | ||
| // preload the images | ||
| sketch.imageCache.add("pjs.png"); | ||
| // attach function (also, can be specified as the single parameter | ||
| // in the Processing.Sketch object constructor) | ||
| sketch.attachFunction = function(processing) { | ||
| var tex; | ||
| var rotx = Math.PI/4; | ||
| var roty = Math.PI/4; | ||
|
|
||
| processing.setup = function() { | ||
| processing.size(640, 360, processing.P3D); | ||
| tex = processing.loadImage("pjs.png"); | ||
| processing.textureMode(processing.NORMALIZED); | ||
| processing.fill(255); | ||
| processing.stroke(processing.color(44,48,32)); | ||
| }; | ||
|
|
||
| processing.draw = function() { | ||
| processing.background(0); | ||
| processing.noStroke(); | ||
| processing.translate(processing.width/2.0, | ||
| processing.height/2.0, -100); | ||
| processing.rotateX(rotx); | ||
| processing.rotateY(roty); | ||
| processing.scale(90); | ||
| texturedCube(tex); | ||
| } | ||
|
|
||
| function texturedCube(tex) { | ||
| processing.beginShape(processing.QUADS); | ||
| processing.texture(tex); | ||
|
|
||
| // Given one texture and six faces, we can easily set up the uv coordinates | ||
| // such that four of the faces tile "perfectly" along either u or v, but the other | ||
| // two faces cannot be so aligned. This code tiles "along" u, "around" the X/Z faces | ||
| // and fudges the Y faces - the Y faces are arbitrarily aligned such that a | ||
| // rotation along the X axis will put the "top" of either texture at the "top" | ||
| // of the screen, but is not otherwised aligned with the X/Z faces. (This | ||
| // just affects what type of symmetry is required if you need seamless | ||
| // tiling all the way around the cube) | ||
|
|
||
| // +Z "front" face | ||
| processing.vertex(-1, -1, 1, 0, 0); | ||
| processing.vertex( 1, -1, 1, 1, 0); | ||
| processing.vertex( 1, 1, 1, 1, 1); | ||
| processing.vertex(-1, 1, 1, 0, 1); | ||
|
|
||
| // -Z "back" face | ||
| processing.vertex( 1, -1, -1, 0, 0); | ||
| processing.vertex(-1, -1, -1, 1, 0); | ||
| processing.vertex(-1, 1, -1, 1, 1); | ||
| processing.vertex( 1, 1, -1, 0, 1); | ||
|
|
||
| // +Y "bottom" face | ||
| processing.vertex(-1, 1, 1, 0, 0); | ||
| processing.vertex( 1, 1, 1, 1, 0); | ||
| processing.vertex( 1, 1, -1, 1, 1); | ||
| processing.vertex(-1, 1, -1, 0, 1); | ||
|
|
||
| // -Y "top" face | ||
| processing.vertex(-1, -1, -1, 0, 0); | ||
| processing.vertex( 1, -1, -1, 1, 0); | ||
| processing.vertex( 1, -1, 1, 1, 1); | ||
| processing.vertex(-1, -1, 1, 0, 1); | ||
|
|
||
| // +X "right" face | ||
| processing.vertex( 1, -1, 1, 0, 0); | ||
| processing.vertex( 1, -1, -1, 1, 0); | ||
| processing.vertex( 1, 1, -1, 1, 1); | ||
| processing.vertex( 1, 1, 1, 0, 1); | ||
|
|
||
| // -X "left" face | ||
| processing.vertex(-1, -1, -1, 0, 0); | ||
| processing.vertex(-1, -1, 1, 1, 0); | ||
| processing.vertex(-1, 1, 1, 1, 1); | ||
| processing.vertex(-1, 1, -1, 0, 1); | ||
|
|
||
| processing.endShape(); | ||
| } | ||
|
|
||
| // mouse event | ||
| processing.mouseDragged = function() { | ||
| var rate = 0.01; | ||
| rotx += (processing.pmouseY-processing.mouseY) * rate; | ||
| roty += (processing.mouseX-processing.pmouseX) * rate; | ||
| }; | ||
| }; | ||
|
|
||
| var canvas = document.getElementById("canvas1"); | ||
| // attaching the sketch to the canvas | ||
| var p = new Processing(canvas, sketch); | ||
|
|
||
| </script> | ||
|
|
||
| <div style="height:0px;width:0px;overflow:hidden;"></div> | ||
|
|
||
| <pre id="code1"></pre> | ||
| <script> | ||
| document.getElementById("code1").textContent = document.getElementById("script1").text; | ||
| </script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.