Loading...
Processing Forum
Recent Topics
All Forums
Screen name:
hail
hail's Profile
1
Posts
0
Responses
0
Followers
Activity Trend
Last 30 days
Last 30 days
Date Interval
From Date :
To Date :
Go
Loading Chart...
Posts
Responses
PM
Show:
All
Discussions
Questions
Expanded view
List view
Private Message
Playing pde files online
[1 Reply]
09-Jul-2013 10:14 PM
Forum:
Processing with Other Languages
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();
}
}
«Prev
Next »
Moderate user : hail
Forum