diff --git a/examples/3d/topleft_origin/index.html b/examples/3d/camera/ortho/index.html similarity index 88% rename from examples/3d/topleft_origin/index.html rename to examples/3d/camera/ortho/index.html index fc5c43a9ed..b8570bf68e 100644 --- a/examples/3d/topleft_origin/index.html +++ b/examples/3d/camera/ortho/index.html @@ -5,17 +5,17 @@ - + -

[0, 0, 0] is in the top left corner now

+

Orthographic camera

- + \ No newline at end of file diff --git a/examples/3d/camera/ortho/sketch.js b/examples/3d/camera/ortho/sketch.js new file mode 100644 index 0000000000..e6de3c88bb --- /dev/null +++ b/examples/3d/camera/ortho/sketch.js @@ -0,0 +1,19 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); + ortho(-width/2, width/2, height/2, -height/2, 0.1, 100); +} + +function draw(){ + background(0); + rotateX(map(mouseY, 0, height, 0, TWO_PI)); + rotateY(map(mouseX, 0, width, 0, TWO_PI)); + + for(var i = -5; i < 6; i++){ + for(var j = -5; j < 6; j++){ + push(); + translate(i*100, 0, j*100); + box(20); + pop(); + } + } +} \ No newline at end of file diff --git a/examples/3d/texture/index.html b/examples/3d/camera/perspective/index.html similarity index 90% rename from examples/3d/texture/index.html rename to examples/3d/camera/perspective/index.html index bf139d7081..e74f7d5975 100644 --- a/examples/3d/texture/index.html +++ b/examples/3d/camera/perspective/index.html @@ -5,14 +5,14 @@ - + -

Move Mouse To Rotate The Geometries

+

Perspective camera

