Help with PGraphics

[urbsturbs]

// im trying to make the 2 PGraphics work together. could someone show me how to do it please?

/* @pjs font=/media/css/Chunkfive-webfont.ttf; */
/** @peep sketch */

PGraphics offscreen, control;


// Snake
float angle = 0.0; // The current angle passed to sin() to calculate the x
float speed = 3; // The angular speed (in degrees)
float shift = 45; // The shift between the phases of the circles (in degrees)
float radius = 13; // The radius of the circles to draw
float opacity = 20;

// Scrollbars
class Scrollbar {
int x, y; // The x- and y-coordinates
float sw, sh; // Width and height of scrollbar
float pos; // Position of thumb
float posMin, posMax; // Max and min values of thumb
boolean rollover; // True when the mouse is over
boolean locked; // True when its the active scrollbar
float minVal, maxVal; // Min and max values for the thumb
Scrollbar (int xp, int yp, int w, int h, float miv, float mav) {
x = xp;
y = yp;
sw = w;
sh = h;
minVal = miv;
maxVal = mav;
pos = x + sw/2 - sh/2;
posMin = x;
posMax = x + sw - sh;
}

// Updates the over boolean and the position of the thumb
void update(int mx, int my) {
if (over(mx, my) == true) {
rollover = true;
} else {
rollover = false;
}
if (locked == true) {
pos = constrain(mx-sh/2, posMin, posMax);
}
}

// Locks the thumb so the mouse can move off and still update
void press(int mx, int my) {
if (rollover == true) {
locked = true;
} else {
locked = false;
}
}

// Resets the scrollbar to neutral
void release() {
locked = false;
}

// Returns true if the cursor is over the scrollbar
boolean over(int mx, int my) {
if ((mx > x) && (mx < x+sw) && (my > y) && (my < y+sh)) {
return true;
} else {
return false;
}
}

void display() {
fill(255);
rect(x, y, sw, sh);
if ((rollover==true) || (locked==true)) {
fill(0);
} else {
fill(104);
}
rect(pos, y, sh, sh);
}
// Returns the current value of the thumb
float getPos() {
float scalar = sw/(sw-sh);
float ratio = (pos - x) * scalar;
float offset = minVal + (ratio/sw * (maxVal-minVal));
return offset;
}

}
Scrollbar bar1, bar2, bar3;
PFont font;

void setup() {
size(500, 600);
background(0);
//PGraphics setup for tools
offscreen = createGraphics(width, height);
offscreen.beginDraw();
offscreen.background(0);


//PGraphics for directions and GUI
control = createGraphics(width, height);
control.beginDraw();
control.background();


// "Colour Control" text
control.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 13);
control.textFont(font);
control.fill(0, 247, 198); // aqua
control.text("Colour Control", 7, 24);

// "Red" text
control.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 12);
control.textFont(font);
control.fill(255, 0, 0); // red
control.text("Red", 100, 44);

// "Green" text
control.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 12);
control.textFont(font);
control.fill(0, 255, 0); // Green
control.text("Green", 98, 64);

// "blue" text
control.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 14);
control.textFont(font);
control.fill(0, 0, 255); // Blue
control.text("Blue", 100, 85);

//box around "Press 'a' key for circles"
control.fill(255, 100);
control.rect(4, 546, 80, 50);

//box around "Press 'd' key for snake"
control.fill(255, 100);
control.rect(419, 546, 78, 50);

//box around "Press 'z' key for company logo"
control.fill(255, 100);
control.rect(5, 247, 79, 92);

//box around "right click to erase"
control.fill(255, 100);
control.rect(420, 247, 77, 70);

// "Press 'a' key for circles" text
offscreen.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 15);
offscreen.textFont(font);
offscreen.fill(0, 247, 198); // aqua
offscreen.String s = "Press the a key for Circles";
offscreen.text(s, 10, 550, 70, 400);

