Add Examples of the Camera Section

src/data/en.yml

@@ -1155,6 +1155,7 @@ examples:
   3D: 3D
   Input: Input
   Advanced_Data: Advanced Data
+  Camera: Camera
   Sound: Sound
   Mobile: Mobile
   Hello_P5: Hello p5

src/data/es.yml

@@ -1225,6 +1225,7 @@ examples:
   3D: 3D
   Input: Input
   Advanced_Data: Avanzado Datos
+  Camera: Camera
   Sound: Sonido
   Mobile: Móvil
   Hello_P5: Hola p5

src/data/examples/en/23_Camera/00_moveEye.js

@@ -0,0 +1,26 @@
+/*
+ * @name Move Eye
+ * @description The camera lifts up (controlled by mouseY) while looking at the same point.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  fill(204);
+}
+
+void draw() {
+  lights();
+  background(0);
+
+  // Change height of the camera with mouseY
+  camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
+    0.0, 0.0, 0.0, // centerX, centerY, centerZ
+    0.0, 1.0, 0.0); // upX, upY, upZ
+
+  noStroke();
+  box(90);
+  stroke(255);
+  line(-100, 0, 0, 100, 0, 0);
+  line(0, -100, 0, 0, 100, 0);
+  line(0, 0, -100, 0, 0, 100);
+}

src/data/examples/en/23_Camera/01_orthographic.js

@@ -0,0 +1,39 @@
+/**
+ * @name Perspective vs. Ortho
+ *
+ * @description Move the mouse left to right to change the "far" 
+ * parameter for the perspective() and ortho() functions.
+ * This parameter sets the maximum distance from the 
+ * origin away from the viewer and will clip the geometry.
+ * Click a mouse button to switch between the perspective and
+ * orthographic projections.
+ */
+
+
+ boolean showPerspective = false;
+
+void setup() {
+  size(600, 360, P3D);
+  noFill();
+  fill(255);
+  noStroke();
+}
+
+void draw() {
+  lights();
+  background(0);
+   float far = map(mouseX, 0, width, 120, 400);
+  if (showPerspective == true) {
+    perspective(PI / 3.0, float(width) / float(height), 10, far);
+  } else {
+    ortho(-width / 2.0, width / 2.0, -height / 2.0, height / 2.0, 10, far);
+  }
+  translate(width / 2, height / 2, 0);
+  rotateX(-PI / 6);
+  rotateY(PI / 3);
+  box(180);
+}
+
+void mousePressed() {
+  showPerspective = !showPerspective;
+}

src/data/examples/en/23_Camera/02_perspective.js

