Skip to content

Commit d946a60

Browse files
aceslowmanaceslowman
committed
added text, examples, and internationalization for each tutorial
1 parent cbff860 commit d946a60

12 files changed

+3178
-1766
lines changed

‎i18n-tracking.yml

Lines changed: 2211 additions & 1289 deletions
Large diffs are not rendered by default.

‎src/assets/learn/basic3d/cameraExample.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22

33
<head>
4-
<title>3d Lighting Example</title>
4+
<title>3D Camera Example</title>
55
<script src="../../../assets/js/p5.min.js"></script>
66
<!-- uncomment lines below to include extra p5 libraries -->
77
<!--<script src="../addons/p5.sound.js"></script>-->
@@ -45,14 +45,16 @@
4545
<div id="pageContainer">
4646
<div id="sketchContainer"></div>
4747
<div id="controlsContainer">
48-
<label>Camera Type:
49-
<select id="cameraType">
50-
<option value="perspective" selected >perspective</option>
51-
<option value="ortho">ortho</option>
52-
<option value="orbitControl">orbitControl</option>
53-
</select>
48+
<label>Ortho?:
49+
<input id="cameraType" type="checkbox" />
5450
</label>
5551
<label>camera fov: <input id="cameraFov" type="range" step="0.001" min="69" max="72.5" value="70"/></label>
52+
53+
<label>x position: <input id="cameraPosX" type="range" step="0.1" min="-500" max="500" value="200"/></label>
54+
<label>y position: <input id="cameraPosY" type="range" step="0.1" min="-500" max="500" value="-200"/></label>
55+
<label>z position: <input id="cameraPosZ" type="range" step="0.1" min="-500" max="500" value="200"/></label>
56+
57+
<p id="methodText"></p>
5658
</div>
5759
</div>
5860
</body>

‎src/assets/learn/basic3d/cameraExample.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
let fovSlider;
2+
let camPosX, camPosY, camPosZ;
23
let selectCameraType;
34
let cameraType;
5+
let methodText;
46

57
function setup() {
68
let canvas = createCanvas(350, 350, WEBGL);
@@ -10,27 +12,29 @@ function setup() {
1012

1113
fovSlider = document.querySelector('#cameraFov')
1214
selectCameraType = document.querySelector('#cameraType')
15+
16+
camPosX = document.querySelector('#cameraPosX')
17+
camPosY = document.querySelector('#cameraPosY')
18+
camPosZ = document.querySelector('#cameraPosZ')
19+
20+
methodText = document.querySelector('#methodText')
1321
}
1422

1523
function draw() {
1624
background(220);
1725

26+
// orbitControl()
1827

19-
cameraType = selectCameraType.value;
20-
21-
if(cameraType === 'ortho') {
22-
camera(200,-200,200)
28+
if(selectCameraType.checked) {
29+
camera(camPosX.value,camPosY.value,camPosZ.value)
2330
ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 500);
24-
} else if(cameraType === 'perspective'){
25-
camera(200,-200,200)
26-
perspective(fovSlider.value)
2731
} else {
28-
orbitControl()
29-
}
30-
32+
camera(camPosX.value,camPosY.value,camPosZ.value)
33+
perspective(fovSlider.value)
34+
}
35+
3136
box(50);
32-
}
3337

34-
function cameraTypeChanged(e) {
35-
console.log(selectCameraType.value)
38+
methodText.innerHTML = selectCameraType.checked ? 'ortho(); </br>' : 'perspective('+parseFloat(fovSlider.value).toFixed(1)+'); </br>'
39+
methodText.innerHTML += '<br />camera('+parseFloat(camPosX.value).toFixed(1)+','+parseFloat(camPosY.value).toFixed(1)+','+parseFloat(camPosZ.value).toFixed(1)+');'
3640
}

