# How to stop random color in animation?

**URL:** <https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355>\
**Category:** Coding Questions\
**Created:** [September 21, 2021, 4:05pm UTC](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355 "2021-09-21T16:05:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mica](https://avatars.discourse-cdn.com/v4/letter/m/85e7bf/32.png) [@Mica](https://discourse.processing.org/u/Mica)\
**Post date:** [September 21, 2021, 4:05pm UTC](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355/1 "2021-09-21T16:05:20Z")

</div>

```auto
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? ?

* * *

```auto
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();
    }
 
}

```

---

<div class="post-metadata">

**Author:** ![gitanerie](https://avatars.discourse-cdn.com/v4/letter/g/b5a626/32.png) [@gitanerie](https://discourse.processing.org/u/gitanerie)\
**Post date:** [September 21, 2021, 4:12pm UTC](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355/2 "2021-09-21T16:12:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [September 22, 2021, 9:56pm UTC](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355/3 "2021-09-22T21:56:18Z")

</div>

Answered on StackOverflow: [javascript - p5js, How to make the color follow with the array? - Stack Overflow](https://stackoverflow.com/questions/69287265/p5js-how-to-make-the-color-follow-with-the-array)