2

I would like to utilize some of the 3D shapes in processing.js.

I see that if I was using the processing 'language' I could just 

import processing.webgl.*

And the compiler would ignore the import statement.

However I am currently coding in pure javascript and it isn't clear to me how to do this.

Can any one help?

EDIT

To more accurate about my problem, my setup function looks something like this:

p.setup = function() {
    p.size(100, 100, P3D);
}

And I receive P3D is undefined

rogermushroom
  • 5,486
  • 4
  • 42
  • 68

2 Answers2

1

The process of drawing 3D shapes in Processing v.s. Processing.js is almost identical. You don't need to import anything if you're only developing in Processing.js. Instead, just pass P3D, OPENGL or WEBGL when you call size:

void setup(){
  size(100, 100, P3D); // Can also be OPENGL or WEBGL
  translate(width/2, height/2);
  box(20);
}

EDIT

Here's a bit of HTML using Processing.js in pure JavaScript (I got the code from: http://js.processing.org/learning)

<script src="processing.js"></script>

<canvas id="cvs"></canvas>

<script>
function sketchProc(p) {
  // It makes more sense to use WEBGL if only developing in JavaScript
  p.size(100, 100, p.WEBGL);
  p.translate(p.width/2, p.height/2);
  p.box(20);
}

var canvas = document.getElementById("cvs");
var pjs = new Processing(canvas, sketchProc);
</script>
Andor
  • 358
  • 3
  • 11
  • Your comment lead me to the right answer but wasn't actually the right answer, if you convert your example method to a pure javascript I will give you the tick. – rogermushroom Feb 29 '12 at 14:35
0

So all I needed to do was change my size() call so it looked like this:

p.size(100, 100, p.P3D);

I needed to access the P3D constant through the processing object p.P3D.

rogermushroom
  • 5,486
  • 4
  • 42
  • 68