OpenGL med Processing.js
Noen bokser
Vi tegner tre bokser som roteres med mousedrag. Vi setter opp lys og materialer.
_jogl_pde2.pde
import processing.opengl.*;
// rotating stuff
float v1=0.0f;
float v2=0.0f;
void setup() {
size(350, 350,OPENGL);
smooth();
}
void setLight(){
directionalLight(255, 255, 255, 5, 5, -1);
lightSpecular(255, 255, 255);
ambientLight(255, 255, 255);
}
void drawBox(){
fill(200,200,255);
stroke(100);
specular(200, 200, 200);
ambient(100, 100, 255);
box(60);
}
void mouseDragged(){
// very simple
v1=PI*mouseX/width;
v2=PI*mouseY/width;
}
void mousePressed(){
loop();
}
void mouseReleased(){
noLoop();
}
void draw() {
setLight();
background(200, 200, 200);
translate(180,180,50);
rotateX(v2);
pushMatrix();
rotateY(v1);
drawBox();
popMatrix();
pushMatrix();
translate(60,50,50);
rotateX(v2);
rotateY(v1);
drawBox();
popMatrix();
pushMatrix();
translate(-60,50,50);
rotateX(v2);
rotateY(v1);
drawBox();
popMatrix();
}
Basiskomponenter
Vi tegner en boks, en kule og en tekst. Vi setter opp lys og materialer og lager en animasjon.
_jogl_pde.pde
import processing.opengl.*;
// rotating stuff
float v1=0.0f;
float v2=0.0f;
void setup() {
size(350, 350,OPENGL);
smooth();
// when non-web:textFont(createFont("SansSerif",24));
textFont(loadFont("Arial"), 24);
}
void setLight(){
directionalLight(255, 255, 255, 5, 5, -1);
lightSpecular(255, 255, 255);
ambientLight(255, 255, 255);
}
void drawText(){
textMode(MODEL);
pushMatrix();
fill(0,0,0);
translate(100,270,0);
rotateX(v2);
specular(0, 0, 0);
ambient(1, 1, 1);
text("Hello World!", 0, 0,-10);
popMatrix();
}
void drawBox(){
pushMatrix();
translate(120,120,50);
rotateX(v2);
rotateY(v1);
fill(200,200,255);
stroke(100);
specular(200, 200, 200);
ambient(100, 100, 255);
box(60);
popMatrix();
}
void drawSphere(){
pushMatrix();
translate(180,180,0);
rotateX(v2);
rotateY(v1);
fill(255,50,50);
sphereDetail(20);
//noStroke();
strokeWeight(1);
specular(255, 100, 100);
ambient(100, 100, 100);
sphere(50);
popMatrix();
}
void draw() {
setLight();
background(200, 200, 200);
drawBox();
drawSphere();
drawText();
v1+=PI/400;
v2+=PI/300;
}
