From d79fed1acb84895880b50423ba1fbb2fa50261bd Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 02:15:01 +0900 Subject: [PATCH 01/10] Restore camera settings according to 100x100 Restore camera settings according to 100x100 --- src/webgl/interaction.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js index 828fdd32a2..ba3d02c3c7 100644 --- a/src/webgl/interaction.js +++ b/src/webgl/interaction.js @@ -45,6 +45,8 @@ import * as constants from '../core/constants'; * describe( * 'Camera orbits around a box when mouse is hold-clicked & then moved.' * ); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * function draw() { * background(200); @@ -396,6 +398,7 @@ p5.prototype.orbitControl = function( * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(); * describe( @@ -426,6 +429,7 @@ p5.prototype.orbitControl = function( * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(GRID); * describe('a 3D box is centered on a grid in a 3D sketch.'); @@ -447,6 +451,7 @@ p5.prototype.orbitControl = function( * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(AXES); * describe( @@ -472,6 +477,7 @@ p5.prototype.orbitControl = function( * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(GRID, 100, 10, 0, 0, 0); * describe('a 3D box is centered on a grid in a 3D sketch'); @@ -493,6 +499,7 @@ p5.prototype.orbitControl = function( * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); + + perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0); * describe( @@ -601,6 +608,7 @@ p5.prototype.debugMode = function(...args) { * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(); * describe( From bff13f98a69d95a2dc6320ae0903a00bffb0ca6b Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 02:41:13 +0900 Subject: [PATCH 02/10] Restore camera settings according to 100x100 Restore camera settings according to 100x100 --- src/webgl/p5.Camera.js | 68 +++++++++++++++++++++++++++++++++--------- 1 file changed, 54 insertions(+), 14 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 64d64105e5..0df8ba3ff8 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -45,6 +45,7 @@ import p5 from '../core/main'; * * function setup() { * createCanvas(100, 100, WEBGL); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * describe('a square moving closer and then away from the camera.'); * } * function draw() { @@ -72,6 +73,7 @@ import p5 from '../core/main'; * * function setup() { * createCanvas(100, 100, WEBGL); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * //create sliders * for (var i = 0; i < 6; i++) { * if (i === 2) { @@ -154,6 +156,7 @@ p5.prototype.camera = function (...args) { * //drag the mouse to look around! * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); * perspective(PI / 3.0, width / height, 0.1, 500); * describe( * 'two colored 3D boxes move back and forth, rotating as mouse is dragged.' @@ -164,16 +167,16 @@ p5.prototype.camera = function (...args) { * orbitControl(); * normalMaterial(); * - * translate(0, 0, 550); * rotateX(-0.3); * rotateY(-0.2); + * translate(0, 0, -50); * * push(); - * translate(-15, 0, sin(frameCount / 30) * 95); + * translate(-15, 0, sin(frameCount / 30) * 65); * box(30); * pop(); * push(); - * translate(15, 0, sin(frameCount / 30 + PI) * 95); + * translate(15, 0, sin(frameCount / 30 + PI) * 65); * box(30); * pop(); * } @@ -219,6 +222,7 @@ p5.prototype.perspective = function (...args) { * //there's no vanishing point * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); * ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500); * describe( * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' @@ -229,7 +233,6 @@ p5.prototype.perspective = function (...args) { * orbitControl(); * normalMaterial(); * - * translate(0,0,500); * rotateX(0.2); * rotateY(-0.2); * push(); @@ -287,6 +290,7 @@ p5.prototype.ortho = function (...args) { * function setup() { * createCanvas(100, 100, WEBGL); * setAttributes('antialias', true); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); * frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200); * describe( * 'two 3D boxes move back and forth along same plane, rotating as mouse is dragged.' @@ -296,7 +300,7 @@ p5.prototype.ortho = function (...args) { * background(200); * orbitControl(); * normalMaterial(); - * translate(0,0,700); + * * rotateY(-0.2); * rotateX(-0.3); * push(); @@ -353,6 +357,8 @@ p5.prototype.frustum = function (...args) { * createCanvas(100, 100, WEBGL); * background(0); * camera = createCamera(); + * camera.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * camera.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * describe('An example that creates a camera and moves it around the box.'); * } * @@ -435,6 +441,8 @@ p5.prototype.createCamera = function () { * createCanvas(100, 100, WEBGL); * normalMaterial(); * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * // set initial pan angle * cam.pan(-0.8); * describe( @@ -751,6 +759,7 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * // create a camera * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); * // give it a perspective projection * cam.perspective(PI / 3.0, width / height, 0.1, 500); * } @@ -760,16 +769,16 @@ p5.Camera = class Camera { * orbitControl(); * normalMaterial(); * - * translate(0, 0, 550); * rotateX(-0.3); * rotateY(-0.2); + * translate(0, 0, -50); * * push(); - * translate(-15, 0, sin(frameCount / 30) * 95); + * translate(-15, 0, sin(frameCount / 30) * 65); * box(30); * pop(); * push(); - * translate(15, 0, sin(frameCount / 30 + PI) * 95); + * translate(15, 0, sin(frameCount / 30 + PI) * 65); * box(30); * pop(); * } @@ -871,6 +880,7 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * // create a camera * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); * // give it an orthographic projection * cam.ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500); * } @@ -878,7 +888,7 @@ p5.Camera = class Camera { * background(200); * orbitControl(); * normalMaterial(); - * translate(0,0,500); + * * rotateX(0.2); * rotateY(-0.2); * push(); @@ -969,6 +979,7 @@ p5.Camera = class Camera { * setAttributes('antialias', true); * // create a camera * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); * // set its frustum * cam.frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200); * } @@ -977,7 +988,7 @@ p5.Camera = class Camera { * background(200); * orbitControl(); * normalMaterial(); - * translate(0,0,700); + * * rotateY(-0.2); * rotateX(-0.3); * push(); @@ -1115,6 +1126,8 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * normalMaterial(); * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * // set initial pan angle * cam.pan(-0.8); * } @@ -1173,6 +1186,8 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * normalMaterial(); * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * // set initial tilt * cam.tilt(-0.8); * } @@ -1231,6 +1246,8 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * normalMaterial(); * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * * function draw() { @@ -1333,6 +1350,7 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * // create a camera * cam = createCamera(); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * // create sliders * for (var i = 0; i < 6; i++) { * if (i === 2) { @@ -1463,6 +1481,8 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * normalMaterial(); * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * * function draw() { @@ -1536,6 +1556,8 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * normalMaterial(); * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * * function draw() { @@ -1600,8 +1622,11 @@ p5.Camera = class Camera { * // Set the initial state to initialCamera and set it to the camera * // used for drawing. Then set cam to be the active camera. * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * initialCam = createCamera(); * initialCam.camera(100, 100, 100, 0, 0, 0, 0, 0, -1); + * initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * cam.set(initialCam); * * setCamera(cam); @@ -1678,11 +1703,17 @@ p5.Camera = class Camera { * * // camera for slerp. * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * // cam0 is looking at the cube from the front. + * cam0 = createCamera(); + * cam0.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam0.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * // cam1 is pointing straight to the right in the cube * // at the same position as cam0 by doing a pan(-PI/2). - * cam0 = createCamera(); * cam1 = createCamera(); + * cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * cam1.pan(-PI/2); * * // we only use cam. @@ -1720,9 +1751,18 @@ p5.Camera = class Camera { * createCanvas(100, 100, WEBGL); * strokeWeight(3); * - * cam = createCamera(); // main camera - * lastCam = createCamera(); // Camera for recording loc info before reset - * initialCam = createCamera(); // Camera for recording the initial state + * // main camera + * cam = createCamera(); + * cam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); + * // Camera for recording loc info before reset + * lastCam = createCamera(); + * lastCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * lastCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); + * // Camera for recording the initial state + * initialCam = createCamera(); + * initialCam.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * initialCam.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * * setCamera(cam); // set main camera * } From f9e4ec44b3be4be04d524b74c08eb91b204fc1a0 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 02:48:22 +0900 Subject: [PATCH 03/10] fix setCamera Regarding the setCamera() example, the transition was not clean, so I modified the code. --- src/webgl/p5.Camera.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index 0df8ba3ff8..c2c5cf371d 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -2305,10 +2305,12 @@ p5.Camera = class Camera { * normalMaterial(); * * cam1 = createCamera(); + * cam1.camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * cam1.perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * cam2 = createCamera(); * cam2.setPosition(30, 0, 50); * cam2.lookAt(0, 0, 0); - * cam2.ortho(); + * cam2.ortho(-50, 50, -50, 50, 0, 200); * * // set variable for previously active camera: * currentCamera = 1; @@ -2321,10 +2323,6 @@ p5.Camera = class Camera { * function draw() { * background(200); * - * // camera 1: - * cam1.lookAt(0, 0, 0); - * cam1.setPosition(sin(frameCount / 60) * 200, 0, 100); - * * // every 100 frames, switch between the two cameras * if (frameCount % 100 === 0) { * if (currentCamera === 1) { @@ -2336,6 +2334,10 @@ p5.Camera = class Camera { * } * } * + * // camera 1: + * cam1.lookAt(0, 0, 0); + * cam1.setPosition(sin(frameCount / 60) * 200, 0, 100); + * * drawBoxes(); * } * From 27c909a8b38d61dba55c9ca3af32813ff6c42269 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 02:56:41 +0900 Subject: [PATCH 04/10] rotateX,Y,Z example fix It looks like a parallel projection, so I'll fix it. --- src/core/transform.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/core/transform.js b/src/core/transform.js index 1fe7987a09..4ed2e0118e 100644 --- a/src/core/transform.js +++ b/src/core/transform.js @@ -275,6 +275,8 @@ p5.prototype.rotate = function(angle, axis) { * * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * function draw() { * background(255); @@ -311,6 +313,8 @@ p5.prototype.rotateX = function(angle) { * * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * function draw() { * background(255); @@ -349,6 +353,8 @@ p5.prototype.rotateY = function(angle) { * * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * function draw() { * background(255); From 2cf2d5e460160ca771e301e66a7e1435693a74e2 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 03:07:36 +0900 Subject: [PATCH 05/10] Update light.js The way I set the background was sloppy, so I fixed it. --- src/webgl/light.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/webgl/light.js b/src/webgl/light.js index fcfd9e60d5..8dd5060245 100644 --- a/src/webgl/light.js +++ b/src/webgl/light.js @@ -519,28 +519,31 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { *
* * let img; + * * function preload() { * img = loadImage('assets/outdoor_image.jpg'); * } * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0); + * perspective(PI/3, 1, 5, 500); * } * function draw() { * background(220); - * imageMode(CENTER); + * * push(); - * translate(0, 0, -200); - * scale(2); - * image(img, 0, 0, width, height); + * camera(0, 0, 1, 0, 0, 0, 0, 1, 0); + * ortho(-50, 50, -50, 50, 0, 1); + * image(img, -50, -50, 100, 100); * pop(); + * * ambientLight(50); * imageLight(img); * specularMaterial(20); * noStroke(); - * scale(2); * rotateX(frameCount * 0.005); * rotateY(frameCount * 0.005); - * box(25); + * box(50); * } * *
@@ -551,6 +554,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * * let img; * let slider; + * * function preload() { * img = loadImage('assets/outdoor_spheremap.jpg'); * } @@ -558,22 +562,24 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * createCanvas(100, 100, WEBGL); * slider = createSlider(0, 400, 100, 1); * slider.position(0, height); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0); + * perspective(PI/3, 1, 5, 500); * } * function draw() { * background(220); - * imageMode(CENTER); + * * push(); - * translate(0, 0, -200); - * scale(2); - * image(img, 0, 0, width, height); + * camera(0, 0, 1, 0, 0, 0, 0, 1, 0); + * ortho(-50, 50, -50, 50, 0, 1); + * image(img, -50, -50, 100, 100); * pop(); + * * ambientLight(50); * imageLight(img); * specularMaterial(20); * shininess(slider.value()); * noStroke(); - * scale(2); - * sphere(15); + * sphere(30); * } * * @@ -604,6 +610,8 @@ p5.prototype.imageLight = function(img){ * * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * describe('the light is partially ambient and partially directional'); * } * function draw() { From c1c6222ad144159cea6f96bd36ae4b0e3f35d1d8 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 03:10:52 +0900 Subject: [PATCH 06/10] Update 3d_primitives.js camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); --- src/webgl/3d_primitives.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 83bcef7468..f5bd16fd17 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -283,6 +283,8 @@ p5.prototype.plane = function(width, height, detailX, detailY) { * // with width, height and depth of 50 * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * describe('a white box rotating in 3D space'); * } * @@ -1026,6 +1028,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * // with ring radius 30 and tube radius 15 * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * describe('a rotating white torus'); * } * @@ -1045,6 +1049,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * let detailX; * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * detailX = createSlider(3, 24, 3); * detailX.position(10, height + 5); * detailX.style('width', '80px'); @@ -1068,6 +1074,8 @@ p5.prototype.ellipsoid = function(radiusX, radiusY, radiusZ, detailX, detailY) { * let detailY; * function setup() { * createCanvas(100, 100, WEBGL); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * detailY = createSlider(3, 16, 3); * detailY.position(10, height + 5); * detailY.style('width', '80px'); From c87e94986ed7334640cac504fb54c67c9bb24c99 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 03:22:10 +0900 Subject: [PATCH 07/10] Update p5.Camera.js add information about new 80,800,8000 camera default system. --- src/webgl/p5.Camera.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js index c2c5cf371d..5d9f44c2c2 100644 --- a/src/webgl/p5.Camera.js +++ b/src/webgl/p5.Camera.js @@ -26,7 +26,7 @@ import p5 from '../core/main'; * to view the position of your camera. * * If no parameters are given, the following default is used: - * camera(0, 0, (height/2) / tan(PI/6), 0, 0, 0, 0, 1, 0) + * camera(0, 0, 800, 0, 0, 0, 0, 1, 0) * @method camera * @constructor * @for p5 @@ -205,7 +205,7 @@ p5.prototype.perspective = function (...args) { * maximum z values. * * If no parameters are given, the following default is used: - * ortho(-width/2, width/2, -height/2, height/2). + * ortho(-width/2, width/2, -height/2, height/2, 0, max(width, height)). * @method ortho * @for p5 * @param {Number} [left] camera frustum left plane @@ -274,7 +274,7 @@ p5.prototype.ortho = function (...args) { * * If no parameters are given, the following default is used: * frustum(-width/20, width/20, height/20, -height/20, eyeZ/10, eyeZ*10), - * where eyeZ is equal to ((height/2) / tan(PI/6)). + * where eyeZ is equal to 800. * @method frustum * @for p5 * @param {Number} [left] camera frustum left plane @@ -423,7 +423,7 @@ p5.prototype.createCamera = function () { * setPosition() * method sets the camera's position in world-space. * - * The camera object propreties + * The camera object properties * eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ * which describes camera position, orientation, and projection * are also accessible via the camera object generated using @@ -494,7 +494,7 @@ p5.Camera = class Camera { this.yScale = 1; } /** - * camera position value on x axis + * camera position value on x axis. default value is 0 * @property {Number} eyeX * @readonly * @example @@ -523,7 +523,7 @@ p5.Camera = class Camera { */ /** - * camera position value on y axis + * camera position value on y axis. default value is 0 * @property {Number} eyeY * @readonly * @example @@ -551,7 +551,7 @@ p5.Camera = class Camera { */ /** - * camera position value on z axis + * camera position value on z axis. default value is 800 * @property {Number} eyeZ * @readonly * @example From 8a00549ebcbe5e31f9b203357ed7087b95b5151d Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Mon, 11 Dec 2023 03:33:11 +0900 Subject: [PATCH 08/10] indent fix fix indent --- src/webgl/interaction.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js index ba3d02c3c7..fc40a1f602 100644 --- a/src/webgl/interaction.js +++ b/src/webgl/interaction.js @@ -45,8 +45,8 @@ import * as constants from '../core/constants'; * describe( * 'Camera orbits around a box when mouse is hold-clicked & then moved.' * ); - * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); - * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); + * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * } * function draw() { * background(200); @@ -499,7 +499,7 @@ p5.prototype.orbitControl = function( * function setup() { * createCanvas(100, 100, WEBGL); * camera(0, -30, 100, 0, 0, 0, 0, 1, 0); - + perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); + * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3)); * normalMaterial(); * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0); * describe( From 5c8df987d7efedcb41d324614cc61b0ea69aa4d2 Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Tue, 12 Dec 2023 20:20:30 +0900 Subject: [PATCH 09/10] avoid to use image() The image() function uses push() to pop() internally, so the processing is duplicated and it's not pretty. Also, since it may be affected by imageMode(), I thought this would be better. --- src/webgl/light.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/webgl/light.js b/src/webgl/light.js index 8dd5060245..a6c616a875 100644 --- a/src/webgl/light.js +++ b/src/webgl/light.js @@ -533,8 +533,10 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * * push(); * camera(0, 0, 1, 0, 0, 0, 0, 1, 0); - * ortho(-50, 50, -50, 50, 0, 1); - * image(img, -50, -50, 100, 100); + * ortho(-1, 1, -1, 1, 0, 1); + * noStroke(); + * texture(img); + * plane(2); * pop(); * * ambientLight(50); @@ -570,8 +572,10 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * * push(); * camera(0, 0, 1, 0, 0, 0, 0, 1, 0); - * ortho(-50, 50, -50, 50, 0, 1); - * image(img, -50, -50, 100, 100); + * ortho(-1, 1, -1, 1, 0, 1); + * noStroke(); + * texture(img); + * plane(2); * pop(); * * ambientLight(50); From 15670d6ab68ed7b0289690949e03e204c4a0bc6c Mon Sep 17 00:00:00 2001 From: INARI_DARKFOX <39549290+inaridarkfox4231@users.noreply.github.com> Date: Tue, 12 Dec 2023 23:26:10 +0900 Subject: [PATCH 10/10] add noLights() add noLights() --- src/webgl/light.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/webgl/light.js b/src/webgl/light.js index a6c616a875..81f052c3d1 100644 --- a/src/webgl/light.js +++ b/src/webgl/light.js @@ -534,6 +534,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * push(); * camera(0, 0, 1, 0, 0, 0, 0, 1, 0); * ortho(-1, 1, -1, 1, 0, 1); + * noLights(); * noStroke(); * texture(img); * plane(2); @@ -573,6 +574,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) { * push(); * camera(0, 0, 1, 0, 0, 0, 0, 1, 0); * ortho(-1, 1, -1, 1, 0, 1); + * noLights(); * noStroke(); * texture(img); * plane(2);