In this article, we are going to see how we can create a rainbow disc using p5.js. p5.js is a JavaScript library that makes it easy to create interactive graphics, and it is well-suited for visualizations of all kinds, including rainbows. This article will show you how to create a rainbow using p5.js.
Approach:
- Create an HTML file and include the p5.js library.
- In the setup() function:
- Create a canvas with the desired size using the createCanvas(width, height) function.
- Set the color mode to HSB using the color mode (mode) function.
- Create an array to store the colors, in this case, the array will have 360 elements, one for each hue value.
- Use a for loop to iterate through the hue values from 0 to 359.
- For each iteration, use the color(hue, saturation, brightness) function to create a color and add it to the array.
- Set the saturation and brightness to a fixed value (100)
- In the draw() function:
- Use a for loop to iterate through the array of colors.
- For each color in the array, use the fill(color) function to set the current color as the fill color.
- Use the rect(x, y, width, height) function to create a rectangle with the current color and the desired width and height.
- To create the rainbow effect, place each rectangle next to the other by using the iteration variable to calculate the x-coordinate of the rectangle.
Prerequisite: These are the list of all the functions used in the example code.
- createCanvas(width, height): It creates a canvas element in the HTML file with the specified width and height.
- colorMode(mode): Sets the colour mode for the program, in this case, it’s set to HSB (hue, saturation, brightness) mode.
- color(hue, saturation, brightness): Creates a colour using HSB values, where hue is a value from 0 to 360, saturation is a value from 0 to 100, and brightness is a value from 0 to 100.
- fill(color): Sets the colour to be used for filling shapes.
- rect(x, y, width, height): Creates a rectangle shape with the specified x and y coordinates, width, and height.
Note that the setup() and draw() functions are also used, but they are built-in functions in p5.js and are called automatically. setup() runs once before the first frame is drawn, while draw() runs continuously, once per frame, after the setup() function.
Example: In this example we will create a rainbow palette, using the p5.js.
HTML
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<script>
let colors = [];
function setup() {
createCanvas(400, 400);
colorMode(HSB);
noStroke();
for (let i = 0; i < 360; i++) {
colors[i] = color(i, 100, 100);
}
}
function draw() {
translate(width / 2, height / 2);
for (let i = 0; i < 360; i++) {
fill(colors[i]);
let angle = map(i, 0, 360, 0, TWO_PI);
let x = 200 * cos(angle);
let y = 200 * sin(angle);
arc(0, 0, 400, 400, angle, angle + TWO_PI / 360);
}
}
</script>
</head>
<body>
<h1 style="color: Green;">GeeksforGeeks</h1>
</body>
</html>
|
Output: