# blendMode and transparency

**URL:** https://discourse.processing.org/t/blendmode-and-transparency/27781
**Category:** Coding Questions
**Created:** [February 13, 2021, 8:36am UTC](https://discourse.processing.org/t/blendmode-and-transparency/27781 "2021-02-13T08:36:24Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)
#### Post date: [February 15, 2021, 9:45pm UTC](https://discourse.processing.org/t/blendmode-and-transparency/27781/4 "2021-02-15T21:45:47Z")

</div>

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](https://processing.org/examples/lineargradient.html) 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45b79a40c775b7b3e4c85e45077302cc6d8d587a.png)

```java
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](https://discourse.processing.org/t/skia-graphics-library-as-a-renderer-in-processing/25580/15). 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

---

_[View the full topic](https://discourse.processing.org/t/blendmode-and-transparency/27781)._