diff --git a/examples/3d/camera/perspective/sketch.js b/examples/3d/camera/perspective/sketch.js new file mode 100644 index 0000000000..65568b74ca --- /dev/null +++ b/examples/3d/camera/perspective/sketch.js @@ -0,0 +1,18 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); + perspective(60 / 180 * PI, width/height, 0.1, 100); +} + +function draw(){ + background(0); + rotateX(map(mouseY, 0, height, 0, TWO_PI)); + rotateY(map(mouseX, 0, width, 0, TWO_PI)); + for(var i = -5; i < 6; i++){ + for(var j = -5; j < 6; j++){ + push(); + translate(i*100, 0, j*100); + sphere(20); + pop(); + } + } +} \ No newline at end of file diff --git a/examples/3d/center_origin/sketch.js b/examples/3d/center_origin/sketch.js deleted file mode 100644 index d88e202574..0000000000 --- a/examples/3d/center_origin/sketch.js +++ /dev/null @@ -1,29 +0,0 @@ -function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); -} - -function draw(){ - - background(255); - - translate(0, 0, -800); - rotateY(frameCount * 0.01); - - var gap = 200; - var w = 100; - var h = 100; - - for(var i = -2; i < 3; i++){ - for(var j = -2; j < 3; j++){ - fill( (i+2) * 40, (j+2) * 40, 0); - quad( - i * gap, j * gap, 0, - i * gap + w, j * gap, 0, - i * gap, j * gap + h, 0, - i * gap + w, j * gap + h/2 * (sin(frameCount * 0.1 + i + j) + 1), 0 - ); - } - } - - -} \ No newline at end of file diff --git a/examples/3d/directional_light/sketch.js b/examples/3d/directional_light/sketch.js deleted file mode 100644 index c50eea1e64..0000000000 --- a/examples/3d/directional_light/sketch.js +++ /dev/null @@ -1,69 +0,0 @@ -function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); -} - -function draw(){ - background(0); - translate(-width/2, 0, -800); - - var dirY = (mouseY / height - 0.5) *2; - var dirX = (mouseX / width - 0.5) *2; - - ambientLight(150); - directionalLight(250, 0, 0, dirX, -dirY, 0.25); - - // directionalLight(0, 0, 250, -dirX, -dirY, 0.25); - // ambientMaterial(250); - // sphere(60); - // directionalLight(0, 0, 250, -dirX, -dirY, 0.25); - // directionalLight(250, 0, 0, dirX, dirY, 0.25); - // translate(200, 0,0); - // sphere(60); - push(); - rotateZ(frameCount * 0.02); - rotateX(frameCount * 0.02); - rotateY(frameCount * 0.02); - ambientMaterial(250, 250, 10); - plane(80, 80); - pop(); - translate(250, 0, 0); - push(); - rotateZ(frameCount * 0.02); - rotateX(frameCount * 0.02); - rotateY(frameCount * 0.02); - ambientMaterial(250, 100, 250); - box(80, 80, 80); - pop(); - translate(250, 0, 0); - push(); - rotateZ(frameCount * 0.02); - rotateX(frameCount * 0.02); - rotateY(frameCount * 0.02); - ambientMaterial(100, 50, 250); - cylinder(80, 80); - pop(); - translate(250, 0, 0); - push(); - rotateZ(frameCount * 0.02); - rotateX(frameCount * 0.02); - rotateY(frameCount * 0.02); - ambientMaterial(100, 250, 250); - cone(80, 80); - pop(); - translate(250, 0, 0); - push(); - rotateZ(frameCount * 0.02); - rotateX(frameCount * 0.02); - rotateY(frameCount * 0.02); - ambientMaterial(20, 200, 10); - torus(80, 20); - pop(); - translate(250, 0, 0); - push(); - rotateZ(frameCount * 0.02); - rotateX(frameCount * 0.02); - rotateY(frameCount * 0.02); - ambientMaterial(frameCount % 250, 250 - frameCount % 250, 250 - frameCount % 250); - sphere(80, 80); - pop(); -} \ No newline at end of file diff --git a/examples/3d/geometry/index.html b/examples/3d/geometry/index.html index bf139d7081..7d8ee8e122 100644 --- a/examples/3d/geometry/index.html +++ b/examples/3d/geometry/index.html @@ -12,7 +12,7 @@ -

Move Mouse To Rotate The Geometries

+

Move mouse to spin geometries

diff --git a/examples/3d/geometry/sketch.js b/examples/3d/geometry/sketch.js index 7807337f3a..0cf1b36385 100644 --- a/examples/3d/geometry/sketch.js +++ b/examples/3d/geometry/sketch.js @@ -1,54 +1,53 @@ function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); + createCanvas(windowWidth, windowHeight, WEBGL); } var theta = 0; function draw(){ background(255, 255, 255, 255); - - translate(-width/2, 0, -800); + translate(-width/2, 0, 0); normalMaterial(); push(); rotateZ(theta * mouseX * 0.001); rotateX(theta * mouseX * 0.001); rotateY(theta * mouseX * 0.001); - plane(80, 80); + plane(50); pop(); translate(250, 0, 0); push(); rotateZ(theta * mouseX * 0.001); rotateX(theta * mouseX * 0.001); rotateY(theta * mouseX * 0.001); - box(80, 80, 80); + box(50, 50, 50); pop(); translate(250, 0, 0); push(); rotateZ(theta * mouseX * 0.001); rotateX(theta * mouseX * 0.001); rotateY(theta * mouseX * 0.001); - cylinder(80, 80); + cylinder(50, 50); pop(); translate(250, 0, 0); push(); rotateZ(theta * mouseX * 0.001); rotateX(theta * mouseX * 0.001); rotateY(theta * mouseX * 0.001); - cone(80, 80); + cone(50, 50); pop(); translate(250, 0, 0); push(); rotateZ(theta * mouseX * 0.001); rotateX(theta * mouseX * 0.001); rotateY(theta * mouseX * 0.001); - torus(80, 20); + torus(50, 10); pop(); translate(250, 0, 0); push(); rotateZ(theta * mouseX * 0.001); rotateX(theta * mouseX * 0.001); rotateY(theta * mouseX * 0.001); - sphere(80, 80); + sphere(50); pop(); theta += 0.05; } \ No newline at end of file diff --git a/examples/3d/immediateMode/index.html b/examples/3d/immediateMode/index.html index 201710dc81..2272acda66 100644 --- a/examples/3d/immediateMode/index.html +++ b/examples/3d/immediateMode/index.html @@ -12,6 +12,7 @@ +

