PGraphics Rotate Problem

NeoMatrix

Hi,

I am trying to create a rectangle with animated rainbow colored border. I have created 2 PGraphics objects. One has a rainbow color wheel, while the other has a rectangle which is used as a mask on PImage. The problem I am facing is that I cannot rotate the color wheel PGraphics to create the animation effect around the border. Right now the whole rectangle is rotating which I want to be fixed i.e. the mask should not rotate. pushMatrix/popMatrix are not helping either (commented out in the code). I am not sure what am I missing.

Any help is appreciated. Thanks. PImage m; float rot =0.0; PGraphics pgColor; PGraphics pgMask;

void setup() {
  size(400, 400, P2D);
  smooth();
  background(0);

  pgColor = colorWheel(width, 60);

  pgMask = createGraphics(width, height, P2D);
  pgMask.beginDraw();
  pgMask.background(0);
  pgMask.noFill();
  pgMask.stroke(255);
  pgMask.strokeWeight(2);
  pgMask.rectMode(RADIUS);
  pgMask.rect(width/2, height/2, 100, 100);
  pgMask.endDraw();
}

void draw()
{
  background(0);

  imageMode(CENTER);
  //pushMatrix();
  translate(width/2, height/2);
  rotate(radians(rot));   
  m = pgColor.get();
  //popMatrix();

  if (++rot > 360) rot = 0;

  m.mask(pgMask);
  image(m, 0, 0);
}

PGraphics colorWheel(float diameter, int step)
{
  PGraphics pg = createGraphics((int)diameter, (int)diameter, P2D);
  pg.beginDraw();
  pg.colorMode(HSB, 100);
  float lastAngle = 0;
  for (int i = 0; i < 360; i+=step) {
    float hue = map(i, 0, 360, 0, 100);
    pg.fill(hue, 100, 100);
    pg.arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(step));
    lastAngle += radians(step);
  }
  pg.endDraw();
  return pg;
}

NeoMatrix

Ahh..solved it ! :) Just realized that translate() and rotate() affect the next drawing operation and not the items that are already drawn. So I needed to re-draw PGraphics content after rotating it, which I am doing by saving the PGraphics in a PImage and copying it into PGraphics every time draw() is executed after applying the translation and rotation. Here is the working code if anyone is interested :) PImage m; float rot =360.0; PGraphics pgColor; PGraphics pgMask; PImage piBuffer; PFont f;

void setup() {
  size(400, 400, P2D);
  smooth();
  frameRate(30);
  background(0);

  pgColor = colorWheel(width, 60);

  f = createFont("Arial-Bold", 16, true);  
  pgMask = createGraphics(width, height, P2D);
  pgMask.beginDraw();
  pgMask.background(0);
  pgMask.noFill();
  pgMask.stroke(255);
  pgMask.strokeWeight(2);
  pgMask.rectMode(RADIUS);
  pgMask.rect(width/2, height/2, 100, 100);
  pgMask.textFont(f, 45);
  pgMask.text("TEST", width/2-50, height/2);
  pgMask.endDraw();

  piBuffer = pgColor.get();
  m = pgColor.get();
  m.mask(pgMask);
}

void draw()
{
  background(0);

  pgColor.pushMatrix();
  pgColor.imageMode(CENTER);
  pgColor.beginDraw();
  pgColor.translate(pgColor.width/2, pgColor.height/2);
  pgColor.rotate(radians(rot));
  pgColor.image(piBuffer, 0, 0);
  pgColor.endDraw();
  pgColor.popMatrix();

  rot-=1;
  if (rot < 0) rot = 360;

  m = pgColor.get();
  m.mask(pgMask);
  image(m, 0, 0);
}

PGraphics colorWheel(float diameter, int step)
{
  PGraphics pg = createGraphics((int)diameter, (int)diameter, P2D);
  pg.beginDraw();
  pg.colorMode(HSB, 100);
  float lastAngle = 0;
  for (int i = 0; i < 360; i+=step) {
    float hue = map(i, 0, 360, 0, 100);
    pg.fill(hue, 100, 100);
    pg.arc(pg.width/2, pg.height/2, diameter, diameter, lastAngle, lastAngle+radians(step));
    lastAngle += radians(step);
  }
  pg.endDraw();
  return pg;
}

dttworld

NeoMatrix,

Thanks for the example. I just discovered the power of PGraphics today and am soaking in as many examples as I can find. BTW - I found that your code runs much faster if I remove any references to P2D in the sketch.

NeoMatrix

dttworld, I am not sure why is it slower with P2D. When I started this code, I was using JAVA2D and was getting error that mask() cannot be used with JAVA2D. So I switched to P2D. However, now if I run with JAVA2D option, it works just fine. Strange 8-|