How to create a rainbow disc using p5.js ?

Last Updated : 31 Jan, 2023

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=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js">
    </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:

How to create rotating disc effect using CSS?

iamgaurav

Improve

Article Tags :

How to create a rainbow disc using p5.js ?

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?