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>