Guys how to make random rainbow colors in this script

Processing Coding Questions
1

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

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;
  }
}
2 Likes
2

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

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

  // 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:

  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:

  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:

    stroke(random(colors)); // choose a random rainbow color
1 Like
3

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

1 Like
4

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

5

It appears that @glv has already answered that question in the thread Guys any Solution how to save the work?. But if you are actually hoping save a picture of the current canvas as an image file, see p5.js Reference: saveCanvas().

1 Like
6

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 :wink:

2 Likes
7

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

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