Drag mouse to toggle the world

diff --git a/examples/3d/immediateMode/sketch.js b/examples/3d/immediateMode/sketch.js index f9844523db..1d0e9dc6f0 100644 --- a/examples/3d/immediateMode/sketch.js +++ b/examples/3d/immediateMode/sketch.js @@ -1,7 +1,7 @@ var theta = 0; function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); + createCanvas(windowWidth, windowHeight, WEBGL); } function draw(){ @@ -9,50 +9,34 @@ function draw(){ background('white'); colorMode(HSB); - translate(0, 0, -1000); + orbitControl(); - rotateY(frameCount * 0.01); + translate(0, -height/2, 0); - //point - stroke(0, 200, 200); - point(0, 0, 0); - - //lines - translate(100, 0, 0); + for(var i = 0; i < 500; i+=100){ push(); - rotateX(frameCount * 0.01); - for(var i = 0 ; i < 12; i++){ - var offset = i * PI / 6; - fill(i * 20, 100, 100); - line(0, 0, 0, 200 * sin(offset + frameCount*0.01), 200 * cos(offset + frameCount*0.01), 0); - } - pop(); + fill(i * 0.1, 100, 100); + //line + translate(0, 100, 0); + line(-100, 0, i, 100, 0, i); //triangles - translate(400, 0, 0); - push(); - for(var i = 0; i < 3; i++){ - fill(i * 30 + 200, 100, 100); - translate(100, 50, 0); + translate(0, 100, 0); triangle( - 100, 0, 0, - 60 * sin(frameCount * 0.1 + i), 0, 0, - 0, 100, 0); - } - pop(); + 0, sin( i + frameCount * 0.1) * 10, i, + 60, 60, i, + -60, 60, i); + + //quad + translate(0, 200, 0); + quad( + -100, 0, i, + 100, 0, i, + -100, 100, i, + 100, 100, i + ); - - //triangle strip - translate(200, 0, 0); - for(var i = 0; i < 30; i++){ - fill(i * 10, 120, 120); - translate(100, -50, 0); - beginShape('TRIANGLE_STRIP') - vertex(0, 0, (cos(frameCount * 0.1 + i) + 1) * 100); - vertex(0, 200, 100); - vertex(100, 100, 100); - vertex(100, 0, (sin(frameCount * 0.1 + i) + 1) * 100); - endShape(); + pop(); } } \ No newline at end of file diff --git a/examples/3d/interaction/index.html b/examples/3d/interaction/index.html index 49e0c98ad6..487af0d731 100644 --- a/examples/3d/interaction/index.html +++ b/examples/3d/interaction/index.html @@ -12,7 +12,7 @@ -

Press Mouse To Toggle The World

+

Press mouse to toggle the world

diff --git a/examples/3d/interaction/sketch.js b/examples/3d/interaction/sketch.js index 16fbc18884..7730c53b90 100644 --- a/examples/3d/interaction/sketch.js +++ b/examples/3d/interaction/sketch.js @@ -1,30 +1,22 @@ function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); + createCanvas(windowWidth, windowHeight, WEBGL); } function draw(){ - background(250, 250, 250, 255); + background(250); var radius = width; - translate(0, 0, -1600); - orbitControl(); - if(!mouseIsPressed){ - rotateY(frameCount * 0.001); - } + orbitControl(); normalMaterial(); + translate(0, 0, -1000); for(var i = 0; i <= 20; i++){ for(var j = 0; j <= 20; j++){ push(); var a = j/20 * PI; var b = i/20 * PI - translate(sin(2 * a) * radius * sin(b), cos(b) * radius / 2 , cos(2 * a) * radius * sin(b)); - if(j % 2 === 0) { - box(60, 60, 60); - } - else{ - cone(60, 60); - } + translate(sin(2 * a) * radius * sin(b), cos(b) * radius / 2 , cos(2 * a) * radius * sin(b)); + cone(); pop(); } } diff --git a/examples/3d/directional_light/index.html b/examples/3d/lights/ambientLight/index.html similarity index 96% rename from examples/3d/directional_light/index.html rename to examples/3d/lights/ambientLight/index.html index 201710dc81..568dda23d0 100644 --- a/examples/3d/directional_light/index.html +++ b/examples/3d/lights/ambientLight/index.html @@ -5,7 +5,7 @@ - + + + +

Move mouse to change light position

+ + + + \ No newline at end of file diff --git a/examples/3d/lights/directionalLight/sketch.js b/examples/3d/lights/directionalLight/sketch.js new file mode 100644 index 0000000000..97bee745d7 --- /dev/null +++ b/examples/3d/lights/directionalLight/sketch.js @@ -0,0 +1,16 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); +} + +function draw(){ + background(0); + + var dirY = (mouseY / height - 0.5) *2; + var dirX = (mouseX / width - 0.5) *2; + + ambientLight(50); + directionalLight(250, 250, 250, dirX, -dirY, 0.25); + + ambientMaterial(250); + sphere(50, 64); +} \ No newline at end of file diff --git a/examples/3d/lights/multipleLights/index.html b/examples/3d/lights/multipleLights/index.html new file mode 100644 index 0000000000..b4c16b470b --- /dev/null +++ b/examples/3d/lights/multipleLights/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + +

