# 2 colour gradient in 3D

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)
}

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

Wow, that was thought out nicely 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 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

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.

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

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

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

3 Likes