Not drawing parts of pimage

General Discussion Other

corporate..

in General Discussion • Other • 8 months ago

Hi, I'm trying to create a circular timer. I start with a circular image, and I want to delete slices of the circle iteratively so that it looks like time is running out as the removed slice of the circle gets bigger and bigger. Anybody know an approach to getting this effect?

I currently have drawn a white background behind the image and then I draw white arcs to erase the slices, but I don't want to have a white background.

Replies(4)

tfguy44

Re: Not drawing parts of pimage

8 months ago

Don't draw a circle. Instead, draw an arc.
Example (click to remove sections):

int count;
void setup(){
size(220,220);
smooth();
count = 10;
}
void draw(){
background(0);
noStroke();
fill(0,128,0);
arc(110,110,140,140,0, TWO_PI/10.0*count);
}
void mousePressed(){
count--;
if(count < 0){count = 10;}
}

corporate..

Re: Not drawing parts of pimage

8 months ago

Thanks for the reply. I should mention that the requirement is to use a circular image that I have, so there is no circle drawing. The only circle drawing i have at the moment is a white circle background behind the pimage that I am trying to alter.

tfguy44

Re: Not drawing parts of pimage

8 months ago

Ah, I see. In that case you need to used a crafty combination of drawing an arc and using a mask.

int count;
PImage img = loadImage( "http://rlv.zcache.com/rainbow_be_happy_smiley_face_stickers-p217218018699326192b2o35_400.jpg" );
PGraphics pg, m;
void setup(){
size(400,400);
pg = createGraphics( width, height, P2D );
m = createGraphics( width, height, P2D );
//smooth();
count = 10;
}
void draw(){
// Draw the sections of the mask that we want to keep.
m.beginDraw();
m.background(0);
m.noStroke();
m.fill(255);
m.arc(200,200,350,350,0, TWO_PI/10.0*count);
if( count == 10 ){
m.ellipse(200,200,350,350);
}
m.endDraw();
// Apply the mask to an image of the picture.
pg.beginDraw();
pg.image( img, 0, 0);
pg.mask( m.get() );
pg.endDraw();
// Render the resulting masked image.
background(map( millis()%5000, 0, 5000, 0, 255),0,0);
image( pg.get(), 0, 0 );
}
void mousePressed(){
count--;
if(count < 0){count = 10;}
}

GoToLoop

Re: Not drawing parts of pimage

8 months ago

Hey every1!

@ lines # 28 & 33, I've checked here and there's no need to use get() on a PGraphics
for it to be used as parameter for image()!

Also, it seems that beginDraw() & endDraw() just need to be called once!
And some times, not even once!!!

See my tweaked below:

/**
 * Arced Smile (v3.5)
 * by tfguy44 (2013/Feb)
 * for Ricardo.Deamorim
 * tweaked by GoToLoop
 *
 * http://forum.processing.org/topic/not-drawing-parts-of-pimage
 */

final static byte fps = 10, tempo = 5 * fps;
final static byte numArcs = 12;
int count = numArcs;

int imgW, imgH;
boolean canRefresh = true;

PGraphics pg, m;
PImage img;

//final PImage img = loadImage(
//"http://rlv.zcache.com/rainbow_be_happy_smiley_face_stickers-p217218018699326192b2o35_400.jpg");
//https://www.zazzle.com/rlv/rainbow_be_happy_smiley_face_stickers-p217218018699326192b2o35_400.jpg);

void setup() {
  size(400, 400);
  frameRate(fps);

  pg  = createGraphics(width, height, P2D);
  m   = createGraphics(width, height, P2D);

  m.beginDraw();
  m.noStroke();
  m.fill(255);
  m.endDraw();

  img  = loadImage("rainbow_be_happy_smiley_face_stickers-p217218018699326192b2o35_400.jpg");
  imgW = img.width-50;
  imgH = img.height-50;
}

void draw() {
  if (canRefresh) {
    canRefresh = false;

    // Draw the sections of the mask that we want to keep.
    m.background(0);
    if (count == numArcs)   m.ellipse(width>>1, height>>1, imgW, imgH);
    else  m.arc(width>>1, height>>1, imgW, imgH, 0, TWO_PI/numArcs*count);

    // Apply the mask to an image of the picture.
    pg.background(img);
    pg.mask(m);
  }

  // Render the resulting masked image.
  background( map(frameCount%tempo, 0, tempo, 0, 255), 0, 0 );
  image(pg, 0, 0);
}

void mousePressed() {
  canRefresh = true;
  if (--count < 0)   count = numArcs;
}

Top Reply