Move mouse to change light position

+ + + + \ No newline at end of file diff --git a/examples/3d/lights/multipleLights/sketch.js b/examples/3d/lights/multipleLights/sketch.js new file mode 100644 index 0000000000..5fb49771bf --- /dev/null +++ b/examples/3d/lights/multipleLights/sketch.js @@ -0,0 +1,28 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); +} + +function draw(){ + background(0); + + var locY = (mouseY / height - 0.5) * (-2); + var locX = (mouseX / width - 0.5) *2; + + ambientLight(50); + directionalLight(200, 0, 0, 0.25, 0.25, 0.25); + pointLight(0, 0, 200, locX, locY, 0); + pointLight(200, 200, 0, -locX, -locY, 0); + + push(); + translate(-150, 0, 0); + rotateZ(frameCount * 0.02); + rotateX(frameCount * 0.02); + specularMaterial(250); + box(50); + pop(); + + push(); + translate(150, 0, 0); + ambientMaterial(250); + sphere(60, 64); +} \ No newline at end of file diff --git a/examples/3d/lights/pointLight/index.html b/examples/3d/lights/pointLight/index.html new file mode 100644 index 0000000000..b4c16b470b --- /dev/null +++ b/examples/3d/lights/pointLight/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + +

Move mouse to change light position

