# A way to add fancy effects to your sketches

**URL:** <https://discourse.processing.org/t/a-way-to-add-fancy-effects-to-your-sketches/2073>\
**Category:** Gallery\
**Created:** [July 25, 2018, 1:47pm UTC](https://discourse.processing.org/t/a-way-to-add-fancy-effects-to-your-sketches/2073 "2018-07-25T13:47:41Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![lqdev](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lqdev/32/29_2.png) [@lqdev](https://discourse.processing.org/u/lqdev)\
**Post date:** [July 25, 2018, 1:47pm UTC](https://discourse.processing.org/t/a-way-to-add-fancy-effects-to-your-sketches/2073/1 "2018-07-25T13:47:41Z")

</div>

Hello!

I recently discovered a way of adding fast/efficient effects to Processing sketches.  
Unfortunately, this method only supports the `FX2D` renderer, as AWT does not support effects.

The method is quite simple:

```auto
import javafx.scene.canvas.*;
import javafx.scene.effect.*;
import javafx.scene.paint.Color; // JavaFX uses different colors than Processing

GraphicsContext ctx;
GaussianBlur fxGaussianBlur = new GaussianBlur(20d); // the 'd' stands for 'double'
DropShadow fxDropShadow = new DropShadow(15d, 0d, 20d, Color.gray(0, 0.2)); // we have to use the Color JavaFX class becasue JFX does not support Processing colors (kind of obviously)

void setup() {
  size(256, 160, FX2D); // it is crucial to set the FX2D renderer!
  // in order to apply effects we need to get the 'native' graphics context of our canvas
  ctx = ((Canvas) surface.getNative()).getGraphicsContext2D();
}

void draw() {
  background(255);
  fill(0);
  noStroke();
  // this applies the previously created effect to subsequent draw calls
  ctx.setEffect(fxGaussianBlur); 
  rect(32, 32, 64, 64);
  // to disable the effect, just set it to `null`
  ctx.setEffect(null);
  fill(56);
  rect(64, 64, 64, 64);
  ctx.setEffect(fxDropShadow); // material design-style drop shadow
  fill(128);
  ellipse(192, 64, 48, 48);
}

```

Here’s a screenshot:

![effects](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/a03636ecefd7cf8ae37b1f1c417abdcfdef95d65.png)

As one might notice, those effects are way faster than the built-in filters, and provide similar functionality, if not more flexible.  
You might’ve also noticed the use of the `Color` class instead of `int`s/Processing `color`s. This `Color` class is actually quite useful, however unsupported by Processing itself: [`Color` javadoc](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/paint/Color.html)

Another nice thing one might do using this `GraphicsContext` is _gradients_. Yeah, gradients are now possible without having to draw thousands of lines! Just a `rect()`, `ellipse()`, or any shape drawing call, and you’re all set! This is how you can use gradients:

```auto
import javafx.scene.canvas.*;
import javafx.scene.paint.*;

GraphicsContext ctx;

LinearGradient gradient;

void setup() {
  size(256, 160, FX2D);
  ctx = ((Canvas) surface.getNative()).getGraphicsContext2D();
  
  /* I like to use the valueOf() function of the LinearGradient class,
     because it provides a simple, CSS-like way for defining gradients. */
  gradient = LinearGradient.valueOf("linear-gradient(" +
                                    "from 0% 0% to 100% 100%," +
                                    "black 0%, white 100%)");
}

void draw() {
  background(255);
  noStroke();
  fill(#ff00ff); // we assign a dummy color due to how Processing draws fills and strokes internally
  ctx.setFill(gradient); // use setStroke for strokes
  rect(0, 0, width, height);
}

```

[Here’s a reference for `LinearGradient.valueOf(String)`](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/paint/LinearGradient.html#valueOf-java.lang.String-).

And here’s a screenshot:

![gradient](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/a0db8139c924a7f48dbb806a181e9a383c707c07.png)

There are so many more things you can do with the `GraphicsContext`! In fact, I highly suggest you check out its [javadoc](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/canvas/GraphicsContext.html), because direct access to it really expands upon your drawing possibilities.

Thank you for reading!