如何使用Processing 2.0(Java)在元素周围绘制一个发光的光环?

时间:2014-01-06 21:20:57

标签: java processing visualization

如果我想使用Processing 2.0(Java)创建'发光晕效果',我该怎么做?

是否有任何内置的方法/转换可以应用于我的对象以使它们发光?

如果没有,是否有任何视觉技巧可以达到同样的效果?

1 个答案:

答案 0 :(得分:6)

我不知道内置方式,至少一般(你没有提到你的代码是如何组织的)。但是,这是一个DIY方法的快速演示。我们的想法是,在对象后面绘制一系列逐渐变大且更暗的椭圆。您可能希望根据自己的喜好调整硬编码数字,并且可能让它变得非线性透明(可能更长时间调光?)。

Thing thing1;
Thing thing2;

void setup(){
  size(300,300);
  smooth();
  thing1 = new Thing(1*width/3,height/2,false);
  thing2 = new Thing(2*width/3,height/2,true);
}
void draw(){
  background(100);
  stroke(0);
  line(100,100,250,250);
  line(150,100,300,250);
  thing1.display();
  thing2.display();
}

class Thing
{
  PVector loc;
  boolean glowing;
  Thing(int x, int y, boolean glow){
    loc = new PVector(x,y);
    glowing = glow;
  }
  void display(){
    if(glowing){
      //float glowRadius = 100.0;
      float glowRadius = 100.0 + 15 * sin(frameCount/(3*frameRate)*TWO_PI); 
      strokeWeight(2);
      fill(255,0);
      for(int i = 0; i < glowRadius; i++){
        stroke(255,255.0*(1-i/glowRadius));
        ellipse(loc.x,loc.y,i,i);
      }
    }
    //irrelevant
    stroke(0);
    fill(0);
    ellipseMode(CENTER);
    ellipse(loc.x,loc.y,40,40);
    stroke(0,255,0);
    line(loc.x,loc.y+30,loc.x,loc.y-30);
    line(loc.x+30,loc.y,loc.x-30,loc.y);
  }
}

enter image description here

此外,如果您的对象不是圆对称的,您可以执行以下操作。它会查看对象的像素,并在找到非空白像素的任何位置绘制几乎透明的椭圆。不过,这是一个相当......混乱的解决方案。跟随对象的边缘或者其他方法可能更好。我希望这会给你一些想法!

Thing thing1;

void setup(){
  size(300,300);
  background(0);
  thing1 = new Thing();
  thing1.display();
}
void draw(){}

class Thing
{
  PGraphics pg;
  Thing(){
    pg = createGraphics(200,200);
  }
  void display(){
    pg.beginDraw();
    pg.background(0,0);
    pg.strokeWeight(10);
    pg.stroke(255,100,0);
    pg.line(100,50,100,150);
    pg.line(75,50,125,50);
    pg.line(75,150,125,150);
    pg.line(30,100,170,100);
    pg.endDraw();
    PGraphics glow = createGraphics(200,200);
    glow.beginDraw();
    glow.image(pg,0,0);
    glow.loadPixels();
    glow.fill(255,3);
    glow.noStroke();
    //change the +=2 for different effects
    for(int x = 0; x < glow.width; x+=2){
      for(int y = 0; y < glow.height; y+=2){
        if(alpha(glow.pixels[y*glow.width+x]) != 0) glow.ellipse(x,y,40,40);
      }
    }

    glow.endDraw();
    //draw the glow:
    image(glow,50,50);
    //draw the sprite:
    image(pg,50,50);
  }
}

enter image description here