Viewing Program

Program Data

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

Title	Ultimate Paint Maker Plus! v3.0 UPDATE: Colorful gradient background!!!
ID	5799757537607680
Created	11 years ago, 1397849339444
Updated	11 years ago, 1402349119539
Code	/ Painting program created by netbenzhang ⬇︎Scroll down; This comment is huge!⬇ ///////////////////// this.programWasCreatedBy = "netbenzhang"; ///////////////////// There are now so many settings that I had to shrink the "More settings coming soon!" text! ============= Best Drawings Create your own spin-off and get featured up here! ============= 1) Dragon!!!! :D by Morgan Fae (GLaDOS) http://www.khanacademy.org/cs/dragon-d/4741743219048448 2) A drawing of Elsa (from Frozen) by Marge http://www.khanacademy.org/cs/spin-off-of-ultimate-paint-maker-plus-v25-update-save-drawings-to-local-storage/4914432042860544 3) A drawing of Anna (from Frozen) by Marge http://www.khanacademy.org/cs/anna/5853094997917696 4) An impossible triangle by Caribou http://www.khanacademy.org/cs/triangle/6162827229265920 5) Rainbow and flower by 19ShantonJ http://www.khanacademy.org/cs/spin-off-of-ultimate-paint-maker-plus/5190088406335488 6) Bug-eyed Winston! by John White http://www.khanacademy.org/cs/bug-eyed-winston/5238467857481728 7) I DO GOOD? by checkmater123 http://www.khanacademy.org/cs/i-do-good/5087504588865536 CREDITS TO: The Khan Team, for making this program as well as tons of other programs possible Me, for spending an entire two weeks designing, programming and bug-checking And YOU, for voting up, making a spin-off and sharing this program ⬇︎Scroll down; This comment is huge!⬇ ******************************************* * Feedback from Khan Academy Users Like You * ********************************************* ~ This is by far the best program I've looked at all day! You did a great job on it; you are a really good programmer. I'm new to programming, but I hope one day I'll be able to make really awesome programs like this one :) -> Hannah Brotherton ~ Nice! Very professional! -> SparklyGem ~ Impressive! How do you do that? It deserves a million votes. -> Ludi ~ Amazingly Professional! 4.8 stars! Bookmarked! AWESOME! -> NateCS ~ Great job! I vote 5 stars. -> Nina Grace ~ AMAZING WORK! Well done keep up the work; I really enjoyed this is the best I've seen so far :)) -> Sefora ~ Best painting app on KA. Truly. Deserves more votes. -> Rishabh Ranjan (Gamma Guild) ~ make that 89 votes because of me XD -> ChaseWolff(DoUgLaSTEAM) ~ 97th vote! -> Crash ~ 135 votes! BTW AMAZING! -> ☀ Sophia ❄ ~ Awesome^100:) -> Daba ~ Excellent work! -> Kale @ Math.com ~ OK this is Awesome! -> Zachary ~ WAY too awesome for words -> Justin(:D)PI=(3.14159265...) ~ Wowww this is amazing... -> Merrit ~ Wow! This is cool! -> Hannah ~ Awesome game! -> hqarebels ~ This is really cool! I wish I was able to make something like that. -> Fenil ~ Soooooo neat! This is SOOOOO amazing! Good Job! -> PinkPigtails ~ One word: WOW! -> «○Xavier○» ~ Impressive; it's really good! I'm going to vote up! -> John White ~ Did you copy ANY of the code from another program? I am not accusing you just asking. Because I do not want to vote up if it is a copy but I will totally vote up if you did this yourself! LOVE THIS WHOEVER THE ORIGINAL CREATOR IS! LOVE LOVE LOVE IF YOU did this yourself it would be cool to see more programs like this! -> Katie Chamberlain I promise you, EVERYTHING in this program was made by me :D All of the components: the check boxes, radio buttons, color picker, buttons, sliders, etc. were ALL made by me. And if you don't believe me, check out my other programs built specifically to showcase all of these things. (Those were made by me, too) Thank you ten times for taking the time to clear this up with me, and for opening this program up and viewing it. -> (me) ok Just making sure because someone copied mine and then got all the credit (that was a while ago) So I don't want to give credit to the wrong person. Thank you for clarifying that for me I will vote up! -> Katie Chamberlain ⬇︎Scroll down; This comment is huge!⬇ ======================== IMPORTANT FUTURE UPDATES ======================== ~ Add more paint mode presets ~ Convert drawings to code so that you can use them in your own programs =============== VERSION HISTORY =============== v3.0 <-> Added a colorful background to enhance your painting experience! ~~~~ v2.9 <-> If you click on the blur drawing check box, a new slider will appear to the right of the filter check boxes. This slider allows you to change the amount of blur that is applied to your drawing. Higher blur levels may cause lagging, however. v2.8 <-> New preset: Rainbow! Magic marker is now more magical! Try them out :D v2.7.5 <-> Tiny update, but worth mentioning. Combo box drop down menu is now slightly transparent. Fixed check boxes text size. Fixed combo box gradient. v2.7 <-> Made code neater and much more readable. Isolated certain blocks of code to their own functions so that they can be changed more easily. v2.6 <-> bgducing... PRESETS! I created three presets for everyone to try out and use: highlighter, pen, and magic marker. More presets coming soon. v2.5 <-> New component: check boxes! I made a blur drawing check box and an invert drawing check box. Try them out! v2.4 <-> Cleaned up the menu a bit; the two buttons at the bottom which save and load drawings have been replaced with a single button and two radio buttons. The text "Press here!" has been moved to a better location, allowing more room for new settings. All of this is done in preparation for an upcoming update. v2.3 <-> Combo box update: drop down menu now stays on the canvas even if the combo box is near the bottom. v2.2 <-> Hooray! Fixed two extremely annoying bugs in one sweep! Bug 1: alpha wouldn't load properly; Bug 2: constantly saving and loading drawings would cause program to lag. v2.1 <-> Added transparency to the menu's background so that you can see your drawing even if the menu is visible v2.0 <-> Largest Update yet! Now you can save your drawings to your local storage! Your drawing will exist even after you restart the program! ~~~~ v1.9 <-> Large graphics update in preparation for the next update. Button, slider, radio button, and combo box graphics have been improved. v1.8 <-> Made code neater (mainly for myself). v1.7 <-> Fixed lag caused by color picker. v1.6 <-> New alpha slider! Now you can make colors with transparency! v1.5 <-> Combo box graphics improved! Code for combo box can be found in mumbo jumbo. v1.4 <-> Display the HSB values of the current selected color. Toggle between RGB and HSB using the newly improved radio buttons. Code for radio buttons can be found in mumbo jumbo. v1.3 <-> Display the RGB values of the current selected color. Also display the current stroke weight value above the slider. v1.2 <-> Added a rectangle to the left of the color picker that allows you to see the current selected color. v1.1 <-> More settings! Change the stroke cap to create awesome effects. v1.0 <-> Brand new release of what I sense to be an awesome program! ========= THANK YOU ========= A huge thanks to everyone for their feedback! I used the feedback to make improvements to my code: ~ Saving is now more efficient than ever! ~ No more lag! (at least on my computer) If the lag still exists, please tell me :) ~ Mumbo Jumbo is now (somewhat) neater! Yay! If you encounter any problems, please report them to me so that I can fix them. THANKS! :) / if(this.programWasCreatedBy!=="netbenzhang"){throw{message:"This program was created by netbenzhang."};} / Mumbo Jumbo / var Button=function(text){textFont(createFont("sans-serif",12));this.text=text;this.x=0;this.y=0;this.w=textWidth(this.text)+15;this.h=20;this.over=false;this.pressed=false;this.clicked=false;this.released=true;};Button.prototype.draw=function(){colorMode(RGB);if(mouseX>this.x&&mouseX<this.x+this.w&&mouseY>this.y&&mouseY<this.y+this.h){this.over=true;}else{this.over=false;}if(mouseIsPressed&&this.over){this.pressed=true;}else{this.pressed=false;}if(mouseIsPressed&&this.over&&this.released){this.clicked=true;this.released=false;}else{this.clicked=false;}if(!mouseIsPressed){this.released=true;}if(this.pressed){var shade=126;strokeWeight(1);for(var i=this.y+1;i<this.y+this.h;i++){stroke(shade);line(this.x+1,i,this.x+this.w-1,i);shade+=130/this.h;}}else{var shade=230;strokeWeight(1);for(var i=this.y+1;i<this.y+this.h;i++){stroke(shade);line(this.x+1,i,this.x+this.w-1,i);shade-=130/this.h;}}rectMode(CORNER);noFill();stroke(100);strokeWeight(2);rect(this.x,this.y,this.w,this.h,4);fill(200);textAlign(CENTER,CENTER);textSize(12);text(this.text,this.x+this.w/2+1,this.y+this.h/2+1);fill(100);text(this.text,this.x+this.w/2,this.y+this.h/2);};Button.prototype.setLocation=function(x,y){this.x=x;this.y=y;};Button.prototype.setSize=function(w,h){this.w=max(textWidth(this.text)+15,w);this.h=max(20,h);}; var Slider=function(){this.orientation="horizontal";this.value=50;this.min=0;this.max=100;this.x=0;this.y=0;this.length=400;this.focus=false;this.over=false;};Slider.prototype.draw=function(){colorMode(RGB);stroke(122,122,122);strokeCap(ROUND);strokeWeight(10);if(this.orientation==="horizontal"){var shade;for(var i=-2;i<=2;i++){if(i===-2){shade=116;}if(i===-1){shade=170;}if(i===0){shade=193;}if(i===1){shade=205;}if(i===2){shade=174;}stroke(shade);strokeWeight(1);line(this.x,this.y+i,this.x+this.length,this.y+i);}var colors=[[color(150,150,150,100),138],[139,146],[135,178],[157,182],[color(150,150,150,100),168]];for(var i=-2;i<=-1;i++){for(var j=-2;j<=2;j++){stroke(colors[j+2][i+2]);point(this.x+i,this.y+j);}}for(var i=1;i<=2;i++){for(var j=-2;j<=2;j++){stroke(colors[j+2][-i+2]);point(this.x+this.length+i,this.y+j);}}}if(this.orientation==="vertical"){var shade=116;for(var i=-2;i<=2;i++){if(i===-2){shade=116;}if(i===-1){shade=170;}if(i===0){shade=193;}if(i===1){shade=205;}if(i===2){shade=174;}stroke(shade);strokeWeight(1);line(this.x+i,this.y,this.x+i,this.y+this.length);}var colors=[[color(150,150,150,100),138],[139,146],[135,178],[157,182],[color(150,150,150,100),168]];for(var i=-2;i<=-1;i++){for(var j=-2;j<=2;j++){stroke(colors[j+2][i+2]);point(this.x+j,this.y+i);}}for(var i=1;i<=2;i++){for(var j=-2;j<=2;j++){stroke(colors[j+2][-i+2]);point(this.x+j,this.y+this.length+i);}}}if(!mouseIsPressed){this.focus=false;}this.value=constrain(this.value,this.min,this.max);if(this.orientation==="horizontal"){var mappedValue=map(this.value,this.min,this.max,this.x,this.x+this.length);if(dist(mouseX,mouseY,mappedValue,this.y)<=5){this.over=true;}else{this.over=false;}if((mouseIsPressed&&this.over)\|\|this.focus){this.value=map(mouseX,this.x,this.x+this.length,this.min,this.max);this.focus=true;}}if(this.orientation==="vertical"){var mappedValue=map(this.value,this.max,this.min,this.y,this.y+this.length);if(dist(mouseX,mouseY,this.x,mappedValue)<=5){this.over=true;}else{this.over=false;}if((mouseIsPressed&&this.over)\|\|this.focus){this.value=map(mouseY,this.y,this.y+this.length,this.max,this.min);this.focus=true;}}if(this.orientation==="horizontal"){if(mouseIsPressed&&mouseX>=this.x&&mouseX<=this.x+this.length&&mouseY>=this.y-7&&mouseY<=this.y+7){this.value=map(mouseX,this.x,this.x+this.length,this.min,this.max);}}if(this.orientation==="vertical"){if(mouseIsPressed&&mouseY>=this.y&&mouseY<=this.y+this.length&&mouseX>=this.x-7&&mouseX<=this.x+7){this.value=this.value=map(mouseY,this.y,this.y+this.length,this.max,this.min);}}this.value=constrain(this.value,this.min,this.max);ellipseMode(CENTER);strokeWeight(1);if(this.over&&!this.focus){stroke(166,166,166);fill(226,250,255);}else{stroke(166,166,166);fill(255,255,255);}if(this.orientation==="horizontal"){var mappedValue=map(this.value,this.min,this.max,this.x,this.x+this.length);ellipse(mappedValue,this.y,14,14);for(var i=mappedValue-7;i<mappedValue+7;i++){for(var j=this.y-7;j<this.y+7;j++){if(dist(i,j,mappedValue,this.y)<=7){if(j>=this.y){stroke(0,0,0,15);point(i,j);}else if(j>this.y-4){stroke(0,0,0,5);point(i,j);}}}}if(this.focus){var opacity=0;for(var i=8;i<20;i++){noFill();stroke(95,147,196,opacity);ellipse(mappedValue,this.y,i,i);if(i<14){opacity+=20;}else{opacity-=20;}}}}if(this.orientation==="vertical"){var mappedValue=map(this.value,this.max,this.min,this.y,this.y+this.length);ellipse(this.x,mappedValue,14,14);for(var i=this.x-7;i<this.x+7;i++){for(var j=mappedValue-7;j<mappedValue+7;j++){if(dist(i,j,this.x,mappedValue)<=7){if(j>=mappedValue){stroke(0,0,0,15);point(i,j);}else if(j>mappedValue-4){stroke(0,0,0,5);point(i,j);}}}}if(this.focus){var opacity=0;for(var i=8;i<20;i++){noFill();stroke(95,147,196,opacity);ellipse(this.x,mappedValue,i,i);if(i<14){opacity+=20;}else{opacity-=20;}}}}};Slider.prototype.setLocation=function(x,y){this.x=x;this.y=y;};Slider.prototype.setLength=function(length){this.length=abs(length);};Slider.prototype.setOrientation=function(orientation){if(orientation.toLowerCase()==="horizontal"\|\|orientation.toLowerCase()==="vertical"){this.orientation=orientation.toLowerCase();}else{throw{message:"Orientation must be either horizontal or vertical."};}};Slider.prototype.setBounds=function(min,max){if(min<max){this.min=min;this.max=max;}else{throw{message:"Minimum value must be smaller than maximum value."};}};Slider.prototype.setStartValue=function(value){if(value!==undefined){this.value=constrain(value,this.min,this.max);}}; var CURSOR=ARROW;var updateCursor=function(){cursor();this.cursor(CURSOR);};var ColorPicker=function(x,y){this.x=x;this.y=y;this.h=255;this.s=255;this.b=255;this.a=255;this.color=color(this.h,this.s,this.b,this.a);this.saturationAndBrightnessFocus=false;this.hueFocus=false;this.alphaFocus=false;};ColorPicker.prototype.draw=function(){colorMode(HSB);noStroke();rectMode(CORNER);for(var i=0;i<150;i+=5){for(var j=0;j<150;j+=5){fill(this.h,map(i,0,150,0,255),255-map(j,0,150,0,255));rect(i+this.x,j+this.y,5,5);}}colorMode(HSB);strokeWeight(1);for(var i=0;i<150;i++){stroke(map(i,0,150,0,255),255,255);line(175+this.x,i+this.y,200+this.x,i+this.y);}colorMode(RGB);rectMode(CORNER);noStroke();for(var i=0;i<25;i+=5){for(var j=0;j<150;j+=5){if((i/5+j/5)%2===0){fill(0,0,0);}else{fill(255,255,255);}rect(225+this.x+i,j+this.y,5,5);}}colorMode(HSB);strokeWeight(1);for(var i=0;i<150;i++){stroke(this.h,this.s,this.b,map(i,0,150,0,255));line(225+this.x,i+this.y,250+this.x,i+this.y);}colorMode(RGB);noFill();stroke(0,0,0,100);strokeWeight(1);rect(225+this.x,this.y,25,149);colorMode(HSB);fill(this.h,255,255);colorMode(RGB);stroke(0,0,0);var mapValue=map(this.h,0,255,0,150);triangle(170+this.x,mapValue+this.y,165+this.x,mapValue+this.y-5,165+this.x,mapValue+this.y+5);triangle(205+this.x,mapValue+this.y,210+this.x,mapValue+this.y-5,210+this.x,mapValue+this.y+5);colorMode(HSB);fill(this.h,this.s,this.b,this.a);colorMode(RGB);stroke(0,0,0);var mapValue=map(this.a,0,255,0,150);triangle(220+this.x,mapValue+this.y,215+this.x,mapValue+this.y-5,215+this.x,mapValue+this.y+5);triangle(255+this.x,mapValue+this.y,260+this.x,mapValue+this.y-5,260+this.x,mapValue+this.y+5);colorMode(RGB);fill(255,255,255,150);ellipse(map(this.s,0,255,0,150)+this.x,map(255-this.b,0,255,0,150)+this.y,10,10);CURSOR=ARROW;if((mouseX>175+this.x&&mouseX<200+this.x&&mouseY>this.y&&mouseY<150+this.y)\|\|this.hueFocus){CURSOR="row-resize";if(mouseIsPressed){this.h=constrain(map(mouseY,this.y,150+this.y,0,255),0,255);this.hueFocus=true;this.alphaFocus=false;this.saturationAndBrightnessFocus=false;}else{this.hueFocus=false;}}if((mouseX>225+this.x&&mouseX<250+this.x&&mouseY>this.y&&mouseY<150+this.y)\|\|this.alphaFocus){CURSOR="row-resize";if(mouseIsPressed){this.a=constrain(map(mouseY,this.y,150+this.y,0,255),0,255);this.alphaFocus=true;this.hueFocus=false;this.saturationAndBrightnessFocus=false;}else{this.alphaFocus=false;}}if((mouseX>this.x&&mouseX<150+this.x&&mouseY>this.y&&mouseY<150+this.y)\|\|this.saturationAndBrightnessFocus){CURSOR=CROSS;if(mouseIsPressed){this.s=constrain(map(mouseX,this.x,150+this.x,0,255),0,255);this.b=constrain(255-map(mouseY,this.y,150+this.y,0,255),0,255);this.saturationAndBrightnessFocus=true;this.hueFocus=false;this.alphaFocus=false;}else{this.saturationAndBrightnessFocus=false;}}colorMode(HSB);this.color=color(this.h,this.s,this.b,this.a);updateCursor();colorMode(RGB);}; var CheckBox=function(x,y){this.x=x;this.y=y;this.selected=false;this.released=true;};CheckBox.prototype.draw=function(){var colors=[246,255,255,255,251,248,245,236,236,236,236,237,239,234];var selectedColors=[color(218,239,250),color(213,236,255),color(201,228,251),color(193,223,250),color(183,219,250),color(175,215,250),color(166,211,249),color(134,196,249),color(140,201,251),color(153,209,253),color(166,218,254),color(180,227,255),color(194,238,255),color(199,236,246)];strokeWeight(1);if(this.selected){for(var i=0;i<14;i++){stroke(selectedColors[i]);line(this.x+1,this.y+i+1,this.x+14,this.y+i+1);}}else{for(var i=0;i<14;i++){stroke(colors[i]);line(this.x+1,this.y+i+1,this.x+14,this.y+i+1);}}if(this.selected){fill(56,56,56);textAlign(CENTER,CENTER);textSize(12);text('✔',this.x+7.5,this.y+7.5);textAlign(LEFT,BASELINE);}stroke(130,130,130);strokeWeight(1);rectMode(CORNER);noFill();rect(this.x,this.y,15,15,4);if(mouseIsPressed&&this.released&&mouseX>this.x&&mouseX<this.x+15&&mouseY>this.y&&mouseY<this.y+15){this.selected=!this.selected;this.released=false;}if(!mouseIsPressed){this.released=true;}}; var RadioButton=function(x,y){this.x=x;this.y=y;this.selected=false;this.group=[];};RadioButton.prototype.setSelected=function(selected){this.selected=selected;};RadioButton.prototype.draw=function(){var colors=[246,255,255,255,251,248,245,236,236,236,236,237,239,234];var selectedColors=[color(218,239,250),color(213,236,255),color(201,228,251),color(193,223,250),color(183,219,250),color(175,215,250),color(166,211,249),color(134,196,249),color(140,201,251),color(153,209,253),color(166,218,254),color(180,227,255),color(194,238,255),color(199,236,246)];strokeWeight(1);if(this.selected){for(var i=0;i<14;i++){for(var j=0;j<14;j++){stroke(selectedColors[i]);if(dist(this.x+j,this.y+i,this.x+7,this.y+7)<=7){point(this.x+j,this.y+i);}}}}else{for(var i=0;i<14;i++){for(var j=0;j<14;j++){stroke(colors[i]);if(dist(this.x+j,this.y+i,this.x+7,this.y+7)<=7){point(this.x+j,this.y+i);}}}}if(this.selected){stroke(56,56,56);strokeWeight(5);point(this.x+7,this.y+7);}stroke(130,130,130);strokeWeight(1);ellipseMode(CORNER);noFill();ellipse(this.x,this.y,14,14);ellipseMode(CENTER);if(mouseIsPressed&&dist(mouseX,mouseY,this.x+7,this.y+7)<=7){this.selected=true;for(var i=0;i<this.group.length;i++){if(this.group[i]!==this){this.group[i].selected=false;}}}};var RadioButtonGroup=function(group){this.group=group;for(var i=0;i<group.length;i++){group[i].group=this.group;}}; var ComboBox=function(options){textFont(createFont("sans-serif",12));this.x=0;this.y=0;if(options===undefined){options=[];}this.options=options;this.selectedIndex=0;this.selectedItem=this.options[this.selectedIndex];var largestWidth=0;for(var i=0;i<options.length;i++){largestWidth=max(largestWidth,textWidth(options[i]));}this.w=largestWidth+40;this.expanded=false;this.released=true;this.keyReleased=true;};ComboBox.prototype.setLocation=function(x,y){this.x=x;this.y=y;};ComboBox.prototype.setSelectedIndex=function(selectedIndex){this.selectedIndex=selectedIndex;};ComboBox.prototype.dropDownMenu=function(y){var selectedColors=[color(92,130,238),color(102,140,248),color(97,136,248),color(93,134,248),color(88,131,247),color(84,128,247),color(80,126,247),color(77,123,247),color(73,122,247),color(72,120,247),color(70,119,247),color(65,116,247),color(61,114,247),color(56,111,246),color(53,109,247),color(48,106,246),color(44,104,246),color(42,103,246),color(39,101,246),color(19,86,235)];rectMode(CORNER);stroke(179,179,179);strokeWeight(1);fill(255,255,255,240);rect(this.x,y,this.w,10+this.options.length20,3);fill(0,0,0);textAlign(LEFT,BASELINE);for(var i=0;i<this.options.length;i++){if(i===this.selectedIndex){for(var j=0;j<20;j++){stroke(selectedColors[j]);line(this.x,y+5+j+i20,this.x+this.w,y+5+j+i20);}fill(255,255,255);text('✓',this.x+10,y+20+i20);}else{fill(0,0,0);}text(this.options[i],this.x+25,y+20+i20);}if(this.expanded){for(var i=0;i<this.options.length;i++){if(mouseIsPressed&&mouseX>this.x&&mouseX<this.x+this.w&&mouseY>y+5+i20&&mouseY<y+25+i20){this.selectedIndex=i;this.released=false;}}}if(keyIsPressed&&this.expanded&&this.keyReleased){if(keyCode===UP){this.selectedIndex--;this.keyReleased=false;}if(keyCode===DOWN){this.selectedIndex++;this.keyReleased=false;}this.selectedIndex=constrain(this.selectedIndex,0,this.options.length-1);}if(!keyIsPressed){this.keyReleased=true;}};ComboBox.prototype.draw=function(){var colors=[255,255,255,255,255,252,250,247,245,243,236,236,236,236,237,237,237,239,242];for(var i=0;i<19;i++){stroke(colors[i]);line(this.x+1,this.y+i+1,this.x+this.w-1,this.y+i+1);}stroke(130,130,130);strokeWeight(1);rectMode(CORNER);noFill();rect(this.x,this.y,this.w,20,2);textAlign(LEFT,CENTER);textSize(12);fill(0,0,0);text(this.options[this.selectedIndex],this.x+10,this.y+10);noStroke();fill(103,103,103);triangle(this.x+this.w-6,this.y+9,this.x+this.w-11,this.y+9,this.x+this.w-8.5,this.y+5);triangle(this.x+this.w-6,this.y+12,this.x+this.w-11,this.y+12,this.x+this.w-8.5,this.y+16);if(this.expanded){var opacity=0;noFill();rectMode(CENTER);for(var i=8;i<20;i++){stroke(95,147,196,opacity);rect(this.x+this.w/2,this.y+10,this.w+i-14,6+i,3);if(i<14){opacity+=20;}else{opacity-=20;}}}rectMode(CORNER);if(this.expanded){if(this.y+35+20this.options.length<height){this.dropDownMenu(this.y+25);}else{this.dropDownMenu(height-10-20this.options.length);}}if(mouseIsPressed){if(mouseX>this.x&&mouseX<this.x+this.w&&mouseY>this.y&&mouseY<this.y+20&&!this.expanded&&this.released){this.expanded=true;this.released=false;}if(this.expanded&&this.released){this.expanded=false;this.released=false;}}else{this.released=true;}this.selectedItem=this.options[this.selectedIndex];textAlign(LEFT,BASELINE);}; /* End of Mumbo Jumbo / / Start Code / if(this.programWasCreatedBy!=="netbenzhang"){throw{message:"This program was created by netbenzhang."};} // Variables var showSettingsMenu = true; var paint = []; var enterMenuTextOpacity = 255; var pressHereTextRotateDirection = 1; // Buttons var exitButton = new Button("Start Drawing!"); exitButton.setLocation(5, 135); exitButton.setSize(104, 40); var saveDrawingButton = new Button("Click to save\nyour drawing"); saveDrawingButton.setLocation(75, 290); saveDrawingButton.setSize(0, 35); var loadDrawingButton = new Button("Click to load\nyour drawing"); loadDrawingButton.setLocation(75, 290); loadDrawingButton.setSize(0, 35); // Sliders var sizeSlider = new Slider(); sizeSlider.setLocation(25, 375); sizeSlider.setLength(350); sizeSlider.setBounds(1, 100); sizeSlider.setStartValue(20); var blurSlider = new Slider(); blurSlider.setLocation(308, 314); blurSlider.setLength(80); blurSlider.setBounds(1, 5); blurSlider.setStartValue(3); // Color pickers var colorPicker = new ColorPicker(130, 15); // Check boxes var gradientCheckBox = new CheckBox(182, 270); var blurCheckBox = new CheckBox(182, 290); var invertCheckBox = new CheckBox(182, 310); // Radio buttons var rgbRadioButton = new RadioButton(60, 13); rgbRadioButton.setSelected(true); var hsbRadioButton = new RadioButton(60, 33); var colorModeGroup = new RadioButtonGroup([rgbRadioButton, hsbRadioButton]); var saveDrawingRadioButton = new RadioButton(10, 290); saveDrawingRadioButton.setSelected(true); var loadDrawingRadioButton = new RadioButton(10, 310); var localStorageRadioButtonGroup = new RadioButtonGroup([saveDrawingRadioButton, loadDrawingRadioButton]); // Combo boxes var strokeCapComboBox = new ComboBox(["SQUARE", "PROJECT", "ROUND"]); strokeCapComboBox.setLocation(299, 185); strokeCapComboBox.setSelectedIndex(2); var presetsComboBox = new ComboBox(["None", "Highlighter", "Pen", "Magic Marker", "Rainbow"]); presetsComboBox.setLocation(90, 185); // Background var bg = { color1 : color(round(random(100, 255)), round(random(100, 255)), round(random(100, 255))), color2 : color(round(random(100, 255)), round(random(100, 255)), round(random(100, 255))), randomColor1 : color(round(random(100, 255)), round(random(100, 255)), round(random(100, 255))), randomColor2 : color(round(random(100, 255)), round(random(100, 255)), round(random(100, 255))) }; var resetFunctions = function() { // Reset mouse functions mouseClicked = function() {}; mousePressed = function() {}; mouseReleased = function() {}; mouseMoved = function() {}; mouseDragged = function() {}; mouseOver = function() {}; mouseOut = function() {}; // Reset key functions keyPressed = function() {}; keyReleased = function() {}; keyTyped = function() {}; }; var storage = (function(){ return this.localStorage; })(); var saveDrawing = function() { for (var m in storage) { storage.removeItem(m); } for (var i = 0; i < paint.length; i++) { storage.setItem("Paint Coordinates " + i, paint[i].coordinates); storage.setItem("Paint Color " + i, paint[i].color); storage.setItem("Stroke Weight " + i, paint[i].strokeWeight); storage.setItem("Stroke Cap " + i, paint[i].cap); } }; var loadDrawing = function() { paint = []; var i = 0; var a = 0; for (var m in storage) { // Unpack coordinate values var array = []; for (var j = 0; j < storage.getItem("Paint Coordinates " + i).split(',').length; j++) { array.push(parseInt(storage.getItem("Paint Coordinates " + i).split(',')[j], 10)); } a++; // Unpack color values var colorArray = []; for (var j = 0; j < storage.getItem("Paint Color " + i).split(',').length; j++) { colorArray.push(parseInt(storage.getItem("Paint Color " + i).split(',')[j], 10)); } // Modulus 4 because there are currently 4 properties of paint if (a % 4 === 0) { paint.push({ coordinates: array, color: colorArray, strokeWeight: storage.getItem("Stroke Weight " + i), cap: storage.getItem("Stroke Cap " + i) }); i++; } } }; var gradient = function() { for (var i = 0; i < 400; i += 1) { stroke(lerpColor(bg.color1, bg.color2, i / 400)); line(0, i, 400, i); } bg.color1 = lerpColor(bg.color1, bg.randomColor1, 0.1); bg.color2 = lerpColor(bg.color2, bg.randomColor2, 0.1); if (frameCount % 40 === 0) { bg.randomColor1 = color(round(random(100, 255)), round(random(100, 255)), round(random(100, 255))); bg.randomColor2 = color(round(random(100, 255)), round(random(100, 255)), round(random(100, 255))); } }; var drawPaint = function() { if (gradientCheckBox.selected) { gradient(); } if (paint.length > 0) { for (var i = 0; i < paint.length; i++) { strokeWeight(paint[i].strokeWeight); switch (paint[i].cap) { case "SQUARE": strokeCap(SQUARE); break; case "PROJECT": strokeCap(PROJECT); break; case "ROUND": strokeCap(ROUND); break; } for (var j = 2; j < paint[i].coordinates.length; j += 2) { stroke(paint[i].color[(j - 2) / 2]); line(paint[i].coordinates[j-2], paint[i].coordinates[j-1], paint[i].coordinates[j-0], paint[i].coordinates[j+1]); } } } if (blurCheckBox.selected) { filter(BLUR, blurSlider.value); } if (invertCheckBox.selected) { filter(INVERT); } }; var StrokeColor = function() { // Draw color picker and rectangle that changes fill rectMode(CORNER); noFill(); stroke(89, 89, 89); strokeWeight(1); rect(120, 5, 275, 170, 2); colorPicker.draw(); stroke(89, 89, 89); rectMode(CORNER); fill(colorPicker.color); rect(10, 10, 40, 40, 5); // Draw text that gives info on color rectMode(CORNER); noFill(); stroke(89, 89, 89); rect(5, 60, 105, 65, 2); fill(89, 89, 89); textAlign(LEFT, BASELINE); textSize(12); if (rgbRadioButton.selected) { text("Red: " + red(colorPicker.color), 10, 75); text("Green: " + green(colorPicker.color), 10, 90); text("Blue: " + blue(colorPicker.color), 10, 105); } else { text("Hue: " + round(hue(colorPicker.color)), 10, 75); text("Saturation: " + round(saturation(colorPicker.color)), 10, 90); text("Brightness: " + round(brightness(colorPicker.color)), 10, 105); } text("Alpha: " + alpha(colorPicker.color), 10, 120); // Draw color mode radio buttons and label them rgbRadioButton.draw(); hsbRadioButton.draw(); fill(0, 0, 0); textAlign(LEFT, BASELINE); textSize(14); text("RGB", 80, 25.5); text("HSB", 80, 45.5); }; var ExitMenu = function() { // Draw exit button exitButton.draw(); mouseReleased = function() { if (exitButton.pressed) { showSettingsMenu = false; enterMenuTextOpacity = 255; } }; // Arrow pointing to button strokeWeight(2); stroke(59, 59, 59); noFill(); bezier(75, 182, 79, 214, 36, 186, 34, 212); line(69, 188, 75, 182); line(81, 188, 75, 182); // Text "Press here!" textAlign(CENTER, CENTER); textSize(15); fill(59, 59, 59); translate(43, 223); if (frameCount % 20 === 0) { pressHereTextRotateDirection = -pressHereTextRotateDirection; } rotate(pressHereTextRotateDirection (frameCount % 20 - 10)); text("Press here!", 0, 0); resetMatrix(); }; var Presets = function() { // Draw presets combo box and label it strokeWeight(2); stroke(59, 59, 59); noFill(); bezier(120, 212, 117, 232, 140, 226, 149, 225); line(120, 212, 114, 218); line(120, 212, 126, 218); textAlign(CENTER, BASELINE); textSize(15); fill(59, 59, 59); text("Presets", 180, 230); textAlign(CENTER, BASELINE); textSize(13); fill(148, 148, 148); text("NEW!", 180, 243); presetsComboBox.draw(); // What to do for every preset if (presetsComboBox.expanded) { switch (presetsComboBox.selectedItem) { case "Highlighter": colorPicker.h = 42.5; colorPicker.s = 255; colorPicker.b = 255; colorPicker.a = 30; sizeSlider.value = 20; strokeCapComboBox.setSelectedIndex(1); break; case "Pen": colorPicker.h = 175; colorPicker.s = 230; colorPicker.b = 200; colorPicker.a = 220; sizeSlider.value = 2; strokeCapComboBox.setSelectedIndex(2); break; case "Magic Marker": colorPicker.a = 80; sizeSlider.value = 100; strokeCapComboBox.setSelectedIndex(0); break; } } }; var StrokeCap = function() { // Draw stroke cap combo box and label it strokeCapComboBox.draw(); fill(0, 0, 0); textAlign(RIGHT, TOP); textSize(15); text("Stroke cap: ", 293, 185); }; var LocalStorage = function() { // Draw local storage buttons and radio buttons and label them saveDrawingRadioButton.draw(); loadDrawingRadioButton.draw(); if (saveDrawingRadioButton.selected && !presetsComboBox.expanded) { saveDrawingButton.draw(); } if (loadDrawingRadioButton.selected && !presetsComboBox.expanded) { loadDrawingButton.draw(); } textAlign(LEFT, BASELINE); textSize(14); fill(0, 0, 0); text("Save", 30, 303); text("Load", 30, 323); if (saveDrawingButton.pressed) { saveDrawing(); } if (loadDrawingButton.pressed) { loadDrawing(); } }; var GradientBackground = function() { // Draw gradient check box and label it if (!presetsComboBox.expanded) { gradientCheckBox.draw(); } textAlign(LEFT, BASELINE); textSize(14); fill(0, 0, 0); text("Gradient background", 208, 283); }; var Filter = function() { // Draw filter check boxes and label them if (!presetsComboBox.expanded) { blurCheckBox.draw(); invertCheckBox.draw(); } textAlign(LEFT, BASELINE); textSize(14); fill(0, 0, 0); text("Blur drawing", 208, 303); text("Invert drawing", 208, 323); // Draw blur slider and label it if (blurCheckBox.selected) { blurSlider.draw(); textAlign(LEFT, BASELINE); textSize(12); fill(59, 59, 59); text("Blur amount: " + round(blurSlider.value), 309, 303); } }; var StrokeWeight = function() { // Draw stroke weight slider and label it rectMode(CORNER); noFill(); stroke(89, 89, 89); strokeWeight(1); rect(5, 340, 390, 55, 2); sizeSlider.draw(); fill(0, 0, 0); textSize(15); textAlign(CENTER, BASELINE); text("Stroke Weight: " + round(sizeSlider.value), 200, 360); }; var drawSettingsMenu = function() { // Background drawPaint(); rectMode(CORNER); noStroke(); fill(255, 255, 255, 150); rect(0, 0, width, height); // Reset stroke cap strokeCap(ROUND); // Draw message textAlign(LEFT, CENTER); textSize(14); fill(53, 113, 204); text("More settings coming soon!", 215, 235); StrokeColor(); ExitMenu(); LocalStorage(); GradientBackground(); Filter(); StrokeWeight(); Presets(); StrokeCap(); }; var drawOnCanvas = function() { drawPaint(); fill(0, 0, 0, enterMenuTextOpacity); textAlign(CENTER, CENTER); textSize(20); text("Press any key to go back to the menu.", 200, 200); enterMenuTextOpacity -= 3; switch (presetsComboBox.selectedItem) { case "Magic Marker": colorPicker.color = color(random(0, 255), random(0, 255), random(0, 255), colorPicker.a); break; case "Rainbow": colorMode(HSB); colorPicker.color = color(frameCount * 2 % 255, 255, 255, 255); colorMode(RGB); break; } // Mouse functions mousePressed = function() { paint.push({ coordinates: [mouseX, mouseY], color: [colorPicker.color], strokeWeight: sizeSlider.value, cap: strokeCapComboBox.selectedItem }); }; mouseDragged = function() { paint[paint.length - 1].coordinates.push(mouseX, mouseY); paint[paint.length - 1].color.push(colorPicker.color); }; if (keyIsPressed) { showSettingsMenu = true; } }; var draw = function() { background(255, 255, 255); resetFunctions(); if (showSettingsMenu) { drawSettingsMenu(); } else { drawOnCanvas(); } }; if(this.programWasCreatedBy!=="netbenzhang"){throw{message:"This program was created by netbenzhang."};}
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMC-lNumCgw
Votes	227
Spin-Offs	6
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	netbenzhang
Author Name	netbenzhang
Author ID	kaid_777750049689057107593844
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739449127899
Updated	10 months ago, 1739449127899
Source Deleted	unknown