CodrGeek is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our Privacy Policy Explore Now!

How to create a rainbow disc using p5.js ?

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.


  • 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.


<!DOCTYPE html>

    <script src=
        let colors = [];
        function setup() {
          createCanvas(400, 400);
          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++) {
            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);

    <h1 style="color: Green;">GeeksforGeeks</h1>





About the Author

Hey there! My name is Mayank, a professional Blogger, Graphic Designer, Coder as well as Content Creator from Uttar Pradeh, India. I love to Code and create interesting things while playing with it.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.