![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2020/08/stop-banner.png)
// Jenny Zhang
// jennyzha
// Section D
// Final Project
var img;
//setting a global variable for picture the user can paint
var col = [0, 0, 0, 0];
//setting a an initial color for the paintbrush color
var aSlider;
//setting a global variable for the slider that will control the width of the brush
var SizeOfBrush = 10;
//setting initial SizeOfBrush for the width of the brush
function preload() {
var imgs = [];
//preloading all of the possible images the user can paint into an array
imgs[0] = "http://i.imgur.com/UyyTNyF.png";
imgs[1] = "http://i.imgur.com/sW4fWRP.png";
imgs[2] = "http://i.imgur.com/6HBfsCu.png";
imgs[3] = "http://i.imgur.com/60ITEbG.png";
imgs[4] = "http://i.imgur.com/Zli7OsC.png";
imgs[5] = "http://i.imgur.com/ztRhRts.png";
imgs[6] = "http://i.imgur.com/Qx8zJO4.png";
imgs[7] = "http://i.imgur.com/mzxbto4.png";
imgs[8] = "http://i.imgur.com/vXdn15r.png";
imgs[9] = "http://i.imgur.com/shwrAy5.png";
imgs[10] = "http://i.imgur.com/manEqm3.png";
imgs[11] = "http://i.imgur.com/oh8iKpK.png";
imgs[12] = "http://i.imgur.com/oh8iKpK.png";
imgs[13] = "http://i.imgur.com/306OVy6.png";
imgs[14] = "http://i.imgur.com/xJVNo7U.png";
imgs[15] = "http://i.imgur.com/4mv8uhP.png";
imgs[16] = "http://i.imgur.com/MvNo2DV.png";
imgs[17] = "http://i.imgur.com/dxlMoKR.png";
imgs[18] = "http://i.imgur.com/mxti4c2.png";
imgs[19] = "http://i.imgur.com/hDtDFhD.png";
imgs[20] = "http://i.imgur.com/shwrAy5.png";
var num = floor(random(0, imgs.length));
//randomly choosing a picture from the array to paint
img = loadImage(imgs[num]);
//assigning the image to the variable img
}
function setup() {
createCanvas(800, 650);
background(145, 200, 200);
aSlider = createSlider(10, 50, SizeOfBrush);
aSlider.position(670, 620);
//creating the slider, placing it at the bottom of the canvas
fill(250);
noStroke();
rect(0, 300, 800, 650);
//creating the canvas that the user will draw on
fill(145, 200, 200);
noStroke();
rect(0, 590, 800, 650);
//creating the canvas that the user will draw on
fill(0);
textSize(20);
text("Paint Away!", 0, 20);
//writing the title of the page
fill(0);
textSize(15);
text("Click on the painting to choose your color, then paint by clicking on the bottom canvas provided.", 0, 40);
//writing the instructions to choosing your color
fill(0);
textSize(15);
text("Move the slider in the bottom right corner to change the size of your paint brush.", 0, 55);
//writing the instructions to choosing your paintbrush size
}
function mousePressed(){
SizeOfBrush = aSlider.value();
//setting the width of the brush SizeOfBrush to the slider value
//this is adapted from lab 15
if (mouseX > 0 & mouseX < 800 && mouseY > 0 && mouseY < 350) {
col = get(mouseX, mouseY);
}
//creating a restriction that the user can only get their color from the provided image
else if (mouseX > 0 & mouseX < 800 && mouseY > 350 && mouseY < 600 - SizeOfBrush/2){
fill(color(col));
ellipse(mouseX, mouseY, SizeOfBrush);
}
//telling the program that anywhere else besides the picture, they can draw a single ellipse
fill(145, 200, 200);
rect(70, 615, 250, 15);
//effectively "erases"/"refreshes" the text every time the draw function is called
fill(0);
textSize(12);
text("Your brush color is (" + col + ")", 70, 625);
//creates a text box telling you your current paintbrush color
//this is adapted from assignment 11A, text rain
}
function mouseDragged() {
SizeOfBrush = aSlider.value();
//setting the brush size to the slider value
if (mouseX > 0 & mouseY > 0 &&
mouseX < 800 && mouseY > 300 &&
mouseY < 600 - SizeOfBrush/2) {
noStroke();
fill(color(col));
//setting the restriction so that when the mouse is dragged the user can draw in the provided canvas area
ellipse(mouseX, mouseY, SizeOfBrush);
}
}
function draw() {
image(img, 0, 60);
//place current picture the user will draw
fill(color(col));
rect(10,595,50,50);
//creates the square in the botton that shows the current color the user is using
}My final project is essentially a virtual coloring book. The steps are very simple and easy. All you have to do is refresh the page if you don’t want to paint the painting provided until you are satisfied with the one loaded. Next, choose your first color to paint with by clicking on the color in the painting. Afterwards, choose the thickness of your brush by sliding the slider in the bottom right corner. Finally, click or drag across the bottom half of the screen, or your “canvas” to draw!
*unfortunately, wordpress is unable to handle the canvas size of the program, that being said, please refer to the attached zip file for the full effect – thank you!*
