Processing Forum

Screen name:
mrkzhu

mrkzhu's Profile

3 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

ProcessingJS Sketch no displaying in mobile Safari/iPhone

[1 Reply]
- 28-Jun-2013 04:11 AM
- Forum: Processing with Other Languages
I've embedded a sketch I created onto my blog: http://kzhu.net/visualising-pi.html

Unfortunately I can't get it to display on iOS. I haven't been able to check on other mobile platforms.

Can anyone tell me what I'd need to do to fix this please.

Thanks!

Problem embedding Processing JS app on website

[2 Replies]
- 27-Jun-2013 09:50 AM
- Forum: Processing with Other Languages
Hi there I'm trying to embed the following sketch onto my website.

I am adding "

<script type= "text/javascript" src= "files/processing.js" ></script>

To the head of the page

and then using

<canvas id="pi_vis" data-processing-sources="files/sphere_master_v3.pde" width="600" height="600"></canvas>

When I preview the sketch in browser directly from processing I have no problem viewing it. When I try to serve it as a webpage though it's just blank.

Can anyone offer some suggestions?

Thanks

Sketch Code

------

import processing.opengl.*;

// Pi digits

String[] lines;

float ang = 0, ang2 = 0, ang3 = 0, ang4 = 0;

float px = 0, py = 0, pz = 0;

int renderCounter = 0;

//Define Sphere item size & Coordinates

float itemSize;

float radius = 100;

float theta = 0;

float phi = 0;

float thetaSpeed = PI/10;

float phiSpeed = PI/10;

int phiCounter;

Balls ba;

ArrayList items;

void setup()

{

size(600,600,OPENGL);

frameRate(50);

noStroke();



//load pi digits from file

String lines[] = loadStrings("pinumbers.txt");

ballArray = new ArrayList();



for (int i = 0; i < 400; i++)

{

// Increment phi once 20 balls have been placed

if (phiCounter == 20)

{

phi += phiSpeed;

phiCounter = 0;

}

// increment theta angle

theta += thetaSpeed;

phiCounter++; // counter for number of balls placed

// add balls items array

ballArray.add(new Balls(radius,theta,phi,lines[i]));



}

}

void draw()

{

// redraw background

background(255);

// define rotation increments

px = sin(radians(ang3)) * 170;

py = cos(radians(ang3)) * 300;

pz = sin(radians(ang4)) * 500;

translate(width/2 + px, height/2 + py, -700+pz);

rotateX(sin(radians(ang2)) * 120);

rotateY(sin(radians(ang2)) * 50);

rotateZ(sin(radians(ang2)) * 65);



// increment angle

ang3 += 2.0;

camera (px, py, pz, 250, 250, 250, 0, 1, 0);

translate(height/2, width/2, height/2);



for (int i = 0; i < 400; i++)

{

Balls ba = (Balls) ballArray.get(i); // Pull ball from arraylist

ba.render(); // draw ball

}



}

// Define the balls class

class Balls

{

float radius ;

float theta ;

float phi ;

float itemSize ;

Balls(float r, float t, float p, float i)

{

radius = r;

theta = t;

phi = p;

itemSize = i;

}



// Rendering the balls



public void render()

{

//convert radial coords to cartesian

float x = cos(theta) * sin(phi) * radius;

float y = sin(theta) * sin(phi) * radius;

float z = cos(phi) * radius;



//Mark our 3d space

pushMatrix();

//Move to the position of this item

translate(x,y,z);

//Set the fill colour

fill(0, 165, 153);

noStroke();

//Draw a circle

ellipse(0,0,itemSize,itemSize);

//Go back to our position in 3d space

popMatrix();

}

}

Problems rotating camera angle in OpenGL

[6 Replies]
- 25-Apr-2013 10:32 AM
- Forum: Programming Questions
I've created a sketch that plots different sized balls around the surface of a larger 3D sphere but I'm having trouble rotating the camera angle relative to the larger sphere.

