Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Mirror paint! [Khantober w-1]
ID	4668063956025344
Created	4 years ago, 1601438675361
Updated	4 years ago, 1607592816173
Code	/* Mirror Paint! [Khantober 2020 week-1] FINISHED: October 01, 2020 credits: @LarrySerflaten and @Ian for helping me throughout the project! / /* *right click to save image* */ enableContextMenu(); smooth(); //Global variables { var scene = 0;//scene, starting from 0 var brushSize = 5;//default brush size var brushColor = 0; var pos = 0; var pos2 = 0; var color1 = color(0, 0, 0);//black var color2 = color(255, 0, 0); //red var color3 = color(21, 255, 0);//green var color4 = color(4, 0, 255);//blue var color5 = color(mouseX, mouseY, 80);//blend1 var color6 = color(mouseY, mouseX, 180);//blend2 var color7 = color(mouseX, mouseY, 255);//blend3 } //object storing colors and sizes and fonts we'll use often var store = { f : createFont("monospace"), titleSize : 60, themeC : color(255, 181, 255), buttonC : color(204, 47, 131) }; //functions var brushSizeIndicator = function(pos){ noFill(); stroke(store.themeC); strokeWeight(1); rect(26 + 61pos, 322, 30, 30); }; var brushColorIndicator = function(pos2){ noFill(); stroke(store.themeC); strokeWeight(5); rect(22 + pos2 * 53, 188, 30, 30); }; var returnBtn = function(){ noStroke(); fill(store.themeC); rect(-11, 0, 50, 27, 58); stroke(0, 0, 0); strokeWeight(3); line(3, 13, 9, 4); line(3, 13, 9, 21); line(3, 12, 26, 12); }; var mouseIn = function(left, right, top, bottom){ return mouseX > left && mouseX < right &&mouseY > top && mouseY < bottom; }; //Scene functions var introScene = function() { background(0, 0, 0);//black background textAlign(CENTER, CENTER);//aligning the text to the center textFont(store.f);//the font textSize(store.titleSize + 10);//title size //mirrored effect of the title pushMatrix(); fill(140); translate(0, 110); scale(1, -0.7); text("MIRROR", 190, 5); text("PAINT!", 209, -115); popMatrix(); //the title fill(store.themeC); text("MIRROR\n PAINT!", 190, 106);// Heading //rects of the buttons noStroke(); fill(store.buttonC); rect(101, 261, 193, 41, 20); rect(143, 309, 107, 27, 20); rect(143, 343, 107, 27, 20); //text of the buttons fill(store.themeC); textSize(20); text("Settings", 198, 320); text("About", 198, 355); textSize(25); text("START DRAWING!", 200, 282); };//intro scene var drawingScene = function(brushSize, brushColor) { var color5 = color(mouseX, mouseY, 80);//blend1 var color6 = color(mouseX, mouseY, 180);//blend2 var color7 = color(mouseX, mouseY, 255);//blend3 var colorsArray = [color1,color2,color3,color4,color5,color6,color7]; stroke(colorsArray[brushColor]);// color strokeWeight(brushSize);//size //So this is our main painting code. The main logic behind the mirrored effects // is just inversing the mouseX and mouseY coordinates and subtracting them //from 400. COOL! line (mouseX, mouseY, pmouseX, pmouseY); line (400-mouseX, 400-mouseY, 400-pmouseX, 400-pmouseY); line (400-mouseY, mouseX, 400-pmouseY, pmouseX); line (mouseY, 400-mouseX, pmouseY, 400-pmouseX); line ( mouseY,mouseX, pmouseY, pmouseX); line (400-mouseY,400-mouseX, 400-pmouseY, 400-pmouseX); line (mouseX,400-mouseY, pmouseX, 400-pmouseY); line (400-mouseX,mouseY, 400-pmouseX, pmouseY); //return to the home page button returnBtn(); };//drawing scene var settingsScene = function(){ color5 = color(mouseX, mouseY, 80);//blend1 color6 = color(mouseX, mouseY, 180);//blend2 color7 = color(mouseX, mouseY, 255);//blend3 background(0, 0, 0);//black background textAlign(CENTER, CENTER); textFont(store.f); fill(store.themeC); textSize(store.titleSize); text("Settings", 199, 64);// Heading textSize(20); textAlign(LEFT); text("Choose brush color", 10, 170); text("Choose brush size", 10, 300); textSize(16); text("(Try the last three colors!)", 22, 228, 390, 56); stroke(store.themeC); strokeWeight(1); var colorsArray = [color1,color2,color3,color4,color5,color6,color7]; for (var i = 0; i < 7; i++){ fill(colorsArray[i]); rect(22 + i * 53, 188, 30, 30); }//the brush color buttons var brushSize = [5, 6, 7, 8, 9, 10]; for (var i = 0; i < 6; i++){ noFill(); noStroke(); rect(26 + i * 61, 322, 30, 30); fill(store.themeC); ellipse(40 + i * 61, 338, brushSize[i], brushSize[i]); }// the brush size buttons //return to the home page button returnBtn(); };//settings scene var aboutScene = function(){ background(0, 0, 0);//black background textAlign(CENTER, CENTER); textFont(store.f); fill(store.themeC); textSize(store.titleSize); text("About", 199, 64);// Heading textSize(20); text("Hey there! Welcome to the Mirror Paint App!", 20, 39, 375, 223); textSize(19); text("Here, you can create cool patterns even if you are a lousy painter like me. You can even paint with your eyes closed (No joking, try it!). Change the brush color and size from the settings. \n \n E N J O Y !", 20, 174, 375, 223); //return to the home page button returnBtn(); };//about scene //input functions var introInput = function() { if (mouseIn(88, 300, 250, 300)) { background(255, 255, 255); scene = 1;//going to the drawing scene once the "drawing" button is pressed } if (mouseIn(143, 250, 309, 336)) { scene = 2;//going to the settings scene once the "settings" button is pressed } if (mouseIn(141, 250, 343, 370)) { scene = 3;//going to the about scene once the "settings" button is pressed } };// inputs of the intro scene var settingsInput = function() { // the buttons for changing brush size if (mouseIn(26, 56, 322, 352)){ brushSize = 5; pos = 0; }//1st brush size if (mouseIn(87, 117, 322, 352)){ brushSize = 6; pos = 1; }//2nd brush size if (mouseIn(148, 178, 322, 352)){ brushSize = 7; pos = 2; }//3rd brush size if (mouseIn(209, 239, 322, 352)){ brushSize = 8; pos = 3; }//4th brush size if (mouseIn(270, 300, 322, 352)){ brushSize = 9; pos = 4; }//5th brush size if (mouseIn(331, 361, 322, 352)){ brushSize = 10; pos = 5; }//6th brush size //the bruttons for changing brush color if (mouseIn(22, 52, 188, 218)) { pos2 = 0; }//1st brush color if (mouseIn(22 + 53, 52 + 53, 188, 218)) { pos2 = 1; }//2nd brush color if (mouseIn(22 + 532, 52 + 532, 188, 218)) { pos2 = 2; }//3rd brush color if (mouseIn(22 + 533, 52 + 533, 188, 218)) { pos2 = 3; }//4th brush color if (mouseIn(22 + 534, 52 + 534, 188, 218)) { pos2 = 4; }//5th brush color if (mouseIn(22 + 535, 52 + 535, 188, 218)) { pos2 = 5; }//6th brush color if (mouseIn(22 + 536, 52 + 536, 188, 218)) { pos2 = 6; }//7th brush color };// inputs of the settings scene var returnInput = function() { if (mouseIn(-1, 40, -1, 27)) {scene = 0;} };// inputs of the retrun button //Mouse logic mouseClicked = function() { if (scene === 0) { introInput(); }//in scene 0, we call the introInput function if (scene === 1 \|\| 2 \|\| 3) { returnInput(); }//in scene 1,2,3, we call the returnButton function if (scene === 2) { settingsInput(); }//in scene 2, we call the settingsInput function }; //Display scenes draw = function() { if (scene === 0) { introScene();// if scene = 0, we call the intro function } if (scene === 2) { settingsScene(); // if scene = 2, we call the settings function for (var i = 0; i < 6; i++){ if (pos === i) {brushSizeIndicator(i);} } for (var i = 0; i < 7; i++) { if (pos2 === i) {brushColorIndicator(i);} } } if (scene === 3) { aboutScene(); // if scene = 3, we call the about function } }; //only for the drawingScene var mouseDragged = function(){ //if scene is 1, we call the drawingScene function if (scene === 1 && mouseButton === LEFT){ drawingScene(brushSize, pos2); } };
Folds	20,33,36,41,45,50,52,57,59,68,70,72,76,111,113,137,139,177,179,194,198,209,211,263,265,267,271,283,287,306,310,315
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgI2vxbKlCAw
Votes	245
Spin-Offs	4
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	totoro
Author Name	trArittra
Author ID	kaid_255968679935383204444592
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739366086269
Updated	4 months ago, 1744845566577
Source Deleted	unknown