Can't assign an ordered list of colors to Path.vertexColors()

[jcneshi]

Trying to assign an ordered list of colors to vertexColors(HColorist clr).

Can't do it by passing a HColorPool since it returns a random color from its list.

Then thought I could use HColorField to have an ordered list of gradients that get passed to vertexColors, but simply substituting the HColorPool var with an HColorField one doesn't work: the output is that my shapes are white. Code being:

HColorPool colors = new HColorPool(#e41a1c, #377eb8, #4daf4a, #984ea3);
HColorField colors2 = new HColorField(diameter)
                .addPoint(diameter/2, 0, #e41a1c, 0.5)
                .addPoint(diameter, diameter/2, #377eb8, 0.5)
                .addPoint(diameter/2, diameter, #4daf4a, 0.5)
                .addPoint(0, diameter/2, #984ea3, 0.5)
                .fillOnly();

// WORKS, BUT COLOR SEQUENCE IS RANDOM (AS EXPECTED)
HPath diamond = new HPath(POLYGON).vertexColors(colors);
// DOESN'T WORK
HPath diamond = new HPath(POLYGON).vertexColors(colors2);

HDrawable d = innerGroup.add(diamond).anchorAt(H.CENTER).noStroke();
for (int j = 0; j < numVertices; j++) {
                diamond.vertex(0, 10);
                diamond.vertex(0, -10);
                diamond.vertex(10, 0);
                diamond.vertex(-10, 0);
}
// ALSO DOESN'T WORK WHEN USING colors2
colors2.applyColor(d);

Any idea how to make HColorField work with vertexColors, or any other way to pass in an ordered list of colors?

Thanks!

[echophon]

Hi, Have you looked at https://github.com/hype/HYPE_Processing/tree/lib_staging/examples/HPath/HPath_010_gradient_colorfield ?

Also, if you want to iterate over a HColorPool, there is a .getColorAt(int index) method that will work for this.
Cheers

[echophon]

Ah, I reproduced the problem. The color is applied additively, & the default fill is #FFFFFF. Try setting an initial fill to something close to #000000.

[jcneshi]

Thanks for replying @echophon !

The problem with using HColorPool is that in HPath's draw() it will use automatically HColorPool.getColor() to get a random color. So I can't use getColor(index) unless I create a new class extending HPath to change that draw() function code.

Thanks for the HColorField example, I hadn't looked into it completely. But I still can't get it to work, even when using #000000 as an initial fill.

HColorField colors2 = new HColorField(diameter)
                .addPoint(diameter/2, 0, #e41a1c, 0.5)
                .addPoint(diameter, diameter/2, #377eb8, 0.5)
                .addPoint(diameter/2, diameter, #4daf4a, 0.5)
                .addPoint(0, diameter/2, #984ea3, 0.5)
                .fillOnly();

HPath diamond = new HPath(POLYGON);

// BEFORE FILL: DOESN'T WORK
diamond.vertexColors(colors2);

diamond.fill(#000000);

// AFTER FILL: DOESN'T WORK
diamond.vertexColors(colors2);

HDrawable d = innerGroup.add(diamond).anchorAt(H.CENTER).noStroke();
for (int j = 0; j < numVertices; j++) {
                diamond.vertex(0, 10);
                diamond.vertex(0, -10);
                diamond.vertex(10, 0);
                diamond.vertex(-10, 0);
}

// AFTER VERTEX: DOESN'T WORK
diamond.vertexColors(colors2);

As you can see, I tried placing the vertexColors call all over the place, no success... At this point it seems the main difference between my code and the example's is that I specify vertices explicitly -- which I need to do, since I'm drawing thousands of shapes, each with slightly different vertex positions (above I just just used (0, 10) as an example) -- whereas the example you sent uses the polygon shape default new HPath().polygon(5, (int)random(0, 4)*90).

Still stumped...

[DonoG]

Have suggested an update to address...https://github.com/hype/HYPE_Processing/pull/162

[jcneshi]

@DonoG fantastic stuff, now I won't need to use my overloaded Path class anymore ;) Glad to see such responsiveness in this project, love it.