Playing pde files online
in
Processing with Other Languages
•
3 months ago
Hi Guys,
I am super new to Processing. I have made a few minor edits to the NoiseSphere script by David Pena.
It works perfect within processing, but when I try to open in a browser, it fails.
When I play from processing into javascript format, it loads the page with the black canvas and script details, but nothing else. just a black screen.
Any advice?
Here is the html calling the script:
- <!DOCTYPE html>
- <html>
- <head>
- <script src="processing-1.4.1.min.js"></script>
- </head>
- <body>
- <h1> this is a website</h1>
- <p id="demo">A paragraph </p>
- <canvas data-processing-sources="sphere.pde"></canvas>
- </body>
- </html>
And here is the pde file:
- /**
- * Uniform random distribution on the surface of a sphere.
- */
- int cuantos = 5000; // amount of hair
- Hair[] list ;
- float[] z = new float[cuantos];
- float[] phi = new float[cuantos];
- float[] largos = new float[cuantos];
- float radius;
- float rx = 0;
- float ry =0;
- void setup() {
- size(1024, 800, P3D); //sets the stage size
- radius = height/4; // defines the size of the object
- list = new Hair[cuantos];
- for (int i=0; i<cuantos; i++) {
- list[i] = new Hair();
- }
- noiseDetail(3); // defines the noise - how agitated the object is. (octave of noise or how many variants in the noise, amount the effect is applied)
- }
- void draw() {
- background(0); // sets background color
- translate(width/2, height/2); // sets the shape to appear centred in the screen
- float rxp = ((mouseX-(width/2))*0.005); // sets the speed of rotation based on horizontal mouse movement
- float ryp = ((mouseY-(height/2))*0.005); // sets the speed of rotation based on vertical mouse movement
- rx = (rx*0.9)+(rxp*0.1); // affects the sensitivity
- ry = (ry*0.9)+(ryp*0.1);
- rotateY(rx);
- rotateX(ry);
- fill(0); // color of the inner sphere
- noStroke(); // disables the stroke of the inner sphere
- sphere(radius);
- for (int i = 0;i < cuantos; i++) {
- list[i].dibujar();
- }
- }
- class Hair {
- float z = random(-radius, radius);
- float phi = random(TWO_PI);
- float largo = random(1.25, 1.15); // length of hair, randomness of lengths)
- float theta = asin(z/radius);
- void dibujar() {
- float off = (noise(millis() * 0.0005, sin(phi))-0.5) * 0.3;
- float offb = (noise(millis() * 0.0007, sin(z) * 0.01)-0.5) * 0.3;
- float thetaff = theta+off;
- float phff = phi+offb;
- float x = radius * cos(theta) * cos(phi);
- float y = radius * cos(theta) * sin(phi);
- float z = radius * sin(theta);
- float msx= screenX(x, y, z);
- float msy= screenY(x, y, z);
- float xo = radius * cos(thetaff) * cos(phff);
- float yo = radius * cos(thetaff) * sin(phff);
- float zo = radius * sin(thetaff);
- float xb = xo * largo;
- float yb = yo * largo;
- float zb = zo * largo;
- beginShape(LINES);
- stroke(0); // defines stroke color at line's base
- vertex(x, y, z);
- stroke(#444444); // defines stroke color at line's outer end
- vertex(xb, yb, zb);
- endShape();
- }
- }
1