I'm trying to compile this as javascript rather than java.

The Spherical part of the sketch is adapted from: http://blog.blprnt.com/blog/blprnt/processing-tutorial-spherical-coordinates

The camera angle code has been cut from the example here: http://processingjs.org/articles/RenderingModes.html

No luck with PeasyCam. I'm stuck as to how to proceed. I'm probably just doing something very stupid.

Any help would be most appreciated!

Here is my code:

import processing.opengl.*;

//import java.util.*;

//import java.math.BigDecimal;

Sphere mySphere;

String[] lines;

//float rotation = PI;

float ang = 0, ang2 = 0, ang3 = 0, ang4 = 0;

float px = 0, py = 0, pz = 0;

void setup()

{

size(500,500,OPENGL);

mySphere = new Sphere();

mySphere.init();

frameRate(50);

noStroke();

}

void draw()

{

mySphere.update();

mySphere.render();

println("in Camera");

beginCamera();

camera();

px = sin(radians(ang3)) * 170;

py = cos(radians(ang3)) * 300;

pz = sin(radians(ang4)) * 500;

translate(width/2 + px, height/2 + py, -700+pz);

rotateX(sin(radians(ang2)) * 120);

rotateY(sin(radians(ang2)) * 50);

rotateZ(sin(radians(ang2)) * 65);



ang2 += 0.01;

ang3 += 2.0;

ang4 += 0.75;



endCamera();

}

void mousePressed() {

mySphere.addSphereItem();

};

class Sphere {

float xPos = 250;

float yPos = 250;

float zPos = 250;

float radius = 50;

ArrayList items = new ArrayList();



public void Sphere() {

};

public void init() {

};

public void addSphereItem()

{

SphereItem si = new SphereItem();

si.parentSphere = this;

si.theta= random(PI*2);

si.phi= random(PI*2);

items.add(items.size(),si);

si.init();

println("addsphere");

}

public void update()

{

for (int i = 0; i < items.size(); i ++)

{

SphereItem si = (SphereItem) items.get(i);

si.update();

};

};

public void render() {

//Move to the center point of the sphere

translate(xPos, yPos, zPos);

//Mark our position in 3d space

pushMatrix();

//Render each SphereItem

for (int i = 0; i < items.size(); i ++)

{

SphereItem si = (SphereItem) items.get(i);

si.render();

};

popMatrix();

};

};

class SphereItem {

Sphere parentSphere;

float radius;

float theta;

float phi;

//Speed properties

float thetaSpeed = 0;

float phiSpeed = 0;

//Size

float itemSize = 5;

//String piDigits = "314159265358";

int piCounter = 0;

public void SphereItem()

{

};

public void init() {

itemSize = random(5);

thetaSpeed = 0.05;

phiSpeed = 0.06;

};

public void update()

{

theta += thetaSpeed;

phi += phiSpeed;

//println(piDigits.charAt(piCounter) - '0');

//itemSize = piDigits.charAt(piCounter) - '0';

//println(Float.parseFloat(piDigits.charAt(piCounter)));

//char piSize = piDigits.charAt(piCounter);

// println(x);

//String y = Character.toString(x);

//println(y);

String lines[] = loadStrings("pinumbers.txt");

//println(float(piSize));

itemSize = float(lines[piCounter])/3; // Set Item size as a x

piCounter= (piCounter + 1) % (lines.length - 1);

};

public void render() {

//Get the radius from the parent Sphere

float r = parentSphere.radius;

//Convert spherical coordinates into Cartesian coordinates

float x = cos(theta) * sin(phi) * r;

float y = sin(theta) * sin(phi) * r;

float z = cos(phi) * r;

//Mark our 3d space

pushMatrix();

//Move to the position of this item

translate(x,y,z);

//Set the fill colour

fill(0,0,0,150);

noStroke();

//Draw a circle

ellipse(0,0,itemSize,itemSize);

//Go back to our position in 3d space

popMatrix();

};

};

«Prev
Next »