You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/tutorials/en/lights-camera-materials.mdx
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,7 +73,7 @@ perspective(
73
73
74
74

75
75
76
-
You can move cameras by passing arguments to `camera()`, but constantly moving and adjusting the camera in code can be tedious. [`orbitControl()`](/reference/en/p5/orbitControl) can be used to zoom, pan, and position the camera using the mouse. You can use it by calling it at the beginning your `draw()` function, outside of any `push()` and `pop()` calls:
76
+
You can move cameras by passing arguments to `camera()`, but constantly moving and adjusting the camera in code can be tedious. [`orbitControl()`](/reference/p5/orbitControl) can be used to zoom, pan, and position the camera using the mouse. You can use it by calling it at the beginning your `draw()` function, outside of any `push()` and `pop()` calls:
77
77
78
78
<EditableSketchcode={`
79
79
function setup() {
@@ -96,11 +96,11 @@ Try building a sculpture out of cubes that looks like one thing from one side, b
96
96
97
97
Light is another essential part of a 3D scene, helping convey shape and depth. p5.js has a few different types of light that can be used in a sketch:
98
98
99
-
-[`ambientLight()`](/reference/en/p5/ambientLight): Ambient light makes everything display a little brighter, with no consideration for light position or direction.
100
-
-[`directionalLight()`](/reference/en/p5/directionalLight): A directional light is a light without a position that shines from a single angle, which can be especially useful for communicating depth in a scene, or when a scene needs a 'sun' light. This function accepts color and direction arguments.
101
-
-[`pointLight()`](/reference/en/p5/pointLight): A point light emits light from a single point in all directions, similar to a lightbulb. This function accepts color and position arguments.
102
-
-[`spotLight()`](/reference/en/p5/spotLight): A spot light emits light from a single point in a single direction. This light is cast in a conical shape and its radius and concentration can be adjusted.
103
-
-[`imageLight()`](/reference/en/p5/imageLight): Using an image as a light source is like placing your scene inside a huge sphere textured with that image, sending light into the scene.
99
+
-[`ambientLight()`](/reference/p5/ambientLight/): Ambient light makes everything display a little brighter, with no consideration for light position or direction.
100
+
-[`directionalLight()`](/reference/p5/directionalLight/): A directional light is a light without a position that shines from a single angle, which can be especially useful for communicating depth in a scene, or when a scene needs a 'sun' light. This function accepts color and direction arguments.
101
+
-[`pointLight()`](/reference/p5/pointLight/): A point light emits light from a single point in all directions, similar to a lightbulb. This function accepts color and position arguments.
102
+
-[`spotLight()`](/reference/p5/spotLight/): A spot light emits light from a single point in a single direction. This light is cast in a conical shape and its radius and concentration can be adjusted.
103
+
-[`imageLight()`](/reference/p5/imageLight/): Using an image as a light source is like placing your scene inside a huge sphere textured with that image, sending light into the scene.
104
104
-[`noLight()`](/reference/en/p5/noLight): Makes it so that all subsequently drawn geometry is rendered without any lighting. This can be useful when you want flat, unshaded geometry.
105
105
106
106
These lights should be used within `draw()`. One image light and up to 5 lights of each other kind can be used simultaneously per shape drawn, allowing you to compose a scene with varied and complex lighting sources. You can also contain light functions within `push()` and `pop()` to contain lights to just one section of code, allowing you to use a different set of lights for another shape. Since lighting is done per shape, each object in a scene will not cast shadows on other objects.
@@ -163,11 +163,11 @@ Objects can appear different based on their material properties. Materials dicta
163
163
164
164
There are five material properties in p5.js that combine to control the look of an object:
165
165
166
-
-[`fill()`](/reference/en/p5/fill): This is the color used when there are no lights in the scene. When lights are added, this color mixes with the *diffuse* component of the light: the bright and dark areas of the surface due to light being directly cast on it.
167
-
-[`ambientMaterial()`](/reference/en/p5/ambientMaterial): This is a color that mixes with the `ambientLight()` set in the scene. If it is not set, this will be the same as the fill color.
168
-
-[`specularMaterial()`](/reference/en/p5/specularMaterial): This is a color that mixes with the *specular* component of the light: the reflected highlights on the surface of the shape. If this is not set, there will be no highlights on the shape.
169
-
-[`shininess()`](/reference/en/p5/shininess): This number represents how sharp the specular highlights are. A value of 1 gives spread-out, blurry highlights. The higher the shininess, the sharper and smaller the highlights get. This only makes a difference if a specular material has been set.
170
-
-[`emissiveMaterial()`](/reference/en/p5/emissiveMaterial): This is a color that gets added to the shape. It represents the light that the shape produces on its own, so it does not vary based on the other lights in the scene.
166
+
-[`fill()`](/reference/p5/fill/): This is the color used when there are no lights in the scene. When lights are added, this color mixes with the *diffuse* component of the light: the bright and dark areas of the surface due to light being directly cast on it.
167
+
-[`ambientMaterial()`](/reference/p5/ambientMaterial/): This is a color that mixes with the `ambientLight()` set in the scene. If it is not set, this will be the same as the fill color.
168
+
-[`specularMaterial()`](/reference/p5/specularMaterial/): This is a color that mixes with the *specular* component of the light: the reflected highlights on the surface of the shape. If this is not set, there will be no highlights on the shape.
169
+
-[`shininess()`](/reference/p5/shininess/): This number represents how sharp the specular highlights are. A value of 1 gives spread-out, blurry highlights. The higher the shininess, the sharper and smaller the highlights get. This only makes a difference if a specular material has been set.
170
+
-[`emissiveMaterial()`](/reference/p5/emissiveMaterial/): This is a color that gets added to the shape. It represents the light that the shape produces on its own, so it does not vary based on the other lights in the scene.
171
171
172
172
To determine the color of each pixel, each material component interacts with the scene's lights before being added together.
0 commit comments