Processing 1.0 - Processing Discourse - Drawing only part of a circle

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › Drawing only part of a circle

‹ Previous Topic | Next Topic ›

Pages: 1

Drawing only part of a circle (Read 1651 times)

ProcessingFTW

Drawing only part of a circle
May 23^rd, 2008, 1:21pm

Hi,
I wish to make an object that would appear as if it's "growing" out of no where. That is, at first, only the first pixel row (or column) of the object will be drawn, then the two rows, of the object, until everything will be drawn.
I don't want to destroy environment, so I don't want to draw a white rectangle that would delete the object.
Here's an example that does that with a circle and by deleting the circle with a white rectangle. I want to do that without white rectangle that would ruin the background.:

Code:


void setup() 
{
  size(200, 200);
  ellipseMode(CORNER);
  smooth();
}
int x = 0,sz = 80;
void draw()
{
  background(255);
// draw a green ellipse and a red rectangle
// in point cy which is rising.
  stroke(0); fill(20,200,10);
  int cx = 50, cy = max(150-x,150-sz);
  ellipse(50,cy,sz,sz);white ellipse
  fill(200,20,20);
  rect(50,cy+30,sz/2,sz/2); // red rectangle
// now, deletes the everything but the first
// <code>x</code> pixels in the circle with a
// white reclangle
  stroke(255); fill(255);
  if (x<sz) rect(50,cy+x,sz,sz-x); // delete it!
  x++;
}

antiplastik

Re: Drawing only part of a circle
Reply #1 - May 23^rd, 2008, 2:34pm

I don't know if it's the easiest way, but you can try with a buffer :
- draw your background on the main screen, as usual.
- draw the 'growing' objects on a buffer (whose background is transparent)
- display the buffer over the main screen

Code:

PGraphics buffer;
int x = 0, sz = 80;
 
void setupBuffer() {
  buffer = createGraphics(100, 150, P3D);
}
 
void setup()  {
  size(200, 200);
  ellipseMode(CORNER);
  smooth();
  setupBuffer();
}
 
void draw() {
  background(255, 150, 0);
  int cx = 50, cy = max(150-x,150-sz);
  buffer.beginDraw();	     // start drawing the objects
    buffer.translate(0, cy);    // progressively
    buffer.background(255, 0);  // on a transparent background
    buffer.stroke(0);
    buffer.fill(20,200,10);
    buffer.ellipse(50,0,sz,sz);
    buffer.fill(200,20,20);
    buffer.rect(50,30,sz/2,sz/2);
  buffer.endDraw();
  image(buffer, 0, 0);	    // display the buffer
  x++;
}

PhiLho

Re: Drawing only part of a circle
Reply #2 - May 23^rd, 2008, 2:38pm

Apparently, Processing doesn't seem to have a concept of viewport or limiting drawing to an area.
Instead, you have to simulate this by creating an off-screen graphic buffer, drawing there and copying the (perhaps partial) result on screen.
I changed your sample to show that:
Code:

PImage pi; // Background image
PGraphics pg; // Off-screen graphic buffer

void setup()
{
  size(200, 200);
  smooth();
  pi = loadImage("../../Globe.png"); // Any graphic will do, this is to show it is hidden only by the real graphics
  image(pi, 0, 0); // Draw background on display
  pg = createGraphics(width, height, JAVA2D);
}

int x = 0, sz = 80;

void draw()
{
  if (x > sz)
  {
    println("End");
    noLoop(); // Stop
    return;
  }
  pg.beginDraw();
  pg.ellipseMode(CORNER);
  pg.image(pi, 0, 0); // Redraw background in graphic
// draw a green ellipse and a red rectangle
// in point cy which is rising.
  pg.stroke(0); pg.fill(20, 200, 10);
  int cx = 50, cy = max(150-x, 150-sz);
  pg.ellipse(cx, cy, sz, sz);//green ellipse
  pg.fill(200, 20, 20);
  pg.rect(cx, cy+30, sz/2, sz/2); // red rectangle
  pg.endDraw();
  copy(pg, cx, cy, sz, x, cx, cy, sz+1, x+1);
  x++;
}

PhiLho

Re: Drawing only part of a circle
Reply #3 - May 23^rd, 2008, 3:02pm

@antiplastik
Ah, your solution is nice too. I overlooked the way to make transparent background, hence my drawing of the image in the buffer, but it is limited (static) unlike true transparency.
And the usage of translate is smart too, I haven't use the Processing's transformation matrices yet, it is a good illustration of their use.

I tried to draw a static image, then copy it progressively, but I get a white rectangle on top of the ellipse (behind it) and a black one at the bottom. What I am missing?
Code:

PImage pi; // Background image
PGraphics pg; // Off-screen graphic buffer

int x = 0, sz = 80;
int cx = 50, cy = 70;

void setup()
{
  size(200, 200);
  smooth();
  pi = loadImage("../../Globe.png"); // Any graphic will do, this is to show it is hidden only by the real graphics

  pg = createGraphics(width, height, JAVA2D);
  pg.beginDraw();
  pg.ellipseMode(CORNER);
  pg.background(255, 0);    // Transparent background
// draw a green ellipse and a red rectangle
// in point cy
  pg.stroke(0); pg.fill(20, 200, 10);
  pg.ellipse(cx, cy, sz, sz);//green ellipse
  pg.fill(200, 20, 20);
  pg.rect(cx, cy+30, sz/2, sz/2); // red rectangle
  pg.endDraw();
}

void draw()
{
  if (x > sz)
  {
    println("End");
    noLoop(); // Stop
    return;
  }
  image(pi, 0, 0); // Draw background on display (clear it)
  copy(pg, cx, cy, sz, x, cx, cy+sz-x, sz+1, x+1);
  x++;
}

Pages: 1

‹ Previous Topic | Next Topic ›