[英]How to draw a glowing halo around elements using Processing 2.0 (Java)?
If I want to create a 'glowing halo effect' using Processing 2.0 (Java) how could I do that? 如果我想使用Processing 2.0(Java)创建“发光的光环效果”,该怎么做?
Is there any built-in method/transformation that I can apply to my object in order to them to glow? 我可以将任何内置方法/转换应用于对象以使其发光吗?
If not, is there any visual trick that would accomplish the same effect? 如果不是,是否有任何视觉技巧可以达到相同的效果?
I do not know of a built-in way, at least generically (you don't mention how your code is organized). 我至少在一般情况下不知道内置方式(您不提及代码的组织方式)。 But, here's a quick demo for a DIY approach. 但是,这里有一个DIY方法的快速演示。 The idea is that you draw a series of progressively larger and dimmer ellipses behind your object. 这个想法是您在对象后面绘制一系列逐渐变大和变暗的椭圆。 You'll probably want to tweak the hard-coded numbers to your liking, and maybe have it go transparent non-linearly (be dimmer for longer, perhaps?). 您可能需要根据自己的喜好调整硬编码的数字,并且可能使它非线性透明(可能会变暗更长的时间?)。
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);
}
}
Additionally, if your object isn't circularly symmetric, you can do something like the following. 此外,如果对象不是圆对称的,则可以执行以下操作。 It looks at the object's pixels and draws an almost transparent ellipse anywhere it finds a non-blank pixel. 它查看对象的像素,并在找到非空白像素的位置绘制一个几乎透明的椭圆。 It's a rather... messy solution, though. 但是,这是一个相当混乱的解决方案。 It might be better to follow the edge of the object, or perhaps some other method. 跟随对象的边缘或采用其他方法可能更好。 I hope this gives you some ideas! 我希望这能给您一些想法!
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.