@@ -103,23 +103,23 @@ let firstShader;
103103// which determines how to modify the baseColorShader()
104104
105105function firstShaderCallback() {
106- getFinalColor((color) => {
107- color = [1, 1, 0, 1]; // Yellow in RGBA (0-1 scale)
108- return color;
109- });
106+ getFinalColor((color) => {
107+ color = [1, 1, 0, 1]; // Yellow in RGBA (0-1 scale)
108+ return color;
109+ });
110110}
111111
112112async function setup() {
113- createCanvas(200, 200, WEBGL);
113+ createCanvas(200, 200, WEBGL);
114114 pixelDensity(1);
115- // p5.strands are made using the modify function on a shader
116- firstShader = baseColorShader().modify(firstShaderCallback);
115+ // p5.strands are made using the modify function on a shader
116+ firstShader = baseColorShader().modify(firstShaderCallback);
117117}
118118
119119function draw() {
120120 background(0);
121- shader(firstShader);
122- sphere(80);
121+ shader(firstShader);
122+ sphere(80);
123123}
124124` } />
125125
@@ -164,29 +164,29 @@ let instancingStrokeShader;
164164let particleModel;
165165
166166function instancingCallback() {
167- getWorldInputs((inputs) => {
168- // Offset each instance by its ID
169- inputs.position.x += instanceID() * 20;
170- // Move the particles left on the screen
171- inputs.position.x -= 150;
172- return inputs;
173- });
167+ getWorldInputs((inputs) => {
168+ // Offset each instance by its ID
169+ inputs.position.x += instanceID() * 20;
170+ // Move the particles left on the screen
171+ inputs.position.x -= 150;
172+ return inputs;
173+ });
174174}
175175
176176async function setup() {
177- createCanvas(300, 300, WEBGL);
178- pixelDensity(1);
179- particleModel = buildGeometry(() => sphere(10, 10, 2));
180- instancingShader = baseColorShader().modify(instancingCallback);
181- instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
177+ createCanvas(300, 300, WEBGL);
178+ pixelDensity(1);
179+ particleModel = buildGeometry(() => sphere(10, 10, 2));
180+ instancingShader = baseColorShader().modify(instancingCallback);
181+ instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
182182}
183183
184184function draw() {
185- background(0);
186- orbitControl();
187- shader(instancingShader)
188- strokeShader(instancingStrokeShader)
189- model(particleModel, 16);
185+ background(0);
186+ orbitControl();
187+ shader(instancingShader)
188+ strokeShader(instancingStrokeShader)
189+ model(particleModel, 16);
190190}
191191` } />
192192
@@ -343,14 +343,14 @@ This perspective makes it easier to determine how surfaces appear to the viewer:
343343
344344``` js
345345function fresnelCallback () {
346- getCameraInputs ((inputs ) => {
347- // The normal vector on the sphere's surface
348- let normalVector = normalize (inputs .normal );
349- // This creates a vector pointing from the surface to the camera
350- let viewVector = normalize (- inputs .position );
351- // ...
352- return inputs;
353- })
346+ getCameraInputs ((inputs ) => {
347+ // The normal vector on the sphere's surface
348+ let normalVector = normalize (inputs .normal );
349+ // This creates a vector pointing from the surface to the camera
350+ let viewVector = normalize (- inputs .position );
351+ // ...
352+ return inputs;
353+ })
354354}
355355```
356356
0 commit comments