+ + + + \ No newline at end of file diff --git a/examples/3d/lights/pointLight/sketch.js b/examples/3d/lights/pointLight/sketch.js new file mode 100644 index 0000000000..4cb0dc929d --- /dev/null +++ b/examples/3d/lights/pointLight/sketch.js @@ -0,0 +1,16 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); +} + +function draw(){ + background(0); + + var locY = (mouseY / height - 0.5) * (-2); + var locX = (mouseX / width - 0.5) *2; + + ambientLight(50); + pointLight(250, 250, 250, locX, locY, 0); + + ambientMaterial(250); + sphere(50, 64); +} \ No newline at end of file diff --git a/examples/3d/material/index.html b/examples/3d/material/simple/index.html similarity index 96% rename from examples/3d/material/index.html rename to examples/3d/material/simple/index.html index 201710dc81..568dda23d0 100644 --- a/examples/3d/material/index.html +++ b/examples/3d/material/simple/index.html @@ -5,7 +5,7 @@ - + + + + + + + \ No newline at end of file diff --git a/examples/3d/material/specular:ambient/sketch.js b/examples/3d/material/specular:ambient/sketch.js new file mode 100644 index 0000000000..0edded5827 --- /dev/null +++ b/examples/3d/material/specular:ambient/sketch.js @@ -0,0 +1,31 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); +} + +function draw(){ + background(0); + + var locY = (mouseY / height - 0.5) * (-2); + var locX = (mouseX / width - 0.5) *2; + + ambientLight(100, 80, 80); + pointLight(200, 200, 200, locX, locY, 0); + + translate(-200, 0, 0); + push(); + rotateZ(frameCount * 0.02); + rotateX(frameCount * 0.02); + rotateY(frameCount * 0.02); + ambientMaterial(250); + torus(80, 20, 64, 64); + pop(); + + translate(400, 0, 0); + push(); + specularMaterial(250); + rotateZ(frameCount * 0.02); + rotateX(frameCount * 0.02); + rotateY(frameCount * 0.02); + torus(80, 20, 64, 64); + pop(); +} \ No newline at end of file diff --git a/examples/3d/material/texture/assets/360video_256crop_v2.mp4 b/examples/3d/material/texture/assets/360video_256crop_v2.mp4 new file mode 100644 index 0000000000..e64ba0d13c Binary files /dev/null and b/examples/3d/material/texture/assets/360video_256crop_v2.mp4 differ diff --git a/examples/3d/texture/assets/cat.jpg b/examples/3d/material/texture/assets/cat.jpg similarity index 100% rename from examples/3d/texture/assets/cat.jpg rename to examples/3d/material/texture/assets/cat.jpg diff --git a/examples/3d/material/texture/index.html b/examples/3d/material/texture/index.html new file mode 100644 index 0000000000..0ed9c2d5a4 --- /dev/null +++ b/examples/3d/material/texture/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/3d/material/texture/sketch.js b/examples/3d/material/texture/sketch.js new file mode 100644 index 0000000000..4017ea7a3e --- /dev/null +++ b/examples/3d/material/texture/sketch.js @@ -0,0 +1,44 @@ +/** + * webgl texture example + * video source: https://vimeo.com/90312869 + */ +var img; +var vid; +var theta = 0; + +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); + + //2D renderer + // createCanvas(windowWidth, windowHeight); + + img = loadImage("assets/cat.jpg"); + vid = createVideo(["assets/360video_256crop_v2.mp4"]); + vid.loop(); + vid.hide(); + + +} + +function draw(){ + background(255, 255, 255, 255); + push(); + translate(-100,0,0); + rotateZ(theta * mouseX * 0.001); + rotateX(theta * mouseX * 0.001); + rotateY(theta * mouseX * 0.001); + //pass image as texture + texture(vid); + sphere(45); + pop(); + + push(); + translate(100,0,0); + rotateZ(theta * 0.1); + rotateX(theta * 0.1); + rotateY(theta * 0.1); + texture(img); + box(45); + pop(); + theta += 0.05; +} \ No newline at end of file diff --git a/examples/3d/mixedMode/index.html b/examples/3d/mixedMode/index.html new file mode 100644 index 0000000000..4fd1441686 --- /dev/null +++ b/examples/3d/mixedMode/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + +

Drag mouse to toggle the world

+

(3d primitives and 2d primitives can be used together)