@@ -0,0 +1,40 @@
+/**
+ * @name Perspective. 
+ * 
+ * @description Move the mouse left and right to change the field of view (fov).
+ * Click to modify the aspect ratio. The perspective() function
+ * sets a perspective projection applying foreshortening, making 
+ * distant objects appear smaller than closer ones. The parameters 
+ * define a viewing volume with the shape of truncated pyramid. 
+ * Objects near to the front of the volume appear their actual size, 
+ * while farther objects appear smaller. This projection simulates 
+ * the perspective of the world more accurately than orthographic projection. 
+ * The version of perspective without parameters sets the default 
+ * perspective and the version with four parameters allows the programmer 
+ * to set the area precisely.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  noStroke();
+}
+
+void draw() {
+  lights();
+  background(0);
+    float cameraY = height / 2.0;
+    float fov = mouseX / float(width) * PI / 2;
+    float cameraZ = cameraY / tan(fov / 2.0);
+    float aspect = float(width) / float(height);
+  if (mousePressed) {
+    aspect = aspect / 2.0;
+  }
+  perspective(fov, aspect, cameraZ / 10.0, cameraZ * 10.0);
+
+  translate(width / 2 + 30, height / 2, 0);
+  rotateX(-PI / 6);
+  rotateY(PI / 3 + mouseY / float(height) * PI);
+  box(45);
+  translate(0, 0, -50);
+  box(30);
+}

src/data/examples/es/23_Camera/00_moveEye.js

@@ -0,0 +1,26 @@
+/*
+ * @name Move Eye
+ * @description The camera lifts up (controlled by mouseY) while looking at the same point.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  fill(204);
+}
+
+void draw() {
+  lights();
+  background(0);
+
+  // Change height of the camera with mouseY
+  camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
+    0.0, 0.0, 0.0, // centerX, centerY, centerZ
+    0.0, 1.0, 0.0); // upX, upY, upZ
+
+  noStroke();
+  box(90);
+  stroke(255);
+  line(-100, 0, 0, 100, 0, 0);
+  line(0, -100, 0, 0, 100, 0);
+  line(0, 0, -100, 0, 0, 100);
+}

src/data/examples/es/23_Camera/01_orthographic.js

@@ -0,0 +1,39 @@
+/**
+ * @name Perspective vs. Ortho
+ *
+ * @description Move the mouse left to right to change the "far" 
+ * parameter for the perspective() and ortho() functions.
+ * This parameter sets the maximum distance from the 
+ * origin away from the viewer and will clip the geometry.
+ * Click a mouse button to switch between the perspective and
+ * orthographic projections.
+ */
+
+
+ boolean showPerspective = false;
+
+void setup() {
+  size(600, 360, P3D);
+  noFill();
+  fill(255);
+  noStroke();
+}
+
+void draw() {
+  lights();
+  background(0);
+   float far = map(mouseX, 0, width, 120, 400);
+  if (showPerspective == true) {
+    perspective(PI / 3.0, float(width) / float(height), 10, far);
+  } else {
+    ortho(-width / 2.0, width / 2.0, -height / 2.0, height / 2.0, 10, far);
+  }
+  translate(width / 2, height / 2, 0);
+  rotateX(-PI / 6);
+  rotateY(PI / 3);
+  box(180);
+}
+
+void mousePressed() {
+  showPerspective = !showPerspective;
+}

src/data/examples/es/23_Camera/02_perspective.js

@@ -0,0 +1,40 @@
+/**
+ * @name Perspective. 
+ * 
+ * @description Move the mouse left and right to change the field of view (fov).
+ * Click to modify the aspect ratio. The perspective() function
+ * sets a perspective projection applying foreshortening, making 
+ * distant objects appear smaller than closer ones. The parameters 
+ * define a viewing volume with the shape of truncated pyramid. 
+ * Objects near to the front of the volume appear their actual size, 
+ * while farther objects appear smaller. This projection simulates 
+ * the perspective of the world more accurately than orthographic projection. 
+ * The version of perspective without parameters sets the default 
+ * perspective and the version with four parameters allows the programmer 
+ * to set the area precisely.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  noStroke();
+}
+
+void draw() {
+  lights();
+  background(0);
+    float cameraY = height / 2.0;
+    float fov = mouseX / float(width) * PI / 2;
+    float cameraZ = cameraY / tan(fov / 2.0);
+    float aspect = float(width) / float(height);
+  if (mousePressed) {
+    aspect = aspect / 2.0;
+  }
+  perspective(fov, aspect, cameraZ / 10.0, cameraZ * 10.0);
+
+  translate(width / 2 + 30, height / 2, 0);
+  rotateX(-PI / 6);
+  rotateY(PI / 3 + mouseY / float(height) * PI);
+  box(45);
+  translate(0, 0, -50);
+  box(30);
+}

src/data/examples/hi/23_Camera/00_moveEye.js

@@ -0,0 +1,26 @@
+/*
+ * @name Move Eye
+ * @description The camera lifts up (controlled by mouseY) while looking at the same point.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  fill(204);
+}
+
+void draw() {
+  lights();
+  background(0);
+
+  // Change height of the camera with mouseY
+  camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
+    0.0, 0.0, 0.0, // centerX, centerY, centerZ
+    0.0, 1.0, 0.0); // upX, upY, upZ
+
+  noStroke();
+  box(90);
+  stroke(255);
+  line(-100, 0, 0, 100, 0, 0);
+  line(0, -100, 0, 0, 100, 0);
+  line(0, 0, -100, 0, 0, 100);
+}

src/data/examples/hi/23_Camera/01_orthographic.js

@@ -0,0 +1,39 @@
+/**
+ * @name Perspective vs. Ortho
+ *
+ * @description Move the mouse left to right to change the "far" 
+ * parameter for the perspective() and ortho() functions.
+ * This parameter sets the maximum distance from the 
+ * origin away from the viewer and will clip the geometry.
+ * Click a mouse button to switch between the perspective and
+ * orthographic projections.
+ */
+
+
+ boolean showPerspective = false;
+
+void setup() {
+  size(600, 360, P3D);
+  noFill();
+  fill(255);
+  noStroke();
+}
+
+void draw() {
+  lights();
+  background(0);
+   float far = map(mouseX, 0, width, 120, 400);
+  if (showPerspective == true) {
+    perspective(PI / 3.0, float(width) / float(height), 10, far);
+  } else {
+    ortho(-width / 2.0, width / 2.0, -height / 2.0, height / 2.0, 10, far);
+  }
+  translate(width / 2, height / 2, 0);
+  rotateX(-PI / 6);
+  rotateY(PI / 3);
+  box(180);
+}
+
+void mousePressed() {
+  showPerspective = !showPerspective;
+}

