Home → NodeBox 3 →

"gradient" fill

• Edit

tom

27 Jun, 2024 11:08 AM

i am trying to colorize circles in a grid with gradient based on three rgb colors - with those i have created a range of values.

but so far i have only managed to colorize a grid with a consistent number of points in each row. (eg. the amount of colors in the range is the same as the number of rows in the grid)
as i am generating (rasterized) shapes based on this grid, the number of points in the rows is not consistend anymore - and this workflow (of course) breaks.

what could be a possible approach?

the idea is to somehow either
a) limit the duplication of each color to the amount of points in the corresponding row.
b) color based on the y-position of each point

problems:
- different shapes, with a different amount of rows are generated

• i am not able to access the y-position key of an ellipse

any ideas?

• Screenshot_161.png 233 KB

1. Support Staff 1 Posted by john on 27 Jun, 2024 03:15 PM

   

   Tom,

   To access the y-position of an ellipse (or any other path) just feed it into a centroid node to get its center point, and then feed that into a lookup node with the key set to y.

   Once you have the y value for each dot, you can assign each row a color by using a slice node to slice one color from the list of colors forming your gradient.

   You can use a convert_range node to convert the range of Y values to a sequence from 0 to the number of colors in your gradient. You can then feed that into the start parameter of a slice node to assign a color to each dot. Dots with the same Y value will get the same color.

   In case that is not clear, I have attached a demo showing the basic technique (see screenshot and zipped file).

   • I create a collection of dots in the shape of a lower case a
   • I use the Y values of those dots and a convert_range node to find a sequence number within the gradient for each dot
   • I form the gradient by extending the 3 colors from your example into a color list using my palette node
   • Then I use a slice node to pick each sequence number from the gradient list and feed that into a colorize node

   Hope that helps. Let me know if you have any more questions.

   John

   • Gradient_Dots_Screenshot.png 770 KB
   • Gradient_Dots_Demo.ndbx.zip 123 KB
   • Edit

2. 2 Posted by tom on 28 Jun, 2024 01:51 PM

   

   hey John, thanks a lot!
   i managed to find a solution myself, but yours is way more efficient.

   for my solution i used this custom node to count the points in each row based on their y-attribute.

   http://support.nodebox.net/discussions/nodebox-2-3/258-group-by-count

   and then i wrote two more custom nodes:
   - one for remapping rgb-values based on min, mid and max by an amount of n - one for duplicating these in a list based on the count

   all the best
   Tom

   • Screenshot_164.png 802 KB
   • Edit

3. tom closed this discussion on 29 Jun, 2024 12:52 PM.