+ + + + \ No newline at end of file diff --git a/examples/3d/mixedMode/sketch.js b/examples/3d/mixedMode/sketch.js new file mode 100644 index 0000000000..7069ddc023 --- /dev/null +++ b/examples/3d/mixedMode/sketch.js @@ -0,0 +1,32 @@ +var theta = 0; + +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); +} + +function draw(){ + + background('white'); + colorMode(HSB); + + orbitControl(); + + for(var i = 0; i < 500; i+=100){ + + push(); + translate(0, 0, i); + basicMaterial(i * 0.1, 100, 100); + + push(); + translate(0, cos( i + frameCount * 0.1) * 10, 0); + box(20, 20, 20); + pop(); + fill(i * 0.1, 100, 100); + line( + -100, sin( i + frameCount * 0.1) * 10, 0, + 100, sin( i + frameCount * 0.1) * 10, 0 + ); + pop(); + + } +} \ No newline at end of file diff --git a/examples/3d/mobile/sketch.js b/examples/3d/mobile/sketch.js index 7260f3d575..81c157c35d 100644 --- a/examples/3d/mobile/sketch.js +++ b/examples/3d/mobile/sketch.js @@ -1,12 +1,11 @@ function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); + createCanvas(windowWidth, windowHeight, WEBGL); } function draw(){ - background(250, 250, 250, 255); - translate(0,0,-400); + background(250); normalMaterial(); rotateX(accelerationX * 0.01); rotateY(accelerationY * 0.01); - box(60, 60, 60); + box(100, 100, 100); } \ No newline at end of file diff --git a/examples/3d/center_origin/index.html b/examples/3d/origin/center_origin/index.html similarity index 90% rename from examples/3d/center_origin/index.html rename to examples/3d/origin/center_origin/index.html index 92e08b1696..56955b73e1 100644 --- a/examples/3d/center_origin/index.html +++ b/examples/3d/origin/center_origin/index.html @@ -5,14 +5,14 @@ - + -

[0, 0, 0] is in the center of the screen by default

+

[0, 0, 0] is in the center of the screen by default

diff --git a/examples/3d/origin/center_origin/sketch.js b/examples/3d/origin/center_origin/sketch.js new file mode 100644 index 0000000000..25e3ddbd19 --- /dev/null +++ b/examples/3d/origin/center_origin/sketch.js @@ -0,0 +1,32 @@ +function setup(){ + createCanvas(windowWidth, windowHeight, WEBGL); +} + +function draw(){ + + background(255); + + rotateY(frameCount * 0.01); + + var gap = 200; + var w = 100; + var h = 100; + + for(var i = -2; i < 3; i++){ + for(var j = -2; j < 3; j++){ + basicMaterial( (i+2) * 40, (j+2) * 40, 0); + push(); + translate(i*gap, j*gap,0); + plane(); + pop(); + // quad( + // i * gap, j * gap, 0, + // i * gap + w, j * gap, 0, + // i * gap, j * gap + h, 0, + // i * gap + w, j * gap + h, 0 + // ); + } + } + + +} \ No newline at end of file diff --git a/examples/3d/origin/topleft_origin/index.html b/examples/3d/origin/topleft_origin/index.html new file mode 100644 index 0000000000..aeb19be5c1 --- /dev/null +++ b/examples/3d/origin/topleft_origin/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + +

[0, 0, 0] is in the top left corner now

+ + + + diff --git a/examples/3d/topleft_origin/sketch.js b/examples/3d/origin/topleft_origin/sketch.js similarity index 68% rename from examples/3d/topleft_origin/sketch.js rename to examples/3d/origin/topleft_origin/sketch.js index 09f3e61ef4..9c265d0033 100644 --- a/examples/3d/topleft_origin/sketch.js +++ b/examples/3d/origin/topleft_origin/sketch.js @@ -1,12 +1,12 @@ function setup(){ - createCanvas(windowWidth, windowHeight, 'webgl'); + createCanvas(windowWidth, windowHeight, WEBGL); } function draw(){ background(255); - translate( -width/2, -height/2, -600); + translate(-width/2, -height/2, 0); rotateY(frameCount * 0.01); @@ -21,7 +21,7 @@ function draw(){ i * gap, j * gap, 0, i * gap + w, j * gap, 0, i * gap, j * gap + h, 0, - i * gap + w, j * gap + h/2 * (sin(frameCount * 0.1 + i + j) + 1), 0 + i * gap + w, j * gap + h, 0 ); } } diff --git a/examples/3d/performance/index.html b/examples/3d/performance/index.html index 9270293780..cbe4af5068 100644 --- a/examples/3d/performance/index.html +++ b/examples/3d/performance/index.html @@ -11,7 +11,7 @@ html, body {margin:0; padding:0;} -

1000 spheres, how's the speed?

+

1000 spheres, how's the speed?