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/intro-to-p5-strands.mdx
+9-6Lines changed: 9 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,19 +24,22 @@ import Callout from "../../../components/Callout/index.astro";
24
24
25
25
## Introduction
26
26
27
-
In this tutorial, we'll explore **p5.strands**, a new way of writing shaders using JavaScript in p5.js. While many shader effects *could* be created with the p5.js 2D renderer, shaders are more efficient for complex effects and can be consistently applied across multiple objects. Like any medium, shaders also offer their own creative possibilities to explore.
27
+
**p5.strands** is a new way of writing shaders using JavaScript in p5.js. While many shader effects *could* be created with the p5.js 2D renderer, shaders are best for applying complex effects to many objects. What creative possibilites can you find in Like any medium, shaders also offer their own creative possibilities!
28
28
29
-
Shaders are programs that run in parallel on the GPU to create visual effects. The GPU is very efficient at running millions of similar operations in parallel, whereas the CPU (which JavaScript uses) is very efficient at running sequential tasks and managing program logic.
29
+
Before p5.js 2.0, you could already use [GLSL](https://beta.p5js.org/tutorials/intro-to-glsl/) to write shaders. Shaders run in parallel on the GPU to create visual effects. The GPU can run many similar operations in parallel, much more quickly than the CPU.
30
30
31
-
As it turns out, drawing to the screen (rendering) can take advantage of parallel operations. With shaders, we can make visuals which would otherwise be slow or difficult like realistic lighting simulations, post processing effects, and rendering complex geometries. Learning shaders is valuable for anyone interested in graphics programming. This could be for game development, VFX for films, or for any kind of digital arts. It's also a fun and unique way to think using computers.
31
+
When you write a p5.js sketch, you are giving the CPU a sequence of instructions. When you add a shader - using p5.strands or GLSL - you are giving instructions to the GPU to run many times at once, simultanously. For example, in a fragment shader, that means many simultaneous calculations for each pixel.
32
+
33
+
Drawing to the screen (rendering) can take advantage of parallel operations. Shaders make it possible to create visuals that would otherwise be too slow or difficult, like realistic lighting simulations, post processing effects, and rendering complex geometries. Learning shaders is valuable for anyone interested in graphics programming. This could be for game development, VFX for films, or for any kind of digital arts. It's also a fun and unique way to think using computers.
34
+
35
+
To learn how **p5.strands** works, we'll create a 3D sketch using 4 different shaders, each illustrating different concepts. The code will be built incrementally throughout the tutorial, with the complete code available at the end.
32
36
33
-
To learn how p5.strands works, we'll create a 3D sketch using 4 different shaders, each illustrating different concepts. The code will be built incrementally throughout the tutorial, with the complete code available at the end.
34
37
35
38
## What is a Shader?
36
39
37
40
Shaders are GPU programs written in specialized languages like GLSL for WebGL. There are two main types:
38
-
-**Vertex shaders:**Transform the vertices of shapes (defining where to draw something)
39
-
-**Fragment shaders:**Determine the color of each pixel (defining how to draw something)
41
+
-**Vertex shaders:**transform the vertices of shapes (_where_ to draw something)
42
+
-**Fragment shaders:**define the color of each pixel (_how_ to draw something)
40
43
41
44
<Callouttitle="Info">
42
45
A fragment shader is sometimes referred to as a pixel shader.
0 commit comments