Anyone know how to make a transparent background??

spaghetti

Does anyone know how to make a transparent background? I'm trying to use HTML/CSS to make my background a full screen image, but when I do that, my canvas starts drawing MS paint style... I want to know how to get rid of that by making the background transparent.

Or maybe a better way to get an image in p5js to be a fullscreen background without scaling the width? I tried using:

image(img, 0, 0);
img.resize(0, height);

but for some reason this function gives me errors.

TNTHAS1

You just need to take out the background(##); then it will make the background a light shade of grey. (but it will be transparent)

spaghetti

Yeah but when I do this, anything that's moving in my sketch, will draw onto the screen MS paint style, it won't erase. The text in this for example:

GoToLoop

There are 2 types of images for p5.js:

1. Image createImage(): http://p5js.org/reference/#/p5/createImage
2. Element createImg(): http://p5js.org/reference/#/p5/createImg

2nd type is an independent Element from the Graphics canvas and it's static.
But I believe both forms would need to use PNG images w/ transparency channel enabled in them.

spaghetti

I don't get how that would solve this problem. I'm basically looking to get rid of that drawing effect on the text I have in the pic. The background image I used was set up in the CSS section of index.html not with p5.

GoToLoop

Well, even in Processing's Java Mode, we can specify the alpha channel for color():
https://processing.org/reference/color_.html

And behold, it's the same procedure across diff. Processing frameworks too:
http://p5js.org/reference/#/p5/color

function setup() {
  createCanvas(300, 200).position(100, 60);
  background(0, 128, 0, 30);

  c = color(175, 100, 220, 100);  // Define color 'c'
  fill(c);  // Use color variable 'c' as fill color
  rect(15, 20, 35, 60);  // Draw left rectangle

  blueValue = blue(c);  // Get blue in 'c'
  fill(0, 0, blueValue, 50);  // Use 'blueValue' in new fill
  rect(50, 20, 35, 60);  // Draw right rectangle
}

spaghetti

I don't think you understand my question. I'm not looking for a semi transparent rectangle. Take a look at this example:

http://jeffro-.github.io/test2/

Try resizing the window and see what happens. My background is there. But the text is acting like there isn't a background. I'm looking for a way for the text not to act like that.

GoToLoop

What I've spotted while perusing https://jeffro-.github.io/test2/sketch.js , is that you createDiv() inside draw()!
Don't you know draw() is called back @ 60 FPS frameRate() by default? /:)

https://processing.org/reference/draw_.html
http://p5js.org/reference/#/p5/draw

https://processing.org/reference/frameRate_.html
http://p5js.org/reference/#/p5/frameRate

Best place to create elements is in setup(). And for loading in preload()! :-B

I also see that you got windowResized() callback active.
Why don't you simply change createDiv()'s position() there as well? ;)

spaghetti

I didn't even think of doing that. Thank you so much. The song title looks way better and runs smoother this way. But what about the text that pops up when you change the key of the song, which is drawn in p5. Or any other animation I might want to put on the page. It'll have that ghosting effect still. Do you know how I can get rid of it?

GoToLoop

But what about the text that pops up when you change the key of the song, ...

Why don't you make another createDiv() for it as well?
You can change its inner text via html() method within mousePressed():
http://p5js.org/reference/#/p5.Element/html

spaghetti

Yeah but what if I wanted to draw p5 shapes instead of the text??

GoToLoop

You can position everything based on width & height!
Therefore, even if after a windowResized(), they should appear in coordinates relative to canvas' size! *-:)

spaghetti

Yeah but how is that going to get rid of the ghosting effect? That's really what I'm asking. It's really not about the window being resized. It's about animations ghosting

GoToLoop

Things rendered directly to canvas should be cleared in order to remove their old drawings.
On the other hand, HTML elements are separate units and can be moved freely via position().

spaghetti

How do you go about clearing it? I tried using clear() but it doesn't redraw, just ends up deleting the text

GoToLoop

Traditionally from times immemorial, background() is used for clearing the whole canvas:

• https://processing.org/reference/background_.html
• http://p5js.org/reference/#/p5/background

Of course, it only affects the canvas element, not others like createDiv(), createImg(), etc:

• http://p5js.org/reference/#/libraries/p5.dom

spaghetti

Yeah but I can't use background(). I want it to be transparent because I have my background image set up in the HTML section. This is what I'm asking.

GoToLoop

Not so sure, but I guess you can use clear() at the start of draw().
http://p5js.org/reference/#/p5/clear

It's explained it won't affect HTML elements. Only the drawings rendered in the canvas! o->

spaghetti

There you go, that was definitely the answer. Thank you so much for you help bro!

dmarku32

Thanks @GoToLoop for the clear() function