‎src/assets/learn/basic3d/lightingExample.html

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,22 @@
4545
<div id="pageContainer">
4646
<div id="sketchContainer"></div>
4747
<div id="controlsContainer">
48-
<label>Light Type:
49-
<select id="lightType">
50-
<option value="ambient">ambient</option>
51-
<option value="directional">directional</option>
52-
<option value="spotlight">spotlight</option>
53-
<option value="point">point</option>
54-
</select>
55-
</label>
48+
49+
<label style="color:black;">
50+
ambient: <input id="toggleAmbient" type="checkbox" checked/>
51+
</label>
52+
53+
<label style="color:red;">
54+
directional: <input id="toggleDirectional" type="checkbox" checked/>
55+
</label>
56+
57+
<label style="color:green;">
58+
spotlight: <input id="toggleSpotlight" type="checkbox" checked/>
59+
</label>
60+
61+
<label style="color:blue;">
62+
point: <input id="togglePoint" type="checkbox" checked/>
63+
</label>
5664

5765
</div>
5866
</div>

‎src/assets/learn/basic3d/lightingExample.js

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,79 @@
1-
let selectLightType;
1+
let toggleAmbient, toggleDirectional, toggleSpotlight, togglePoint;
2+
3+
let pointX, pointY, pointZ;
4+
let spotX, spotY, spotZ;
5+
let directionX, directionY, directionZ;
26

37
function setup() {
48
let canvas = createCanvas(350, 350, WEBGL);
5-
canvas.parent("sketchContainer")
9+
canvas.parent("sketchContainer");
610

711
debugMode();
812

9-
selectLightType = document.querySelector('#lightType')
13+
toggleAmbient = document.querySelector("#toggleAmbient");
14+
toggleDirectional = document.querySelector("#toggleDirectional");
15+
toggleSpotlight = document.querySelector("#toggleSpotlight");
16+
togglePoint = document.querySelector("#togglePoint");
1017
}
1118

1219
function draw() {
1320
background(220);
1421
camera(200, -200, 200);
1522

16-
lightType = selectLightType.value;
17-
18-
switch (lightType) {
19-
case "ambient":
20-
ambientLight(50);
21-
break;
22-
case "directional":
23-
directionalLight(255, 0, 0, 0.25, 0.25, 0);
24-
break;
25-
case "spotlight":
26-
spotLight(0, 255, 0, 150, 0, 250, 0, 0, -1);
27-
break;
28-
case "point":
29-
// pointLight(0, 0, 255, locX, locY, 250);
30-
break;
31-
}
23+
noStroke();
24+
25+
directionX = 0
26+
directionY = -1
27+
directionZ = 0
28+
29+
pointX = 80;
30+
pointY = -20;
31+
pointZ = 0;
32+
33+
spotX = 0
34+
spotY = -10
35+
spotZ = 150
36+
37+
push();
38+
if (toggleAmbient.checked) ambientLight(50);
39+
40+
if (toggleDirectional.checked) directionalLight(255, 0, 0, 0.25, 0.25, 0);
41+
42+
if (toggleSpotlight.checked) spotLight(0, 255, 0, spotX, spotY, spotZ, 0, 0, -1);
43+
44+
if (togglePoint.checked) pointLight(0, 0, 255, pointX, pointY, pointZ);
3245

3346
box(50);
34-
}
47+
pop();
48+
49+
// draw debug directional light
50+
if (toggleDirectional.checked) {
51+
push();
52+
translate(0,-150,0);
53+
scale(0.3);
54+
fill('red');
55+
cone();
56+
pop();
57+
}
58+
59+
// draw debug spotlight
60+
if (toggleSpotlight.checked) {
61+
push();
62+
translate(spotX, spotY, spotZ);
63+
scale(0.3);
64+
rotateX(PI /2)
65+
fill('green');
66+
cone();
67+
pop();
68+
}
69+
70+
// draw debug point light
71+
if (togglePoint.checked) {
72+
push();
73+
translate(pointX, pointY, pointZ);
74+
scale(0.2);
75+
fill('blue');
76+
sphere();
77+
pop();
78+
}
79+
}

‎src/assets/learn/basic3d/materialsExample.html

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22

