Opacity background

Processing Beginners
1

How do I save a png file with no background (trasnaprent)?

I need to fill the background with color, than draw something on it,
than clear the background, and draw something again,
and save it no background.

Any idea?

Here is my current code:

void setup(){
  size (800,800);
}

void draw(){
  String TEXT = "LOVE";
  var Ts = 300;
  PFont p1 = createFont ("c:\\process\\OpenSans-Bold.ttf",Ts);
  textFont(p1);
  textSize(Ts);
  textAlign(CENTER,CENTER);
  background(#cc0000);
  fill(0);
  text(TEXT,width/2,height/2-(Ts/5));
  loadPixels();
  background(255);

  int rad=12;
  
  for (int a=0;a<height; a+=2)
  {
  for (int b=0; b<width; b+=2)
  {
      int currpix = a*width + b;
      color c=pixels[currpix];
      
    
    if (c == -16777216 )
    {
      
      fill(#cc0000);
      ellipse(b,a,rad,rad);
      
      
      }
        
      
  }
  
  }
 
 saveFrame("c://process//rb123.png");
 println("finished");
    noLoop();
 
  
}
2

hi Yalaniv,
can you give us more details on what you want to do?
background is usually set with background(); if you use clear i guess you play with pGraphics?
fill(255,255) is plain, not transparent
so, may be a minimal version of you code here can help us

3

@yalaniv, are you creating the image in order to place it on a web page? If so, and you want to give the image a transparent background, you can create the image with p5.js, and save it. Then the image can be included on a web page via HTML.

Here’s an example of p5.js code that creates an image with a transparent background:

function setup() {
  noLoop();
}

function draw() {
  background(0, 0);
  stroke(255, 0, 0);
  strokeWeight(10);
  line(0, 0, width, height);
  line(0, height, width, 0);
}

Place the saved image on a web page that has a background with a color, and you will see that color through the transparent background of the image.

1 Like
4

I think it’s important to save as png not as jpg

1 Like
5

Using p5.js with Chrome on my MacBook Air, .png is the default for saving the displayed image. With p5.js, does that apply in general with all browsers and operating systems?

1 Like
6

not really.

I edited my original post

7

I edited my original post with the code

8

i will try then, to separate the two drawings using pgraphics, by default pgraphics is transparent:
something like :

PGraphics pg;
void setup() {
  size (800, 800);
  pg = createGraphics(800, 800);
}

void draw() {
  String TEXT = "LOVE";
  var Ts = 300;
  PFont p1 = createFont ("c:\\process\\OpenSans-Bold.ttf",Ts);
  textFont(p1);
  textSize(Ts);
  textAlign(CENTER, CENTER);
  // background(#cc0000);
  fill(0);
  text(TEXT, width/2, height/2-(Ts/5));
  loadPixels();
  background(255);

  int rad=12;
  pg.beginDraw();
  // pg.background(100, 50); // if you want Semi-transparent background
  pg.fill(#cc0000);

  for (int a=0; a<height; a+=2)
  {
    for (int b=0; b<width; b+=2)
    {
      int currpix = a*width + b;
      color c=pixels[currpix];

      if (c == -16777216 )
        pg.ellipse(b, a, rad, rad);
    }
  }
  pg.endDraw();
  pg.save("c://process//rb123.png");
  image(pg, 0, 0);
  println("finished");
  noLoop();
}

if i well understood your goal?