Task #17: The golden tix!

Patterns and Code Pixelblaze Academy of Wizardry and Enchantment
1

Continuing the discussion from Task #14: May Flowers:

@wizard suggested going back to some basics… so the next few weeks will be a different change of pace. We’re going back to 1d, so put away your LED panels and pull out your LED strands. [Actually, this works great with panels, but… we’re going 1D for a while.]

For #17, I’ve built a 1d ‘tixy’ clone, I call it the Golden Tix (no y, therefore, it’s just Tix). It’s your Willy Wonka everlasting gobstopper of a pattern, infinitely flexible (or close enough to start), and meant to allow you focus entirely on ONE line of code.

It’s in the patterns for you to download, and we’ll also walk thru it here.

In the coming weeks, we’re going to add specific requirements (and perhaps add some new support code to this pattern to match), for things like wave(), time() and other built ins.

But for this week, the sky is the limit… and with the feedback and ideas people submit, we’ll grow into the next few Tasks using this as a basic framework.

So what does this do, and what’s the task?

// Golden Tix, a 1d version of tixy.land, for use with Task #17
// written by Prof. Scruffynerf

export var t,i,x
export var timeelapsed = 0

exported but only t and timeelapsed are useful, because i and x will always show your LAST pixel. We’ll come back to this in a later Task.

function tix(t,i,x) { 
  result = sin(i*t) // PUT YOUR SINGLE REPLACEMENT LINE HERE - Anything goes!
  return result
};

Ah, this is the meat of the task. Your task for this week? Post code snippets to replace that ONE line. You can use any built in function you like… and also built in variables/constants like pixelCount, PI, E, and so on.

What are we passing in?

t = time, in seconds, but scaled down based on the Speed slider. Multiply it by SpeedShift*1000, if you want to just use pure seconds, no adjustment. (or just use timeelapsed !) The Speed slider is handy to allow you to play with different time values quickly, and make it change slowly or faster.
i = index, what pixel # is this
x = on a range from 0…1, where is this pixel? It’s just index/pixelCount

My example is meant to show you how even very simple code can make ever changing patterns.

var Positive = 1
export function hsvPickerPositiveColor(h, s, v) {
  Positive = h
}

var Negative = .5
export function hsvPickerNegativeColor(h, s, v) {
  Negative = h
}

These sliders allow you to change the colors in use. If the result of your code is positive, we use the Positive hue, if it’s a negative value, we use the Negative hue.
So pick two colors you like. Color palette suggestions welcome!

export var SpeedShift = 0.0
export function sliderSpeedShift(q) {
    SpeedShift = q
}

More magic: We scale the time value by this value*1000, so that it can be slowed down (and even rolled backward a bit)

export var reset = 1
export function sliderSlideRightToReset(q) {
    reset = q
}

This gives us an easy way to restart the pattern. Slide the slider to the right, and it’ll reset.

export function beforeRender(delta) {
  if (reset == 1) {
    reset = 0
    timeelapsed = 0
  }
  timeelapsed += delta/1000
  t = timeelapsed/(SpeedShift*1000)
}

Our timing magic and reset: keep adding delta to the timeelapsed, and divide it by the Speedshift*1000 to get our timer. Also handles the reset, by reseting timeelapsed.

and finally

export function render(index) {
  i = index  // pixel index #
  x = index/pixelCount // percentage of the way along your string for each pixel
  v = tix(t,index,x) // brightness of pixel
  h = Positive
  if (v < 0) {
      v = abs(v)
      h = Negative
  }
  hsv(h,1,v*v)
}

Setup the variables, call your tix function, and then decide on the hue of each pixel.

So what can you do with this? So much.

Here’s some examples:

result = (i == floor(t*1000)%pixelCount) 

result = tan(x*t*100)

result = cos(t*100)-sin(i)

Your turn!