How to stop random color in animation?

p5.js Coding Questions
1 
let colors = ["#ed3441", "#ffb03b", "#36acf5", "#ffd630", "#084e86", "#fcfeff"];

function setup() {
	createCanvas(500,500);
}
	
function draw() {
	  background(200);

	let offset = -width / 10;
	noFill();

	let xStep = (height + offset * 2) / 75;
	for (let x= offset;x <= height - offset; x += xStep) {

		let num = int(1 + 1.25 * noise(x/150, frameCount / 100));
		let arr = [PI/8];
		for (let i = 0; i < num; i++) {
			let n = sq(sq(noise(x/ 10, frameCount / 200))) * (width - offset * 75);
			n = max(n,1);
			arr.push(n);
		}

		drawingContext.setLineDash(arr);
		drawingContext.lineDashOffset = x- frameCount /10;
		strokeWeight(xStep/0.8);
		strokeCap(ROUND)
  
		stroke(random(colors));
      
      
		beginShape();
      
		for(let y = offset ; y < width - offset; y += 5){
			let nx = x +tan(y/330+x/300) * 150 * cos(frameCount/20) * sin(x/300);
			vertex(y,nx );
		}
endShape();
    }
 }

I don’t know how to static color on the colors = ["#ed3441", "#ffb03b", "#36acf5", "#ffd630", "#084e86", "#fcfeff"];
. It changes every frame on the array.
I know it can use colorMode(HSB) to present, but the color is hard to be the picked hex color.
Does anyone know how to fix the color animation? ?

I mean I want array color to be my picked color.
Like the “colorMode” effect
How to do? ?

function setup() {
	createCanvas(400,400);
  colorMode(RGB);
}
	
function draw() {
	  background(200);

	let offset = -width / 10;
	noFill();

	let xStep = (height + offset * 2) / 75;
	for (let x= offset;x <= height - offset; x += xStep) {

		let num = int(1 + 1.25 * noise(x/150, frameCount / 100));
		let arr = [PI/8];
		for (let i = 0; i < num; i++) {
			let n = sq(sq(noise(x/ 10, frameCount / 200))) * (width - offset * 75);
			n = max(n,1);
			arr.push(n);
		}

		drawingContext.setLineDash(arr);
		drawingContext.lineDashOffset = x- frameCount /10;
		strokeWeight(xStep/0.8);
		strokeCap(ROUND)
  
    stroke(x-offset/40,300,30);
      
		beginShape();
      
		for(let y = offset ; y < width - offset; y += 5){
			let nx = x +tan(y/330+x/300) * 150 * cos(frameCount/20) * sin(x/300);
			vertex(y,nx );
		}
endShape();
    }
 
}
2

I’m not sure to understand, but if you don’t want the stroke color to be changed everyframe while still beeing a color picked out of your colors array, it doesn’t work here because on each iteration of the draw loop you change the stroke color with stroke(random(colors))

If you want to pick on color randomly among the many colors you hand picked you can assign the stroke color in setup() so that the command won’t repeat itself at each frame.

I hope I understood correctly

3

Answered on StackOverflow: javascript - p5js, How to make the color follow with the array? - Stack Overflow

2 Likes