Can we create partially colored text in Processing?

Question

I want to learn to create partially colored text/String in processing(java) like below example. It can be 10% white 90% black. or any ratio for any two color. I would like to learn how to do it in processing.

Answer 1

Option 1: In Processing

Render your text into a PGraphics object and then iterate over the pixels[] of the object to change the colour of a proportion of the text.

In the example below, the colour ratio will not be correct unless you create a PGraphics object of the exact dimensions of the text - I'm not sure whether there is a programmatic way to determine the required dimensions. (As a result, I'm using a ratio of 0.6 to recolour the top ~50% of the text in the example).

Furthermore, noSmooth() has been called on the object as anti-aliasing will create pixels that aren't quite the original text colour, which makes replacing them more complicated than simply checking for equality (==) .

import processing.core.PApplet;
import processing.core.PGraphics;

public class Text extends PApplet {

PGraphics text;

public static void main(String[] args) {
    PApplet.main(Text.class);
}

@Override
public void settings() {
    size(400, 400);
}

@Override
public void setup() {
    makeText();
}

@Override
public void draw() {
    background(55);
    image(text, 100, 100);
}

public void makeText() {
    final int orange = color(255,165,0);
    final int yellow = color(255,255,0);
    final float ratio = 0.6f;

    text = createGraphics(150, 60);
    text.noSmooth();
    text.beginDraw();
    text.fill(orange);
    text.textSize(60);
    text.textAlign(LEFT, TOP);
    text.loadPixels();
    text.text("TEXT", 0, 0);
    text.endDraw();

    for (int pixel = 0; pixel < (text.pixels.length * ratio); pixel++) {
        if (text.pixels[pixel] == orange) {
            text.pixels[pixel] = yellow;
        }
    }
}
}

Result:

---

Option 2: With JavaFX

This is a hacky method, but it gives better results since the text is anti-aliased. This method requires that your sketch be in FX2D rendering mode, which can be prescribed in the size() call.

Expose the stackPane belonging to the PApplet (this is where the JavaFX text object will be added):

Canvas canvas = (Canvas) ((PSurfaceFX) getSurface()).getNative();
StackPane p = (StackPane) canvas.getParent();

Create a JavaFX text object. I am using a CSS style (a linear gradient with immediate cutoff) for the partially-coloured effect.

javafx.scene.text.Text t = new javafx.scene.text.Text("TEXT");
t.setCache(true);
t.setFont(Font.font(null, FontWeight.NORMAL, 60));
t.setStyle("-fx-fill:linear-gradient( from 100.0% 100.0% to 100.0% 0.0%, rgb(255, 165, 0) 0.5," + "rgb(255, 255, 0)" +" 0.5);");

Finally, add the text to the PApplet's stage stackpane (which was exposed earlier):

p.getChildren().add(t);

Result (note the anti-aliasing):

Also note that you'lll need to use t.setVisible() to toggle visibility since this text element is entirely separate from Processing's drawing canvas.