background in setup() vs draw()

jhouck89

background in setup() vs draw()

in Contributed Library Questions • 6 months ago

I'm not sure if this is the right section. The question deals more with basic programming but it does include the controlP5 library so I put it in here. Anyways....

I'm trying to draw circles with mousePressed, so in order to get them to show up I have to put my background() in the setup portion so it doesn't redraw over the circles. The only problem is I need to draw text and a rectangle that is changed by controlP5 sliders. Also my text looks bad when you put the background in setup, not sure why...

Is there anyway to redraw the background when I change the sliders but not when click the mouse to draw ellipses?

I've tried to add background(255); to the control event section for when I move the sliders but that blocks the rectangle from being updated till I release the mouse.

I feel like I'm missing something really obvious but I can't seem to find how to do it. Thanks in advance for the help!

Here's my code:

import controlP5.*;
ControlP5 cp5;
int unitWidth;
int floorToFloor;
float actualWidth;
float actualHeight;
float rectX1;
float rectX2;
float rectY1;
float rectY2;
void setup() {
size(1024,768);
background(255); //With background here my circles work but when I change the sliders to change the rectangle
//it doesn't redraw over the old ones.
cp5 = new ControlP5(this);
cp5.setColorLabel(color(0));
cp5.setColorValue(color(255));
// sliders that animate the rectangle, I want these to show the current rectangle without showing the "after images"
cp5.addSlider("unitWidth")
.setPosition(20,20)
.setSize(150, 20)
.setValue(25)
.setRange(15,45)
.setNumberOfTickMarks(7);
;
cp5.getController("unitWidth").getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingY(5);
cp5.addSlider("floorToFloor")
.setPosition(210,20)
.setSize(150,20)
.setValue(10)
.setRange(8,15)
.setNumberOfTickMarks(8)
;
cp5.getController("floorToFloor").getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingY(5);
}
void draw() {
// If background is here the sliders and rectangle work well but the ellipses won't show up because the background redraws over them.
actualWidth = unitWidth*(21.866667);
actualHeight = floorToFloor*(21.866667);
rectX1 = (width/2) - (actualWidth/2);
rectX2 = (width/2) + (actualWidth/2);
rectY1 = 414 - (actualHeight/2);
rectY2 = 414 + (actualHeight/2);
fill(255);
strokeWeight(1);
stroke(0);
line(0,60,width,60);
//rectangle, I know I could use rect() but I need all the corner points for later.
line(rectX1, rectY1, rectX1, rectY2);
line(rectX1, rectY1, rectX2, rectY1);
line(rectX2, rectY1, rectX2, rectY2);
line(rectX1, rectY2, rectX2, rectY2);
fill(0);
text(unitWidth + "'", 550, 195);
}
void controlEvent(ControlEvent theEvent) {
println("got a control event from controller with id "+theEvent.getController().getId());
// tried using this section, when I did a fill() or background it wouldnt show the rectangle updating with the slider,
// only on release it would show the new rectangle.
}
void mousePressed() {
fill(125);
stroke(0);
ellipse(mouseX, mouseY, 10, 10);
}

Replies(4)

GoToLoop

Re: background in setup() vs draw()

6 months ago

You should try PGraphics class.

Each instance of it is a separate layer buffer you can use regular Processing drawing commands.

Setting transparent backgrounds for each 1 of them, you can stack all of them using image() within draw().

So, it's up to you to redraw or not each 1 of them!

PhiLho

Re: background in setup() vs draw()

6 months ago

" I'm not sure if this is the right section. The question deals more with basic programming but it does include the controlP5 library so I put it in here."
You chose the right section, because people cannot run your code if they don't have the library.
If the problem can be reproduced without it, just make a simpler version of your code showing the problem, without the library, it makes it simpler for those willing to help.
But it seems the problem is strongly tied to the usage of the library.

" my text looks bad when you put the background in setup, not sure why..."
Classical issue: when called in setup(), you call it only once. But draw() keep drawing the text over and over at the same place. So the transparent parts doing the anti-aliasing cumulate and then the text looks blocky, as if drawn not anti-aliased.

The problem is that you want persistent graphics, ie. that all you draw cumulate on screen. This kind of sketch is rarely used, and mostly for the simplest sketches, where you need to draw or to make trails (with a semi-transparent background). A limited usage.
Most sketches just redraw the whole scene on each draw() call, on each frame. A library like controlP5 probably rely on this behavior.

You need to make your sketch "smarter": instead of drawing in mousePressed(), you can keep all drawings centralized in draw(), which redraws the whole scene on each frame.
One way to deal with the problem is to memorize each position of clicks, eg. by putting the coordinates in a PVector and putting the latter in an ArrayList.
Another way, simpler, is what GoToLoop suggests: draw in mousePressed() onto a global transparent PGraphics, and in draw(), call background(), then your PGraphics, then the remainder of the sketch.

jhouck89

Re: background in setup() vs draw()

6 months ago

Thanks guys for the help, I got it to work!

What I ended up doing was storing the mouse points in an ArrayList which I needed for later anyways. I think I'm starting to get the hang of this. It was difficult for me starting out, coming from a design background and having no programming experience.

PhiLho

Re: background in setup() vs draw()

6 months ago

Good! It looks like you are managing quite well, though.

(we often have ten questions-answers before the beginner starts to get some result!)

Top Reply