CRT-like image effect

Programming Questions

TheComput..

in Programming Questions • 1 year ago

Hello everyone!

I'm trying to make an CRT-like effect in Processing, like this image:

And I have two questions:

How can I create the color bleeding effect? (the red/blue pixels "bleeding" around the white areas)
I've managed to create the noise effect with the following code:

void setup()
{
size(320, 240, P2D);
noSmooth();
}
void draw()
{
background(255);
for(int x=0; x<width; x++)
{
for(int y=0; y<height; y++)
{
stroke(0, 0, 0, random(0, 1)*100);
point(x, y);
}
}
}

But it runs too slowly. I tried with the pixels array, but I could not get the alpha channel to work. Any help?

Thanks!

Replies(4)

tfguy44

Re: CRT-like image effect

1 year ago

PFont myFont;
void setup()
{
size(320, 240);
noSmooth();
myFont = createFont("Arial", 28);
textFont(myFont, 28);
}
void draw()
{
background(0);
loadPixels();
for(int x=0; x<pixels.length; x++)
{
pixels[x] = color( random(0,100) );
}
updatePixels();
fill(0,0,255);
text("CODE", 21, 30);
fill(255,0,0);
text("CODE", 19, 30);
fill(255);
text("CODE", 20, 30);
}

TheComput..

Re: CRT-like image effect

1 year ago

That's not quite what I wanted. The text needs to be "behind" the noise, like on a real TV, and the color bleeding should apply to all the scene, not only to the text.

I thought of the following process (basically what you did with the text, but with the entire scene):

Divide the scene in it's red and blue components
Render the original scene
Render the red scene a little to the left of the originalwith transparency
Render the blue scene a little to the right of the original with transparency

But, I've tried with the pixels[] array, the get/set functions and nothing worked. Using OpenGL functions maybe?

tfguy44

Re: CRT-like image effect

1 year ago

Probably not optimized. Demonstration of possibility only. Do not take internally. Use with caution. Void where prohibited.

PImage clean;
PGraphics pgr, pgb, pgg, pgp;
int lastTime = 0;
PFont myFont;
void setup()
{
size(320, 240);
pgr = createGraphics( width, height, P2D);
pgg = createGraphics( width, height, P2D);
pgb = createGraphics( width, height, P2D);
pgp = createGraphics( width, height, P2D);
noSmooth();
myFont = createFont("Arial", 28);
textFont(myFont, 28);
}
void draw()
{
background(0);
// fill(0,0,255);
// text("CODE", 21, 30);
// fill(255,0,0);
// text("CODE", 19, 30);
fill(255);
text("CODE", 20, 30);
noStroke();
fill(255, 255, 0);
ellipse( 70, 70, 20, 20);
fill(255, 0, 0);
rect( 100, 100, 10, 30);
fill(0, 255, 255);
ellipse( mouseX, mouseY, 20, 20 );
/// Post scene effects follow.
if ( mousePressed ) {
return;
}
clean = get();
background(0);
pgr.beginDraw();
pgr.tint(255, 0, 0);
pgr.image(clean, 0, 0);
pgr.endDraw();
pgg.beginDraw();
pgg.tint(0, 255, 0);
pgg.image(clean, 0, 0);
pgg.endDraw();
pgb.beginDraw();
pgb.tint(0, 0, 255);
pgb.image(clean, 0, 0);
pgb.endDraw();
if ( millis() > lastTime + 100 ) {
pgp.beginDraw();
pgp.background(255);
pgp.loadPixels();
for (int x=0; x<pgp.pixels.length; x++)
{
pgp.pixels[x] = color( random(128) );
}
pgp.updatePixels();
pgp.endDraw();
lastTime = millis();
}
image( pgr.get(), -int(random(1, 4)), 0);
blend( pgg.get(), 0, 0, width, height, 0, 0, width, height, ADD);
blend( pgb.get(), int(random(1, 4)), 0, width, height, 0, 0, width, height, ADD);
blend( pgp.get(), 0, 0, width, height, 0, 0, width, height, SCREEN);
if ( random(1) < .5 ) {
filter( BLUR, int( random(2) ) );
}
}

TheComput..

Re: CRT-like image effect

1 year ago

Yeah, exactly like that! Thanks a lot!

Top Reply