Skip to content

Commit cf23b37

Browse files
authored
Merge pull request #782 from ksen0/2.0-shader-tutorial-edits
p5.strands tutorial added GLSL link and minor phrasing edits
2 parents 89db201 + 70d22ec commit cf23b37

1 file changed

Lines changed: 9 additions & 6 deletions

File tree

src/content/tutorials/en/intro-to-p5-strands.mdx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,22 @@ import Callout from "../../../components/Callout/index.astro";
2424

2525
## Introduction
2626

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!
2828

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.
3030

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.
3236

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.
3437

3538
## What is a Shader?
3639

3740
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)
4043

4144
<Callout title="Info">
4245
A fragment shader is sometimes referred to as a pixel shader.

0 commit comments

Comments
 (0)