Rendering patterns in 2D

Patterns and Code
1

I could have added this to some previous threads, but… makes more sense to start this fresh.

Scott’s written code to create gifs of WLED palettes and effects(patterns), and he’d just added support for the SR (sound reactive) fork, which adds 2D support as well as sound. So it has a lot of new patterns. His gifs looked all wrong, so I opened a issue, and he eventually found a good looking setup that actually displays something akin to what the pattern is supposed to do.

Having this in 2D as opposed to a 1D version makes a huge world of difference.
I know Ben’s working on adding some sort of similar ‘preview’ for PB. Even if it’s just a 2D jpeg (all of the previews currently are 1D jpegs), that would be nice to have. It would likely make the pattern repo display and the pattern display on the PB much more useful.

Needless to say, porting all of these ‘WLED effects’ into PB patterns is still on my todo list.

2

How about compiling the PBscript to GLSL, so I can have these patterns I made for a 16x16 matrix running at 4k? :relaxed:

1 Like
3

@sorceror, easier than ya might think!

(@scruffynerf’s nifty all-math KITT as a shader. Which everybody clearly needs!)

#version 120

uniform float time;
uniform vec2 resolution;

#define TWO_PI 6.28318530718

// Pixelblaze-flavored helper functions:
float sawtooth(float time,float period) {

  return mod(time,period) / period;
}

float triangle(float n) {
  return  2. * (0.5 - abs(fract(n) - 0.5));
}

float wave(float n) {
  return 0.5+(sin(TWO_PI * abs(fract(n))) * 0.5);
}

float square(float n,float dutyCycle) {
  return (abs(fract(n)) <= dutyCycle) ? 1.0 : 0.0;
}

// KITT!
void main(void) {
  float tailPct = .6;         // length of the tail in 0..1
  float speed = 1.8;          // GLSL cycle time in seconds.milliseconds
  float pct1,pct2;
  float bri;

  // Normalize incoming pixel coords
  float x = 0.5 * gl_FragCoord.x / resolution.x;
  float t1 = sawtooth(time,speed);

  // build the two moving waves
  pct1 = x - t1;
  pct2 = -x - t1;

  bri = max(0.,( tailPct - 1. + triangle(pct1) * square(pct1,.5) ) / tailPct )
     + max (0.,( tailPct - 1. + triangle(pct2) * square(pct2,.5) ) / tailPct );

  gl_FragColor = vec4(bri * bri * bri,0.0,0.0,1.0);
}
3 Likes
4

Hahaha, OMG, now we’re going the other way from PB to GLSL? Full circle. Next thing you know, we’ll have a Shadertoy PB emulator. Actually, a p5.js one might make sense…