Simulate container behavior with overflow

General Discussion Other

paratron

Simulate container behavior with overflow

in General Discussion • Other • 3 months ago

Hey there,
I'm currently creating an interactive visualization for multitouch-tables. I enjoy the freedom of Processing over Flash/HTML5, but sometimes I miss some of the features. Currently I'm trying to create some kind of container for other elements. For those of you that are experienced in HTML/Javascript i'll explain it like that: I want to make a slider, that means a container with lots of items in it, but only one of them is visible at once. So far no problem with Processing. When the user clicks the image should be replaced by another. Still no problem with Processing. Trouble begins with the type of transition. I could use a fade-animation in processing, but what if i want to slide the items horizontally? I would need to cut some part of my content off if it flows out of the container.
I also made an image of what I want to achiev so you can imagine better

Has any body an idea of how to create this effect? Hope you understood the problem.

In CSS I could apply a overflow hidden on the container.

<div class="container" style="overflow: hidden">
<div class="slider-item">Star-Content</div>
<div class="slider-item">Other-Content</div>
</div>

Thanks!

PS: Of course I know that Web-Rendering has nothing to do with Processing. Just for better understanding of what i want to achiev...

Replies(4)

allonestr..

Re: Simulate container behavior with overflow

3 months ago

Are you saying that the container != the whole screen - it's a subset? So it won't work to just have the symbols sliding off the screen?

tfguy44

Re: Simulate container behavior with overflow

3 months ago

Draw the container to it's own PGraphics object, which will cut it off for you. Example:

class Contain{
int p, d;
PGraphics pg;
Contain(){
p = 0;
d = 0;
pg = createGraphics(100,100,P2D);
}
void draw(){
if( p < d ){ p++; }
if( p > d ){ p--; }
pg.beginDraw();
pg.background(255);
pg.noStroke();
pg.rectMode(CENTER);
pg.translate(-p,0);
pg.fill(255,0,0);
pg.rect(50,50,50,50);
pg.fill(255,255,0);
pg.rect(150,50,50,50);
pg.fill(0,255,0);
pg.rect(250,50,50,50);
pg.fill(0,0,255);
pg.rect(350,50,50,50);
pg.endDraw();
//fill(0);
//noStroke();
//rect(-5,-5,110,110);
image(pg.get(),0,0);
}
}
Contain c1 = new Contain();
void setup(){
size(220,220);
}
void draw(){
background(128);
translate(10,10);
c1.draw();
}
void mousePressed(){
c1.d+=100;
if( c1.d == 400 ){ c1.d = 0; }
}

paratron

Re: Simulate container behavior with overflow

3 months ago

Thank you for answering.

@ allonestring: Yes just a subset from the screen.

The solution with PGraphics works nicely. May I run in performance issues with this solution?

tfguy44

Re: Simulate container behavior with overflow

3 months ago

That depends on how many containers you have going at once, and how big they are.
I wouldn't expect it to be an issue, but if it is, post here again and we'll see what we can do.

Top Reply