How to improve performance: multiple array operations on pixels

Processing Coding Questions
6

Hi @flodeux,

if you still want more performance and ready for new experiences considering the usage of shaders
… as a future step … :slight_smile:

Cheers
— mnse

processing java version
PShader myshader;

void setup() {
  size(400, 400, P2D);
  myshader=new PShader(g.parent, vertexShader, fragmentShader);
}

void draw() {
  int tileSizeX = width/8;
  int tileSizeY = height/8;

  for (int y=0; y<=height; y+=tileSizeY) {
    for (int x=0; x<=width; x+=tileSizeX) {
      myshader.set("color", random(1), random(1), random(1));
      shader(myshader);
      rect(x, y, tileSizeX, tileSizeY);
    }
  }
}

String[] vertexShader = {"""
#version 330 core
precision highp float;
uniform mat4 transformMatrix;
layout (location = 0) in vec4 position;

void main()
{
  gl_Position = transformMatrix * position;
}
"""};


String[] fragmentShader = {"""
#version 330 core
precision highp float;
uniform vec3 color;
out vec4 glFragColor;

void main()
{
  glFragColor = vec4(color, 1.0);
}
"""};
converted to p5 to visualize:

PS:

p5 code:
let myshader;

function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
  myshader = createShader(vertexShader, fragmentShader);
}

function draw() {    
  translate(-width/2,-height/2);
  var tileSizeX = width / 8.;
  var tileSizeY = height / 8.;
  for (var y = 0; y <= height; y += tileSizeY) {
    for (var x = 0; x <= width; x += tileSizeX) {
      myshader.setUniform("color", [
        Math.random(),
        Math.random(),
        Math.random(),
      ]);
      shader(myshader);
      rect(x, y, tileSizeX, tileSizeY);
    }
  }
}

const vertexShader = `
precision highp float;
uniform mat4 uProjectionMatrix;
uniform mat4 uModelViewMatrix;
uniform mat4 uModelMatrix;

attribute vec3 aPosition;

void main() {
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;  
}
`;

const fragmentShader = `
precision highp float;
uniform vec3 color;

void main()
{
  gl_FragColor = vec4(color, 1.0);
}
`;
1 Like