Simple paint program with functionality such as pencil, eraser, paintbrush, and special effect markers.
The showcase player uses a modified version of Processing.js in combination with jsweet to let students program their apps in Java code while still allowing for browser support.
Content created by students is scaled to fit the showcase frame while maintaining aspect ratio and cursor position. This is why some projects may appear blurry in fullscreen, or why some small details may not be visible on a small screen
<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#46681' allowfullscreen></iframe>PImage myImage;
boolean load = true;
class Button {
int x;
int y;
int width;
int height; //usually 65
int stroke;
PImage img;
int code; //0 for pencil, 1 for eraser, etc.
boolean isPressed; //if selected
Button(int x, int y, int width, int height, int stroke, PImage img, int code) {
this.x = x; //this for constructor
this.y = y;
this.width = width;
this.height = height;
this.stroke = stroke;
this.img = img;
this.code = code;
}
void drawbutton() {
img.width = width;
img.height = height;
image(img, x, y);
}
boolean isButtonPressed() {
if (mousePressed && mouseX > x && mouseX < (x + width) && mouseY > y && mouseY < (y + height)) {
return true;
}
return false;
}
void drawLines() {
stroke(R, G, B);
strokeWeight(this.stroke);
if (code == 1) { //eraser
stroke(255, 255, 255);
strokeWeight(25);
}
if (code == 2) { //paintbrush
strokeWeight(10);
}
line(pmouseX, pmouseY, mouseX, mouseY);
}
void drawEffects() {
img.height = 35;
img.width = 35;
image(img, mouseX, mouseY);
fill(0);
}
void alpha_f() {
float r_ = red(myImage.get(mouseX, mouseY));
float g_ = green(myImage.get(mouseX, mouseY));
float b_ = blue(myImage.get(mouseX, mouseY));
// println(r_);
//println("in h ere");
color c = color(255, 255, 255);
for (int i = 0; i < myImage.width; i++) {
for (int j = 0; j < myImage.height; j++) {
float r = red(myImage.get(i, j));
float g = green(myImage.get(i, j));
float b = blue(myImage.get(i, j));
if ((abs(r - r_) > 15 && abs(g - g_) > 15 && abs(b - b_) > 15)) {
myImage.set(i, j, c);
}
}
}
}
void shapes() {
ellipse(mouseX,mouseY, 50, 50);
}
}
int R, G, B;
ArrayList < Button > buttons = new ArrayList < Button > ();
String[] urls = new String[] {
"https://image.ibb.co/hpUTQy/pencil.png",
"https://image.ibb.co/hZfwCd/eraser.png",
"https://image.ibb.co/k45Vso/paint.png",
"https://image.ibb.co/dopbvy/circle.png",
"https://image.ibb.co/eMdaoJ/line.png",
"https://image.ibb.co/cOwsUd/alpha.gif"
};
PImage colors;
PImage alpha;
void setup() {
size(800, 600);
background(255, 255, 255);
for (int i = 0; i < 6; i++) {
//x, y, width, height, stroke, img, url, code
Button tmp = new Button(725, 5 + 70 * i, 65, 65, 1, loadImage(urls[i]), i);
//load image returns the url
//i is the code or index of array
buttons.add(tmp);
}
PImage effect_img = loadImage("https://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png");
PImage star_img = loadImage("https://image.ibb.co/jkpFTT/images.jpg");
colors = loadImage("https://image.ibb.co/cqmjk8/do.jpg");
Button effect = new Button(400, 520, 65, 65, 1, effect_img, 10);
Button star = new Button(475, 520, 65, 65, 1, star_img, 11);
// Button colors = new Button(0,520,300,80,1,colors_img,7);
buttons.add(effect);
buttons.add(star);
// buttons.add(colors);
//you may need to hardcode these ones like the ones above
alpha = loadImage("https://image.ibb.co/cOwsUd/alpha.gif");
PImage airbrush = loadImage("https://image.ibb.co/mWAzFy/airbrush.png");
myImage = loadImage("https://image.ibb.co/mPeMny/pool.jpg");
}
void draw() {
//insert colorpicker
colors.height = 80;
colors.width = 300;
image(colors, 0, 520);
// image(alpha, 700, 500, 65, 65);
for (int i = 0; i < buttons.size(); i++) {
buttons.get(i).drawbutton();
}
//calls drawbutton() function
// println(mouseX,mouseY);
for (int i = 0; i < buttons.size(); i++) {
if (buttons.get(i).isPressed && mousePressed && mouseX < 670 && mouseY < 455) { // a button has been pressed
//this means it's eraser or pencil
// println(buttons.get(i).code);
if (buttons.get(i).code == 1 || buttons.get(i).code == 0 || buttons.get(i).code == 2) {
load = false;
buttons.get(i).drawLines();
}
if (buttons.get(i).code == 10 || buttons.get(i).code == 11) {
load = false;
buttons.get(i).drawEffects();
}
if (buttons.get(i).code == 5) {
load = true;
buttons.get(i).alpha_f();
}
}
}
//reset lines
stroke(0);
strokeWeight(1);
line(0, 480, 700, 480);
line(700, 0, 700, 600);
fill(100, 100, 100);
textAlign(LEFT, LEFT);
textSize(25);
text("Special Marker Effects:", 350, 515);
text("Choose Color ", 72, 515);
if (load) {
image(myImage, 140, 20, 450, 450);
}
}
int[] r_arr = new int[] {
255,
255,
255,
0,
0,
153,
102,
255
};
int[] g_arr = new int[] {
0,
153,
255,
204,
0,
0,
51,
20
};
int[] b_arr = new int[] {
0,
0,
0,
0,
255,
204,
0,
147
};
void mousePressed() {
// println(buttons.size());
//flags for pencil, eraser, paintbrush
for (int i = 0; i < buttons.size(); i++) {
if (buttons.get(i).isButtonPressed()) {
for (int j = 0; j < buttons.size(); j++) {
buttons.get(j).isPressed = false;
}
buttons.get(i).isPressed = true;
// println(buttons.get(i).isPressed);
}
}
//choosing colors
if (mouseX > 25 && mouseX < 273 && mouseY > 525 && mouseY < 590) {
int index = int(mouseX - 30) / 30;
R = r_arr[index];
G = g_arr[index];
B = b_arr[index];
}
}