Glowing ellipse


This is how my sketch (game)looks like.How can i make the ellipse glow and look more appealing?
I tried blendmode and understood that doesn’t fit in the game because
1.It takes input as pixels
2.frame rate drops
3.hard to integrate with my sketch.
Any suggestions/ideas?

You could use a PGraphics to draw a custom ellipse and use that.
One way to achieve a glow-like effect is to draw a few ellipses with different diameter on top of each other. When the outer ellipses are semi-transparent, it looks a little bit like “glowing”.

PGraphics glowingEllipse;

void setup() {
  size(400, 400);
  glowingEllipse = createGraphics(40, 40);
  glowingEllipse.beginDraw();
  glowingEllipse.noStroke();
  for (int i =0; i< 10; i++) {
    glowingEllipse.fill(0, 255, 0, 1+10*i);
    glowingEllipse.ellipse(20, 20, 40-3*i, 40-3*i);
  }
  glowingEllipse.endDraw();
}

void draw() {
  background(0);
  image(glowingEllipse, mouseX-20, mouseY-20);
}

2 Likes

I have a fade effect as u can see the ellipse…ive drawn a rect instead of background (0) to get that affect.
Acc to my knowledge, with pgraphics we cannot create such things!?

Did you try?

Just replace the background(0) in the example above with these lines:

  fill(0, 20);
  rect(0,0,width, height);
1 Like

Hi @Yash,

The PostFX library has bloom filter for a glowing effect.

Below an example with a moderate bloom intensity: fx.render().bloom(0.5, 100, 4).compose();

4 Likes

Hello!

I’ve been trying to create something like this, and it doesn’t work.

Can you please send source? Thanks!

please study that picture, you see

  • install library
  • find example
  • run it
  • find the bloom code line
2 Likes

i got this error after importing library and running built in example.

Blockquote
AndroidDevice: cannot find process id, console output will be disabled.
FATAL EXCEPTION: GLThread 2989
Process: processing.test.advancedeffect, PID: 32190
java.lang.NoSuchMethodError: No virtual method sketchPath()Ljava/lang/String; in class Lprocessing/core/PApplet; or its super classes (declaration of ‘processing.core.PApplet’ appears in /data/app/processing.test.advancedeffect-xaDK0dN4P43-YxRJ3b7j9Q==/base.apk)
at ch.bildspur.postfx.pass.BasePass.getLibPath(BasePass.java:79)
at ch.bildspur.postfx.pass.BasePass.(BasePass.java:21)
at ch.bildspur.postfx.pass.BrightPass.(BrightPass.java:19)
at processing.test.advancedeffect.AdvancedEffect.setup(AdvancedEffect.java:45)
at processing.core.PApplet.handleDraw(PApplet.java:1838)
at processing.opengl.PSurfaceGLES$RendererGLES.onDrawFrame(PSurfaceGLES.java:264)
at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1571)
at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1270)
AndroidDevice: cannot find process id, console output will be disabled.
FATAL EXCEPTION: GLThread 3031
Process: processing.test.advancedeffect, PID: 32528
java.lang.NoSuchMethodError: No virtual method sketchPath()Ljava/lang/String; in class Lprocessing/core/PApplet; or its super classes (declaration of ‘processing.core.PApplet’ appears in /data/app/processing.test.advancedeffect-xaDK0dN4P43-YxRJ3b7j9Q==/base.apk)
at ch.bildspur.postfx.pass.BasePass.getLibPath(BasePass.java:79)
at ch.bildspur.postfx.pass.BasePass.(BasePass.java:21)
at ch.bildspur.postfx.pass.BrightPass.(BrightPass.java:19)
at processing.test.advancedeffect.AdvancedEffect.setup(AdvancedEffect.java:45)
at processing.core.PApplet.handleDraw(PApplet.java:1838)
at processing.opengl.PSurfaceGLES$RendererGLES.onDrawFrame(PSurfaceGLES.java:264)
at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1571)
at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1270)

type or paste code here

did you run the example like i did? does it work?

about android can not help ( but it is not in your topic header )

Ive built it for android.so these methods doesn’t work in android :confused:?

Does postfx doesn’t work with android?

@Yash === no, it does not.

:sleepy:…sad…

So is it impossible to create such effect in processing android?

You could use Gradient drawables in android but why not using p5 it self?
For instance using a blur filter.

PGraphics pg;
int size;
color c;

void setup() {
    background(0);
    size(300, 300);
    noStroke();
    imageMode(CENTER);
    size = 160;
    c = color(0, 0, 255);
    drawCircle();
    image(pg, 100, 100);
    size = 100;
    c = color(0, 255, 0);
    drawCircle();
    image(pg, 200, 200);
    size = 75;
    c = color(255, 255, 0);
    drawCircle();
    image(pg, 120, 230);
}

void drawCircle() {
    pg = createGraphics(200, 200);
    pg.beginDraw();
    pg.fill(c);
    pg.noStroke();
    pg.ellipse(100, 100, size, size);
    pg.filter(BLUR, 10);
    pg.endDraw();    
}