src/data/examples/hi/23_Camera/02_perspective.js

@@ -0,0 +1,40 @@
+/**
+ * @name Perspective. 
+ * 
+ * @description Move the mouse left and right to change the field of view (fov).
+ * Click to modify the aspect ratio. The perspective() function
+ * sets a perspective projection applying foreshortening, making 
+ * distant objects appear smaller than closer ones. The parameters 
+ * define a viewing volume with the shape of truncated pyramid. 
+ * Objects near to the front of the volume appear their actual size, 
+ * while farther objects appear smaller. This projection simulates 
+ * the perspective of the world more accurately than orthographic projection. 
+ * The version of perspective without parameters sets the default 
+ * perspective and the version with four parameters allows the programmer 
+ * to set the area precisely.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  noStroke();
+}
+
+void draw() {
+  lights();
+  background(0);
+    float cameraY = height / 2.0;
+    float fov = mouseX / float(width) * PI / 2;
+    float cameraZ = cameraY / tan(fov / 2.0);
+    float aspect = float(width) / float(height);
+  if (mousePressed) {
+    aspect = aspect / 2.0;
+  }
+  perspective(fov, aspect, cameraZ / 10.0, cameraZ * 10.0);
+
+  translate(width / 2 + 30, height / 2, 0);
+  rotateX(-PI / 6);
+  rotateY(PI / 3 + mouseY / float(height) * PI);
+  box(45);
+  translate(0, 0, -50);
+  box(30);
+}

src/data/examples/ko/23_Camera/00_moveEye.js

@@ -0,0 +1,26 @@
+/*
+ * @name Move Eye
+ * @description The camera lifts up (controlled by mouseY) while looking at the same point.
+ */
+
+void setup() {
+  size(640, 360, P3D);
+  fill(204);
+}
+
+void draw() {
+  lights();
+  background(0);
+
+  // Change height of the camera with mouseY
+  camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
+    0.0, 0.0, 0.0, // centerX, centerY, centerZ
+    0.0, 1.0, 0.0); // upX, upY, upZ
+
+  noStroke();
+  box(90);
+  stroke(255);
+  line(-100, 0, 0, 100, 0, 0);
+  line(0, -100, 0, 0, 100, 0);
+  line(0, 0, -100, 0, 0, 100);
+}