Compute shader processing

Here’s sketch i’ve been working on, still needs some tiding up. A compute shader where you can retrieve the values. It still needs some work, for now basic addition works, im adding basic string reader so you can expand the operations to multiply, divide, etc. The accuracy is currently an issue in some instances, when calculating float values.

code structure

add pgraphics to shader 2 for each varible to handle floats.// not sure if there is a better alternative
canvas draw
shader call

canvas draw
shader call

recombine pgraphics to retrieve values.

numbers are stored in pixel rgb to retrieve them processing makes it simple

so retrieve the color and add 16777216

shader is coded with string saved the reopened. Two shaders are created, one for the float and one for integer component. There might be a way to do this in one shader call but for now its a start.

values are stored in the num[] array.

imga, imgb store the values to send to the shader, its pgraphic arraylist.

cs = new cShader(5000,2,op);

number of values, number of vars, the string for operations

ie 20000 values, x & y vars or 2 vars, and operations to send to the shader for now restricted to + - / * only the + works correctly,

so this will give an 4 images with 20000 pixels storing x int y int x float y float, and for example  calculating x*y or x+y or x-y or x/y 

lodRandom populates the canvases with random data.

or call initialise values to add your own, from an arraylist

void initialiseVariables(ArrayList<PGraphics> _imga,ArrayList<PGraphics> _imgb){
  for(int i=0;i<_imga.size();i++){

currently on i5 cpu 4300m integrted graphics, running at 30 frames% second when retrieving, 60 per second without with 500000 values.

working on making it useable with a neural network, and a particle shader. Though the particle will not have shader collision that is too advanced for now, so speed would be impacted.

updated now can multiply add and divide, subtraction still working on, still inaccurate in decimal places and limited to numbers below 16777216. and currently 3 decimal points.
Looking into increasing decimals, using long float or double in glsl.

updated now with multiply add and divide, subtraction, calculated to 3 decimal figures.

cwidth 46 cheight 46 2116
img size 3
s[0] float num = ((tvf0)/(tvf1)*(tvf2))*1.0;
float numf = 0.0;
float num = ((tvf0)/ /
float num = ((tvf0)/(tvf1)* *
float num = ((tvf0)/(tvf1)*(tvf2) /
s[0] float num = ((tvf0)/(tvf1)*(tvf2))*1.0;
float numf = abs(num - int(num))*1000 ;
x 0 0.0 0.0 80.0 255.0 80.25621
xb 0 0.0 100.0 21.0 255.0 80.25621
col  -16777136 -16751595 -16777136 -16751595
x 1 0.0 0.0 62.0 255.0 62.82556
xb 1 1.0 66.0 124.0 255.0 62.82556
col  -16777154 -16694660 -16777154 -16694660
x 2 0.0 0.0 18.0 255.0 18.281738
xb 2 0.0 110.0 13.0 255.0 18.281738
col  -16777198 -16749043 -16777198 -16749043
col******** 23.0 23.0 rid 255.0 0.0 0.0 23.0 Alpha 255.0 23.0
col2 23.354 0.354 exc 354
num 23.0 0.354

cShader cs;

void setup() {
  size(400, 400, P2D);
  String op = "/*/";
  cs = new cShader(2000,3,op);

int k = 0;
float con = 0;

void draw() {
  //cs.runDV();//with debug info
  cs.runDF();//with debug info
  //cs.lodRandom2();//od rndom vribles
  //for(int i=0;i<cs.num.length;i+=2){
  //  point(cs.num[i],cs.num[i+1]);
  text(frameRate, 50, 50);


You’re working on a really fun project.

If so, can you solve it or share it when a project comes out? I am curious about the result.

its now complete, however it hasnt been integrated with anything else, so you’re welcome to use it.


if you have any insights or improvements do share!!

1 Like