33
<head>
4-
<title>3d Lighting Example</title>
4+
<title>3D Materials Example</title>
55
<script src="../../../assets/js/p5.min.js"></script>
66
<!-- uncomment lines below to include extra p5 libraries -->
77
<!--<script src="../addons/p5.sound.js"></script>-->
@@ -45,13 +45,24 @@
4545
<div id="pageContainer">
4646
<div id="sketchContainer"></div>
4747
<div id="controlsContainer">
48-
<label>Material Type:
49-
<select id="materialType">
50-
<option value="normalMaterial">normalMaterial</option>
51-
<option value="ambientMaterial">ambientMaterial</option>
52-
<option value="emissiveMaterial">emissiveMaterial</option>
53-
<option value="specularMaterial">specularMaterial</option>
54-
</select>
48+
<label>Sphere:
49+
<input id="shapeType" type="checkbox" />
50+
</label>
51+
52+
<label style="color:black;">
53+
normalMaterial: <input id="toggleNormalMaterial" type="checkbox" checked/>
54+
</label>
55+
56+
<label style="color:red;">
57+
ambientMaterial: <input id="toggleAmbientMaterial" type="checkbox"/>
58+
</label>
59+
60+
<label style="color:green;">
61+
emissiveMaterial: <input id="toggleEmissiveMaterial" type="checkbox"/>
62+
</label>
63+
64+
<label style="color:blue;">
65+
specularMaterial: <input id="toggleSpecularMaterial" type="checkbox"/>
5566
</label>
5667
</div>
5768
</div>

‎src/assets/learn/basic3d/materialsExample.js

Lines changed: 44 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,63 @@
1-
let fovSlider;
2-
let selectMaterialType;
3-
let materialType;
1+
let shapeType;
2+
3+
let toggleNormalMaterial,
4+
toggleAmbientMaterial,
5+
toggleEmissiveMaterial,
6+
toggleSpecularMaterial;
47

58
function setup() {
69
let canvas = createCanvas(350, 350, WEBGL);
710
canvas.parent("sketchContainer")
811

912
debugMode();
1013

11-
selectMaterialType = document.querySelector('#materialType')
14+
shapeType = document.querySelector('#shapeType')
15+
16+
toggleNormalMaterial = document.querySelector('#toggleNormalMaterial')
17+
toggleAmbientMaterial = document.querySelector('#toggleAmbientMaterial')
18+
toggleEmissiveMaterial = document.querySelector('#toggleEmissiveMaterial')
19+
toggleSpecularMaterial = document.querySelector('#toggleSpecularMaterial')
1220
}
1321

1422
function draw() {
1523
background(220);
16-
camera(200, -200, 200);
24+
camera(0, -100, 250);
1725

18-
materialType = selectMaterialType.value;
19-
2026
let locX = mouseX - width / 2;
2127
let locY = mouseY - height / 2;
2228
pointLight(255, 255, 255, locX, locY, 50);
2329

24-
switch (materialType) {
25-
case "normalMaterial":
26-
normalMaterial();
27-
break;
28-
case "ambientMaterial":
29-
ambientMaterial(255, 0, 0);
30-
break;
31-
case "emissiveMaterial":
32-
emissiveMaterial(0, 255, 0);
33-
break;
34-
case "specularMaterial":
35-
specularMaterial(0, 0, 255);
36-
break;
30+
if(toggleNormalMaterial.checked) {
31+
normalMaterial();
32+
}
33+
34+
if(toggleAmbientMaterial.checked) {
35+
ambientMaterial(255, 0, 0);
3736
}
3837

39-
box(50);
38+
if(toggleEmissiveMaterial.checked) {
39+
emissiveMaterial(0, 255, 0);
40+
}
41+
42+
if(toggleSpecularMaterial.checked) {
43+
specularMaterial(0, 0, 255);
44+
}
45+
46+
if(shapeType.checked) {
47+
sphere(50);
48+
} else {
49+
push();
50+
rotateY(PI/4)
51+
box(50);
52+
pop();
53+
}
54+
55+
// draw debug point light
56+
push();
57+
translate(locX, locY, 50);
58+
scale(0.2);
59+
noLights()
60+
fill('blue');
61+
sphere();
62+
pop();
4063
}

0 commit comments

Comments
 (0)