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.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 6.67Color and Styling
Svep för att visa menyn
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.
Tack för dina kommentarer!
