Help with some patterns

[wizard]

Hi @nickbeaulieu,
That looks pretty sweet! To get the most out of it, you’ll want a 2D pixel map. Then you can use a bunch of the 2D patterns and get some sweet effects.

Check out this post for a simple click mapper:

2D Pixel coordinate mapping tool for images

Here is a quick and dirty pixel mapping tool. You can upload a photo, click to mark a coordinate on the image, press z (not control-z) to remove the last coordinate. It puts the coordinates into a text area for copying to pixelblaze mapper tab, drawing the pixel index number on the image. Remember, Pixelblaze mapper coordinates can be in any unit, pixels work too The coordinates are in pixels from the source image. It will also accept edits/pastes into the text area to edit …

Once you have a pixel map, you can get things like radius and angle (and some patterns do this already) and use that instead of index/pixelCount to upgrade many patterns.

There’s a pattern on the pattern sharing site with some utility functions for getting angle/radius (assuming centered in a piece) called “angle and radius from coordinates”

Here’s a post with some more background and examples of how these might be used:

How does mapping fit in the PB real-time architecture?

Hi @DrOldies, You mention the thread, but I wanted to be sure to point out this framework for arranging arbitrary matrixes with various offsets and rotations: Yes, the pixel map is rendered in your browser using real JavaScript, and a 2D or 3D normalized map of the pixel coordinates is stored. While you can live code that part too in order to get the mapping right, the ideas is as @Scruffynerf mentions, the map itself is usually static once set. The mapper text should resolve to either a jso…

Once you get a 2D pixel map installed, I would humbly suggest you try out my clock pattern

RGB Clock 2D Pattern

I’ve just uploaded a customizable clock for 2D setups to the pattern site. I’m putting the code here too, since it relates to several recent discussions and some of the components may be useful to folks making their own clocks. /* Draw a clock in 2D using RGB. The second hand is drawn in red, minutes are green, and hours are blue. Sub-seconds can be displayed as white. There are several controls that can adjust the way the clock is drawn. The clock face drawing is broken up into 2 mode gro…

As an example of upgrading a pattern I took millipede and have it use angle. you can see the 1D render and render2D side by side to see how it was modified:

speed = 20
legs = 10

export function beforeRender(delta) {
  t1 = time(1 / speed)
  t2 = time(2 / speed)
}

export function render(index) {
  h = index / pixelCount 
  h += (index / pixelCount + t2) * legs / 2 % .5
  v = wave(h + t2)
  v = v * v // Gamma correction
  hsv(h, 1, v)
}

export function render2D(index, x, y) {
  //use angle around a center point instead of distance on a strip
  h = (1 + atan2(x - .5, y - .5)/PI2) * .5 
  h += (h + t2) * legs / 2 % .5
  v = wave(h + t2)
  v = v * v // Gamma correction
  hsv(h, 1, v)
}

I’ve also uploaded a fancier version with controls to the sharing site.