# Weird behavior with array uniforms for fragment shader, ideas?

**URL:** https://discourse.processing.org/t/weird-behavior-with-array-uniforms-for-fragment-shader-ideas/27636
**Category:** p5.js
**Created:** [February 6, 2021, 5:06pm UTC](https://discourse.processing.org/t/weird-behavior-with-array-uniforms-for-fragment-shader-ideas/27636 "2021-02-06T17:06:24Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![baylyd](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@baylyd](https://discourse.processing.org/u/baylyd)
#### Post date: [February 6, 2021, 5:06pm UTC](https://discourse.processing.org/t/weird-behavior-with-array-uniforms-for-fragment-shader-ideas/27636/1 "2021-02-06T17:06:24Z")

</div>

Hi there,

I have a pretty simple shader sketch going but for some reason none of the array uniforms act the way I expect. I was hoping someone with some more experience than me could point out whats causing the strange behavior in this sketch. Essentially, values from a float array uniform can’t be used directly unless I convert them to a vec2. Other strangeness comes when I change the type of the array to a half as long array of vec2. In effect the body of the fragment shader’s main function contains a number of questions/cases that represent the issues I’ve found. Any help would be amazing!

[link to sketch](https://editor.p5js.org/ohmeglibra/sketches/_2LrjbgM_)

---

<div class="post-metadata">

### Author: ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)
#### Post date: [February 9, 2021, 1:27am UTC](https://discourse.processing.org/t/weird-behavior-with-array-uniforms-for-fragment-shader-ideas/27636/2 "2021-02-09T01:27:39Z")

</div>

If you want to pass a `float` to your shader, then, do not use an array in `setUniform()` method.

in draw:

```auto
ourShader.setUniform('blue', .5);

```

in fragment shader:

```auto
uniform float blue;
gl_FragColor = vec4(0.0,0.0,blue,1.0);

```

---

<div class="post-metadata">

### Author: ![baylyd](https://avatars.discourse-cdn.com/v4/letter/b/91b2a8/32.png) [@baylyd](https://discourse.processing.org/u/baylyd)
#### Post date: [February 10, 2021, 3:26pm UTC](https://discourse.processing.org/t/weird-behavior-with-array-uniforms-for-fragment-shader-ideas/27636/3 "2021-02-10T15:26:40Z")

</div>

hi @ErraticGenerator,

Thanks for the general tip, fortunately that part made sense to me. Do you have any info related to the questions that are here in the comments? They are all issues stemming from the array type uniform so that’s all I’m interested in.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/64833258b3f855e03dca98c2535af8749ddb529c.png)

The uniforms are being brought in with this code also.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/93a0cfcb266d21213e4ca442d5a4d585cdbaf2f2.png)

---

<div class="post-metadata">

### Author: ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)
#### Post date: [February 10, 2021, 6:07pm UTC](https://discourse.processing.org/t/weird-behavior-with-array-uniforms-for-fragment-shader-ideas/27636/4 "2021-02-10T18:07:37Z")

</div>

So, it looks like you want to pass an array of vectors to your shader.

When you pass a uniform to a shader, JS array becomes a GLSL vector. But if you want to pass an _array_ of vectors, you will need to create an array of many components. But you can’t pass as 2d array, but will have to pass an 1d array with as many values as you need to create multiple vectors.

Hope my example below helps:

```javascript
let vs = `
precision highp float;
varying vec4 positions;
attribute vec3 aPosition; 
void main() { 
  positions = vec4(aPosition.xyz,1.0);
  positions.xy = aPosition.xy*2.0 -1.0;
  gl_Position = positions;
}
`

let fs = `
precision highp float;
uniform vec4 particle;
uniform vec3 particle2[2];

void main() {
  gl_FragColor = vec4(particle2[0], 1.0); // red
  gl_FragColor = vec4(particle2[1], 1.0); // green
}`;

let ourShader;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  background(100);
  ourShader = createShader(vs, fs);
  noStroke();
}

function draw() {
  ourShader.setUniform("particle", [.5, .5, random(), 1.])
  
  // 6 elements becomes 2 x vec3 in GLSL 
  ourShader.setUniform("particle2",[1., 0., 0., 0., 1., 0.])

  shader(ourShader);
  rect(0, 0, width, height)
}

```
