2 colour gradient in 3D

Patterns and Code
1

I don’t know why I’m having so much trouble understanding the code used in this.

I have a cylinder that I’d like to mimic the pattern from my PC and keyboard onto, which is a gradient that goes from 1 colour to another and then back to the original. I’ve looked at existing patterns and some forum posts, but I can’t seem to get it to work. I also don’t seem to understand how to turn something into a 3D pattern.

This is what I’ve got so far.

export function beforeRender(delta) {
t1 = time(.1)
}

export function render3D(index,x,y,z) {
h = t1 + index/pixelCount
s = 1
v = 1

h = h % 1 + (h < 0)
h = h > 0.5 ? 0.9 : 0.666
hsv(h, s, v)
}

2

Here’s how I would think about designing this gradient:

IMG_7589
IMG_75892897×3265 692 KB

For easy copy-paste:

angleNorm = arctan2(y - .5, x - .5) / PI2
h = .2 + .3 * wave(angleNorm - .25)

* atan2(y, x) might be broken in your version of Pixelblaze. I’d suggest using ChrisNZ’s shim from “2D Spiral Twirls”:

// Temporary fix/workaround until the built-in atan2() is fixed
function arctan2(y, x) {
  if (x > 0) return atan(y/x)
  if (y > 0) return PI / 2 - atan(x/y)
  if (y < 0) return -PI / 2 - atan(x/y)
  if (x < 0) return PI + atan(y/x)
  return 1.0
}
1 Like
3

Wow, that was thought out nicely :slight_smile: Unfortunately I don’t know where that code should go… I’ve place it where I think it would go but it doesn’t do anything :confused:

4

Ha, ok. Here’s a complete pattern:

export function render3D(index, x, y, z) {
  angleNorm = arctan2(y - .5, x - .5) / PI2
  h = .2 + .3 * wave(angleNorm - .25)
  hsv(h, 1, 0.2)
}

// Temporary fix/workaround until the built-in atan2() is fixed
function arctan2(y, x) {
  if (x > 0) return atan(y/x)
  if (y > 0) return PI / 2 - atan(x/y)
  if (y < 0) return -PI / 2 - atan(x/y)
  if (x < 0) return PI + atan(y/x)
  return 1.0
}
1 Like
5

I just realized my description is terrible.

I want the gradient to go along the z axis. So like, blue on the bottom, then magenta in the middle, then back to blue, and then I want that to cycle either up or down.

6

Oh no problem. No need for the angle stuff then.

export function render3D(index, x, y, z) {
  h = .2 + .3 * wave(z - .25 - time(.1)) 
  hsv(h, 1, 0.2)
}
1 Like
7

oh that’s awesome. Thank you so much, Jeff. I appreciate your help!

8

Here’s how it turned out
https://youtu.be/Oi24UEU0Dk8

3 Likes