// "Press 'd' key for snake" text
offscreen.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 15);
offscreen.textFont(font);
offscreen.fill(0, 247, 198); // aqua
offscreen.String d = "Press the d key for Snake";
offscreen.text(d, 425, 550, 70, 400);

// "Press 'z' key for company logo" text
offscreen.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 15);
offscreen.textFont(font);
offscreen.fill(0, 247, 198); // aqua
offscreen.String z = "Press the z key and click for the company logo";
offscreen.text(z, 10, 250, 70, 400);

// "right click to erase" text
offscreen.PFont font = createFont("/media/css/Chunkfive-webfont.ttf", 15);
offscreen.textFont(font);
offscreen.fill(0, 247, 198); // aqua
offscreen.String r = "right click the mouse to erase";
offscreen.text(r, 425, 254, 70, 400);
offscreen.noStroke();

// Inputs: x, y, width, height, minVal, maxVal
control.bar1 = new Scrollbar(10, 35, 80, 10, 0.0, 255.0);
control.bar2 = new Scrollbar(10, 55, 80, 10, 0.0, 255.0);
control.bar3 = new Scrollbar(10, 75, 80, 10, 0.0, 255.0);

offscreen.endDraw();
control.endDraw();
}

void draw() {
offscreen.beginDraw();
control.beginDraw();
//rectangle around scrollbars
control.rect(5, 30, 90, 60);
control.fill(255);

// d key control
{
offscreen.if ((keyPressed) && (key == 'd')) // when d key is pressed snake will appear
{
offscreen.fill(0,10);
offscreen.rect(0,0,width,height);
offscreen.angle = angle + speed;
offscreen.pushMatrix();
offscreen.translate(width/2, height - radius);
offscreen.float phase = 0;
offscreen.for (int i = 0; i < 23; i++) {
offscreen.float x = 20 * sin(radians(angle + phase));
offscreen.fill(bar1.getPos(),bar2.getPos(),bar3.getPos());
offscreen.stroke(bar1.getPos(),bar2.getPos(),bar3.getPos());
offscreen.ellipse(x, 0, 2*radius, 2*radius);// circle sizes
offscreen.translate(0, -2*radius); //distance from circles
offscreen.phase += shift;
}
offscreen.popMatrix();
}
}

// a key control
offscreen.if ((keyPressed == true) && (key == 'a')) { // If the a key is pressed circles will appear
offscreen.noFill();
offscreen.stroke(bar1.getPos(),bar2.getPos(),bar3.getPos(),40);
offscreen.for (int i = 0; i < height; i+=200 ) {
offscreen.if(frameCount %5 == 0) {
offscreen.float b = random(width/12);
offscreen.strokeWeight(3);
offscreen.float offset = b * 5.6;
offscreen.ellipse(width/2, random(height), offset, offset);
}
} // draw a line
} offscreen.else { // Otherwise,
// draw a rectangle

// Z key control
offscreen.fill(random(255), random(255), random(255));
offscreen.String myText = "CEEBS"; // wording
offscreen.if ((keyPressed == true) && (mousePressed == true)) {
offscreen.if ((mouseButton == LEFT) && (key == 'z')) { // once the z key is pressed the mouse is clicked text will show wherever th e mouse goes
offscreen.text(myText, mouseX, mouseY);
}
}
offscreen.if (mouseButton == RIGHT) //when right clicked eraser will be activated
{
offscreen.fill(0);
offscreen.noStroke();
offscreen.ellipse(mouseX, mouseY, 40, 40); // eraser dimensions
}
offscreen.endDraw();
control.endDraw();
}



noFill();
bar1.update(mouseX, mouseY);
bar3.update(mouseX, mouseY);
bar2.update(mouseX, mouseY);
bar1.display();
bar2.display();
bar3.display();
}

// mouse press control
void mousePressed() {
bar1.press(mouseX, mouseY);
bar2.press(mouseX, mouseY);
bar3.press(mouseX, mouseY);
}

// mouse release control
void mouseReleased() {
bar1.release();
bar2.release();
bar3.release();

}
//