blendMode and transparency

Processing Coding Questions
4

Hi @jensschroder ,

It’s kinda tough to give you advice if you’re new to Processing. What you’re asking how to do is already beyond the introductory tool set, and paradoxically becomes easier if you use some more advanced tools. You may want to consider skipping the Processing way of stacking lines. In stead, or in addition, use the underlying renderer tools directly. The default renderer is based on Java AWT, which provides some of the gradient functionality you’re looking for.

screencap

import processing.awt.PGraphicsJava2D;
import java.awt.LinearGradientPaint;
import java.awt.geom.Point2D;
import java.awt.Color;
import java.awt.geom.Path2D;

float s = 200;

PGraphicsJava2D graphics;

Point2D start = new Point2D.Float(0.0, 0.0);
Point2D end = new Point2D.Float(400.0, 400.0);
float[] colorStops = new float[] { 0.0, 0.5, 1.0 };
Color[] colors = new Color[] {
  new Color(0xffff0000, true),
  new Color(0x7f7f007f, true),
  new Color(0xff0000ff, true) };
LinearGradientPaint gradient = new LinearGradientPaint(
  start, end, colorStops, colors);

Path2D.Float path = new Path2D.Float();

void settings() {
  size(400, 400, JAVA2D);
}

void setup() {
  graphics = (PGraphicsJava2D)getGraphics();

  path.moveTo(-s * 0.10, s * 0.10);
  path.quadTo(0.0, 0.0, s * 0.10, s * 0.1);
  path.lineTo(s * 0.10, s * 0.10);

  path.lineTo(s * 0.8, s * 0.9);
  path.quadTo(s * 0.9, s, s * 0.8, s * 1.1);
  path.lineTo(s * 0.8, s * 1.1);

  path.lineTo(s * 0.1, s * 1.9);
  path.quadTo(0, s * 2, -s * 0.1, s * 1.9);
  path.lineTo(-s * 0.1, s * 1.9);

  path.lineTo(-s * 0.8, s * 1.1);
  path.quadTo(-s * 0.9, s, -s * 0.8, s * 0.9);
  path.lineTo(-s * 0.8, s * 0.9);

  path.closePath();
}

void draw() {
  blendMode(BLEND);
  background(0xff202020);
  translate(width * 0.5, height * 0.5);
  translate(0.0, -s);
  graphics.g2.setPaint(gradient);
  graphics.g2.fill(path);
}

There are other renderers that come with Processing - based on JavaFX and OpenGL - as well as newer ones that you can find through libraries, such as Skia. Your overall strategy will depend on what renderer you use and how complex you need the gradient to be.

There are also other posts on gradients on this forum if you use the search tool in the top right corner.

Best,
Jeremy

5 Likes