Color and Styling
index.html
Color is a fundamental part of creative coding with P5.js, allowing you to bring your sketches to life and convey emotion or meaning through visuals. In P5.js, you use the RGB color model to define colors. RGB stands for red, green, and blueβeach value can range from 0 to 255. For example, fill(255, 0, 0) gives you a pure red color, while fill(0, 255, 0) makes pure green.
You can also add a fourth value for transparency, called alpha. This value also ranges from 0 (completely transparent) to 255 (fully opaque). For instance, fill(0, 255, 0, 150) creates a semi-transparent green.
The fill() function sets the interior color of shapes you draw next. When you use stroke(), you define the outline color of shapes. The strokeWeight() function lets you control how thick that outline appears. If you do not want an outline, use noStroke(). The background() function sets the canvas color, which you usually call at the start of setup() or at the beginning of each frame in draw().
By combining these tools, you can create vibrant, layered artwork with both solid and transparent shapes, outlines, and backgrounds.
P5.js supports different color modes. By default, it uses RGB, where you specify red, green, and blue values. HSB stands for hue, saturation, and brightness, which can be more intuitive for certain color manipulations.
Use the colorMode() function to switch modes. For example, colorMode(HSB, 360, 100, 100) sets hue from 0β360, and both saturation and brightness from 0β100. After switching, fill() and stroke() will interpret their arguments according to the selected mode.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me some examples of using colors in P5.js?
How do I use hex codes or named colors instead of RGB values in P5.js?
What happens if I use values outside the 0-255 range in the fill or stroke functions?
Awesome!
Completion rate improved to 6.67Color and Styling
Swipe to show menu
index.html
Color is a fundamental part of creative coding with P5.js, allowing you to bring your sketches to life and convey emotion or meaning through visuals. In P5.js, you use the RGB color model to define colors. RGB stands for red, green, and blueβeach value can range from 0 to 255. For example, fill(255, 0, 0) gives you a pure red color, while fill(0, 255, 0) makes pure green.
You can also add a fourth value for transparency, called alpha. This value also ranges from 0 (completely transparent) to 255 (fully opaque). For instance, fill(0, 255, 0, 150) creates a semi-transparent green.
The fill() function sets the interior color of shapes you draw next. When you use stroke(), you define the outline color of shapes. The strokeWeight() function lets you control how thick that outline appears. If you do not want an outline, use noStroke(). The background() function sets the canvas color, which you usually call at the start of setup() or at the beginning of each frame in draw().
By combining these tools, you can create vibrant, layered artwork with both solid and transparent shapes, outlines, and backgrounds.
P5.js supports different color modes. By default, it uses RGB, where you specify red, green, and blue values. HSB stands for hue, saturation, and brightness, which can be more intuitive for certain color manipulations.
Use the colorMode() function to switch modes. For example, colorMode(HSB, 360, 100, 100) sets hue from 0β360, and both saturation and brightness from 0β100. After switching, fill() and stroke() will interpret their arguments according to the selected mode.
Thanks for your feedback!
