/* @pjs font="/media/css/Chunkfive-webfont.ttf"; */
/* @peep sketchcode */
Scrollbar bar1, bar2, bar3, bar4, bar5;
Check check1, check2, check3, check4;
int numButtons = 4;
Radio[] buttons = new Radio[numButtons];
PaintBrush brush;
Pen pens;
Circles circle;
Squares square;
PFont font;
PGraphics ui;
PGraphics sketch;
PGraphics BG;
PGraphics pixelate;
void setup() {
size(500, 600);
background(255);
noStroke();
ui = createGraphics(100, height);
sketch = createGraphics(width, height);
BG = createGraphics(width, height);
font = loadFont("Calibri-20.vlw");
textFont(font);
textAlign(CENTER);
// Inputs: x, y, width, height, minVal, maxVal
bar1 = new Scrollbar(10, 60, 80, 10, 0.0, 360.0); //HUE
bar2 = new Scrollbar(10, 75, 80, 10, 0.0, 100.0); //SATURATION
bar3 = new Scrollbar(10, 90, 80, 10, 0.0, 100.0); //BRIGHTNESS
bar4 = new Scrollbar(10, 215, 80, 10, 0.0, 10.0); //THICKNESS
bar5 = new Scrollbar(10, 230, 80, 10, 0.0, 100.0); //OPACITY
// Inputs: x, y, width, height, color
check1 = new Check(10, 275, 80, 10, color(0));
check2 = new Check(10, 290, 80, 10, color(0));
check3 = new Check(10, 10, 80, 20, color(0));
check4 = new Check(10, 570, 80, 20, color(0));
for (int i = 0; i < buttons.length; i ++ ) {
buttons[i] = new Radio(15, 325 + (i * 20), 10, color(255), color(0),
i, buttons);
}
square = new Squares();
circle = new Circles();
brush = new PaintBrush();
pens = new Pen(0.15, 0.05, 0.1); //easing values
pens.set();
}
void draw() {
//////////////////////////////USER INTERFACE//////////////////////////////////
ui.beginDraw();
ui.background(0);
ui.colorMode(HSB, 360, 100, 100, 100);
ui.fill(0, 0, 100);
ui.text("HUE/SAT/BRI", 12.5, 50);
ui.text("THICK/OPACI", 12.5, 205);
bar1.update(mouseX, mouseY);
bar2.update(mouseX, mouseY);
bar3.update(mouseX, mouseY);
bar4.update(mouseX, mouseY);
bar5.update(mouseX, mouseY);
bar1.display();
bar2.display();
bar3.display();
bar4.display();
bar5.display();
check1.display();
check2.display();
check3.display();
check4.display();
ui.stroke(255);
ui.fill(bar1.getPos(), bar2.getPos(), bar3.getPos());
ui.rect(10, 105, 80, 80);
ui.pushStyle();
ui.strokeCap(SQUARE);
ui.strokeWeight(bar4.getPos());
ui.stroke(bar1.getPos(), bar2.getPos(), bar3.getPos(), bar5.getPos());
ui.line(10, 255, 90, 255);
ui.popStyle();
ui.fill(255);
ui.text("Paint Brush", 25, 330);
ui.text("Harmony", 25, 350);
ui.text("Circles", 25, 370);
ui.text("Squares", 25, 390);
for (int i = 0; i < buttons.length; i ++) {
buttons[i].display();
}
if (check1.checked == true) {
ui.fill(0);
} else {
ui.fill(255);
}
ui.text("Mirror", 32, 285);
if (check2.checked == true) {
ui.fill(0);
} else {
ui.fill(255);
}
ui.text("Pixelate", 28, 300);
if (check3.checked == true) {
ui.fill(0);
} else {
ui.fill(255);
}
ui.text("Background/B", 10, 25);
if (check4.checked == true) {
ui.fill(0);
} else {
ui.fill(255);
}
ui.text("CLEAR/C", 25, 585);
ui.endDraw();
//////////////////////////////SKETCH//////////////////////////////////
if ((bar1.locked == false) && (bar2.locked == false) && (bar3.locked == false) && (bar4.locked == false) && (bar5.locked == false)) {
sketch.beginDraw();
sketch.colorMode(HSB, 360, 100, 100, 100);
if (check3.checked == true) {
sketch.background(bar1.getPos(), bar2.getPos(), bar3.getPos());
} else if (check4.checked == true) {
sketch.background(0, 0, 100);
}
if ((mousePressed == true)) {
if (buttons[0].checked == true) {
brush.display();
} else if (buttons[1].checked == true) {
pens.display();
} else if (buttons[2].checked == true) {
if (frameCount % 2 == 0) {
circle.display();
}
} else if (buttons[3].checked == true) {
if (frameCount % 2 == 0) {
square.display();
}
}
}
square.update();
circle.update();
pens.update();
}
sketch.endDraw();
//////////////////////////////Background//////////////////////////////////
BG.beginDraw();
BG.colorMode(HSB, 360, 100, 100);
if (check3.checked == true) {
BG.background(bar1.getPos(), bar2.getPos(), bar3.getPos());
}
BG.endDraw();
//image(background, 0, 0);
image(sketch, 0, 0);
image(ui, 0, 0);
}
void mousePressed() {
bar1.press(mouseX, mouseY);
bar2.press(mouseX, mouseY);
bar3.press(mouseX, mouseY);
bar4.press(mouseX, mouseY);
bar5.press(mouseX, mouseY);
check1.press(mouseX, mouseY);
check2.press(mouseX, mouseY);
check3.press(mouseX, mouseY);
check4.press(mouseX, mouseY);
for (int i = 0; i < buttons.length; i ++) {
buttons[i].press(mouseX, mouseY);
}
}
void mouseReleased() {
bar1.release();
bar2.release();
bar3.release();
bar4.release();
bar5.release();
}
void keyPressed() {
if (key == 's') {
save("UI.jpg");
}
if (key == 'c') {
sketch.background(0, 0, 100);
} else if (key == 'b') {
sketch.background(bar1.getPos(), bar2.getPos(), bar3.getPos());
}
}
class PaintBrush {
float speed;
float seed;
void update() {
speed = dist(mouseX, mouseY, pmouseX, pmouseY);
seed += PI/360;
}
void display() {
for (float i = 0; i<((bar5.getPos() + 1)/100);i+=0.001) {
//speed = dist(mouseX, mouseY, pmouseX, pmouseY);
seed += PI/200;
sketch.colorMode(HSB, 360, 100, 100, 100);
sketch.pushMatrix();
sketch.translate( lerp(pmouseX, mouseX, i), lerp(pmouseY, mouseY, i));
sketch.fill(bar1.getPos(), bar2.getPos(), bar3.getPos(), 10);
sketch.stroke(bar1.getPos(), bar2.getPos(), bar3.getPos(), 10);
sketch.strokeWeight(bar4.getPos());
sketch.rectMode(CENTER);
sketch.rect(0, 0, lerp(0, noise(seed)*speed, i), 4);
sketch.popMatrix();
}
}
}
class Pen {
ArrayList history;
float x, y, ox, oy, ix, iy;
float targetX, targetY;
float easing1;
float easing2;
float easing3;
Pen(float _easing1, float _easing2, float _easing3) {
easing1 = _easing1;
easing2 = _easing2;
easing3 = _easing3;
}
void set() {
history = new ArrayList();
}
void update() {
targetX = mouseX;
targetY = mouseY;
x += (targetX - x) * easing1;
y += (targetY - y) * easing1;
ox += (targetX - ox) * easing2;
oy += (targetY - oy) * easing2;
ix += (targetX - ix) * easing3;
iy += (targetY - iy) * easing3;
}
void display() {
colorMode(HSB, 360, 100, 100, 100);
for (int i = 0; i < history.size(); i++) {
PVector r = (PVector) history.get(i);
if (dist(x, y, r.x, r.y) < 40) {
sketch.colorMode(HSB, 360, 100, 100, 100);
sketch.stroke(bar1.getPos(), bar2.getPos(), bar3.getPos(), (bar5.getPos()+ 10)/5);
sketch.strokeWeight(bar4.getPos()/10);
sketch.line(x, y, r.x, r.y);
}
if (dist(ox, oy, r.x, r.y) < 40) {
sketch.colorMode(HSB, 360, 100, 100, 100);
sketch.stroke(0, 0, 90, 1);
sketch.strokeWeight(bar4.getPos()/10);
sketch.line(ox, oy, r.x, r.y);
}
if (dist(ix, iy, r.x, r.y) < 40) {
sketch.colorMode(HSB, 360, 100, 100, 100);
sketch.stroke(50 ,50, 100, 1);
sketch.strokeWeight(bar4.getPos()/5);
sketch.line(ix, iy, r.x, r.y);
}
}
history.add(new PVector(x, y));
history.add(new PVector(ox, oy));
history.add(new PVector(ix, iy));
}
}
class Shapes {
int angle = 0;
float val;
float xoff;
float yoff;
float zoff;
Shapes() {
}
void update() {
angle += 10;
val = cos(radians(angle)) * 20.0;
for (int a = 0; a < 360; a += 360) {
xoff = cos(radians(a)) * val;
yoff = sin(radians(a)) * val;
zoff = tan(radians(a)) * val;
}
}
}
class Circles extends Shapes {
void display() {
sketch.colorMode(HSB, 360, 100, 100, 100);
sketch.stroke(bar1.getPos(), bar2.getPos(), bar3.getPos(), bar5.getPos());
sketch.strokeWeight(bar4.getPos() + 5);
sketch.fill(bar1.getPos(), bar2.getPos(), bar3.getPos(), bar5.getPos());
sketch.pushMatrix();
sketch.translate(mouseX, mouseY);
sketch.rotate(angle/10);
sketch.ellipse(xoff, yoff, val, val);
sketch.popMatrix();
}
}
class Squares extends Shapes {
void display() {
sketch.colorMode(HSB, 360, 100, 100);
sketch.stroke(bar1.getPos(), bar2.getPos(), bar3.getPos(), bar5.getPos());
sketch.strokeWeight(bar4.getPos() + 5);
sketch.fill(bar1.getPos(), bar2.getPos(), bar3.getPos(), bar5.getPos());
sketch.pushMatrix();
sketch.translate(mouseX, mouseY);
sketch.rotate(angle);
sketch.rect(xoff, yoff, val, val);
sketch.popMatrix();
}
}
class Check {
int x, y; // The x- and y-coordinates
int wid, hei; // Dimension (width and height)
color baseGray; // Default gray value
boolean checked = false; // True when the check box is selected
Check(int xp, int yp, int w, int h, color b) {
x = xp;
y = yp;
wid = w;
hei = h;
baseGray = b;
}
// Updates the boolean variable checked
void press(float mx, float my) {
if ((mx >= x) && (mx <= x+wid) && (my >= y) && (my <= y+hei)) {
checked = !checked; // Toggle the check box on and off
}
}
// Draws the box and an X inside if the checked variable is true
void display() {
ui.stroke(255);
//fill(baseGray);
if (checked == true) {
ui.fill(255);
} else {
ui.fill(0);
}
ui.rect(x, y, wid, hei);
}
}
class Radio {
int x, y; // The x- and y-coordinates of the rect
int size, dotSize; // Dimension of circle, inner circle
color baseGray, dotGray; // Circle gray value, inner gray value
boolean checked = false; // True when the button is selected
int me; // ID number for this Radio object
Radio[] others; // Array of all other Radio objects
Radio(int xp, int yp, int s, color b, color d, int m, Radio[] o) {
x = xp;
y = yp;
size = s;
dotSize = size - size/3;
baseGray = b;
dotGray = d;
others = o;
me = m;
}
// Updates the boolean value press, returns true or false
boolean press(float mx, float my) {
if (dist(x, y, mx, my) < size/2) {
checked = true;
for (int i = 0; i < others.length; i++) {
if (i != me) {
others[i].checked = false;
}
}
return true;
} else {
return false;
}
}
// Draws the element to the display window
void display() {
ui.noStroke();
ui.fill(baseGray);
ui.ellipse(x, y, size, size);
if (checked == true) {
ui.fill(dotGray);
ui.ellipse(x, y, dotSize, dotSize);
}
}
}
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;
}
}
// Draws the scrollbar to the screen
void display() {
ui.fill(255);
ui.rect(x, y, sw, sh);
ui.colorMode(HSB, 360, 100, 100);
if ((rollover==true) || (locked==true)) {
ui.fill(0, 0, 100);
} else {
ui.fill(102);
}
ui.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;
}
}
