# Guys how to make random rainbow colors in this script

**URL:** <https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801>\
**Category:** Coding Questions\
**Created:** [October 13, 2021, 2:16pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801 "2021-10-13T14:16:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![desciato](https://avatars.discourse-cdn.com/v4/letter/d/35a633/32.png) [@desciato](https://discourse.processing.org/u/desciato)\
**Post date:** [October 13, 2021, 2:16pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/1 "2021-10-13T14:16:03Z")

</div>

Hello Guys  
can anyone help me how to make random rainbow colors in this script

```auto
const margin = 25;

function setup() {
  createCanvas(300, 400);
  noLoop();
  strokeWeight(2);

 }

function draw() {
  background(0);
 stroke(255);
  

  noFill();
  rect(margin, margin, width - margin * 2, height - margin * 2);
  stroke(120);
  for (let y = margin*2; y < height - margin * 2; y += 25) {
   
    drawLine(y);
  }

}

function drawLine(lineY) {

  const range = map(lineY, margin * 2, height - margin * 2, 0, 50);

  let prevX = margin * 2;
  let prevY = lineY;
  const lineSpacing = 10;

  for (let x = prevX + lineSpacing; x <= width - margin * 2; x += lineSpacing) {

    const y = lineY + random(-range, range);
    line(prevX, prevY, x, y);

    prevX = x;
    prevY = y;
  }
}

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [October 13, 2021, 9:00pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/2 "2021-10-13T21:00:29Z")

</div>

Hello, @desciato, and welcome to the Processing Forum!

Place this at the beginning of your `draw()` function:

```auto
  // colors of the rainbow
  const colors = [color(255, 0, 0), // red
    color(255, 127, 0), // orange
    color(255, 255, 0), // yellow
    color(0, 255, 0), // green
    color(0, 0, 255), // blue
    color(75, 0, 130), // indigo
    color(143, 0, 255), // violet
  ];

```

Then refine the `for` loop inside your `draw()` function, as follows:

```auto
  for (let y = margin*2; y < height - margin * 2; y += 25) {
    stroke(random(colors)); // choose a random rainbow color
    drawLine(y);
  }

```

Alternatively, you can place this statement at the beginning of the `drawLine()` function:

```auto
  const colors = [color(255, 0, 0), // red
    color(255, 127, 0), // orange
    color(255, 255, 0), // yellow
    color(0, 255, 0), // green
    color(0, 0, 255), // blue
    color(75, 0, 130), // indigo
    color(143, 0, 255), // violet
  ];

```

Then place this inside the `for` loop of the `drawLine()` function:

```auto
    stroke(random(colors)); // choose a random rainbow color

```

---

<div class="post-metadata">

**Author:** ![desciato](https://avatars.discourse-cdn.com/v4/letter/d/35a633/32.png) [@desciato](https://discourse.processing.org/u/desciato)\
**Post date:** [October 13, 2021, 9:58pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/3 "2021-10-13T21:58:21Z")

</div>

Thank you so much or your help its really working now. I appreciate that so much  
guys I am new in processing so you will find many question each day until guys you learn me everything  
much love

---

<div class="post-metadata">

**Author:** ![desciato](https://avatars.discourse-cdn.com/v4/letter/d/35a633/32.png) [@desciato](https://discourse.processing.org/u/desciato)\
**Post date:** [October 13, 2021, 10:02pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/4 "2021-10-13T22:02:41Z")

</div>

Bro sorry one more question pls?  
as you know this script will give me unlimited drawing  
any solution to save it , because every time i save it manually and i look for too much drawing it makes me tired.  
Thank you in advance

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [October 13, 2021, 10:54pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/5 "2021-10-13T22:54:07Z")

</div>

> [@desciato](#):
>
> … any solution to save it …

It appears that @glv has already answered that question in the thread [Guys any Solution how to save the work?](https://discourse.processing.org/t/guys-any-solution-how-to-save-the-work/32812/). But if you are actually hoping save a picture of the current canvas as an image file, see [p5.js Reference: `saveCanvas()`](https://p5js.org/reference/#/p5/saveCanvas).

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [October 13, 2021, 11:00pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/6 "2021-10-13T23:00:28Z")

</div>

For rainbow colours, it’s also always a _great_ idea to check out `colorMode()`, and try out the HSB option with different options for the H param 😉

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [October 14, 2021, 3:00pm UTC](https://discourse.processing.org/t/guys-how-to-make-random-rainbow-colors-in-this-script/32801/7 "2021-10-14T15:00:16Z")

</div>

A suggestion. This doesn’t fit your script, but you could use colorMode(HSB).

> **[Color](https://processing.org/tutorials/color/)**
>
> An introduction to digital color.

> **[Reference](https://processing.org/reference/colorMode_.html)**
>
> Changes the way Processing interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using t…

I hope it helps!  
(Otherwise, you can just temporarily use colorMode(HSB), create a HSB color and return to RGB)