Viewing Program

Program Data

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

Title	Kawaii Cat w Boba Tea
ID	4861405567991808
Created	4 years ago, 1600111666018
Updated	4 years ago, 1600193789547
Code	/************************************************************* * Omg, first time getting first on the HL thank you so much * everyone :D Now if only that 1K badge still existed, also * wow we've passed my highest voted program in 1 day :o ************************************************************** * After 3 months.. I have finally finished this project.. * Pretty much 3/4 of that time was procrastinating * * I first began on this project so that I cold improve on * my terrible bezeirVertex skills, while this did help.. * I think I should have chosen something easier, because * now i want to avoid bezierVertex at all costs lol * * * @CREDITS * Credit to Green Ghost, Loyalty (now known as Cavan), and * Daniel T for helping me out when I asked for tips on * usig bezierVertex, it helped a lot, thanks guys! * * I also want to say thanks to all of the people who motivated * me to finish this project, this project could have easily * gone on for an extra month. * I especially want to thank my art teacher who was always * so optimistic and always told me not to beat myself up. * * * @CUSTOMIZATION * Want to change a few colors up and make a color scheme? * Scroll down to line 40 and change up the colors in there, * you can also comment your color scheme in the comments if * you want and I'll see if it's worthy of being added * * * @REFERENCE * https://www.pinterest.com/pin/650910952378536897/ ***********************************************************/ var colorScheme = 1; var colors = [ { //This wasn't meant to be complicated :c backgroundColor : color(160, 239, 218), bottomShadow : color(134, 200, 188, 150), glow : color(255, 255, 255, 7), mainStroke : color(15, 43, 51), cat : { color : color(255, 255, 255), shading : color(154, 246, 223, 160), blush : color(238, 225, 228), ear : color(254, 184, 200), earShading : color(171, 145, 156), paw : color(249, 194, 194), nose : color(130, 144, 152) }, cup : { color : color(224, 251, 249), cap : { light : color(248, 252, 255), dark : color(81, 126, 130) }, tea : { color : color(211, 181, 157), shading : color(220, 206, 180), mainStroke : color(128, 115, 103), boba : { light : color(114, 97, 79), dark : color(1, 48, 70) }, }, straw : { color : color(211, 247, 240), shading : color(145, 165, 171) } } }, //original color scheme ]; colorScheme = constrain(colorScheme, 1, colors.length); colors = colors[colorScheme - 1]; //positions of the bobas var boba = [ {x : 326, y : 395, col : 'light'}, {x : 305, y : 415, col : 'light'}, {x : 280, y : 400, col : 'light'}, {x : 260, y : 420, col : 'light'}, {x : 255, y : 405, col : 'dark'}, {x : 280, y : 425, col : 'dark'}, {x : 295, y : 396, col : 'dark'}, {x : 325, y : 420, col : 'dark'}, {x : 319, y : 387, col : 'dark'} ]; smooth(); / Extremely messy code ahead; proceed with caution */ //{ var g = createGraphics(300, height, JAVA2D); g.background(0, 0); g.stroke(colors.mainStroke); g.strokeWeight(5); g.fill(colors.cat.color); g.beginShape(); g.vertex(300, 100); //Top left head part g.bezierVertex(146, 108, 138, 209, 136, 221); g.bezierVertex(136, 226, 130, 269, 127, 280); //Fur left g.bezierVertex(127, 288, 114, 300, 105, 300); g.bezierVertex(115, 330, 135, 335, 145, 342); g.bezierVertex(139, 345, 135, 348, 120, 347); //Chin //465 g.bezierVertex(135, 435, 465, 435, 480, 347); g.endShape(); //Eye g.stroke(colors.mainStroke); g.strokeWeight(14); g.noFill(); var half = g.get(); var g = createGraphics(300, height, JAVA2D); g.background(0, 0); g.stroke(colors.mainStroke); g.strokeWeight(5); g.fill(0, 0); g.beginShape(); g.vertex(300, 100); //Top left head part g.bezierVertex(146, 108, 138, 209, 136, 221); g.bezierVertex(136, 226, 130, 269, 127, 280); //Fur left g.bezierVertex(127, 288, 114, 300, 105, 300); g.bezierVertex(115, 330, 135, 335, 145, 342); g.bezierVertex(139, 345, 135, 348, 120, 347); //Chin //465 g.bezierVertex(135, 435, 465, 435, 480, 347); g.endShape(); //Eye g.stroke(colors.mainStroke); g.strokeWeight(12); g.noFill(); g.arc(215, 280, 90, 43, radians(-130), radians(-20)); //blush g.stroke(colors.cat.blush); g.strokeWeight(7); g.pushMatrix(); g.translate(-10, -5); g.line(200, 300, 190, 315); g.line(220, 300, 210, 315); g.popMatrix(); var halfOutline = g.get(); var g = createGraphics(width, height, JAVA2D); g.background(0, 0); g.stroke(colors.mainStroke); g.strokeWeight(5); g.fill(colors.cat.color); g.beginShape(); g.vertex(225, 115); g.bezierVertex(185, 80, 125, 60, 125, 60); g.bezierVertex(92, 166, 140, 230, 140, 230); g.endShape(); g.noFill(); g.bezier(125, 60, 147, 78, 157, 80, 212, 150); var basicEar = g.get(); var g = createGraphics(width, height, JAVA2D); g.background(0, 0); g.stroke(colors.mainStroke); g.strokeWeight(5); g.noFill(); g.beginShape(); g.vertex(225, 115); g.bezierVertex(185, 80, 125, 60, 125, 60); g.bezierVertex(92, 166, 140, 230, 140, 230); g.endShape(); g.noFill(); g.bezier(125, 60, 147, 78, 157, 80, 212, 150); var earOutline = g.get(); background(0, 0); //left ear pushMatrix(); translate(170, 120); image(basicEar, -170, -120); popMatrix(); //shading for top left part of ear noStroke(); fill(colors.cat.shading); beginShape(); vertex(125, 60); bezierVertex(149, 75, 205, 108, 205, 125); vertex(216, 115); bezierVertex(178, 80, 125, 60, 125, 60); endShape(); //inside of the left ear fill(colors.cat.ear); beginShape(); vertex(130, 65); bezierVertex(103, 150, 140, 220, 140, 220); bezierVertex(195, 125, 195, 125, 195, 125); endShape(); //outline to hide stuff image(earOutline, 0, 0); //right ear pushMatrix(); translate(430, 120); scale(-1, 1); image(basicEar, -170, -120); popMatrix(); //inside of the right ear fill(colors.cat.ear); beginShape(); vertex(475, 60); bezierVertex(500, 180, 470, 220, 470, 220); vertex(405, 125); bezierVertex(475, 60, 475, 60, 475, 60); endShape(); //inside right ear dark part fill(colors.cat.earShading); beginShape(); vertex(475, 60); bezierVertex(490, 180, 455, 205, 455, 205); vertex(405, 125); bezierVertex(475, 60, 475, 60, 475, 60); endShape(); //right ear outline pushMatrix(); translate(430, 120); scale(-1, 1); image(earOutline, -170, -120); popMatrix(); image(half, 0, 0); pushMatrix(); translate(600, 0); scale(-1, 1); image(half, 0, 0); popMatrix(); //shading for right side of face noStroke(); fill(colors.cat.shading); beginShape(); vertex(400, 125); bezierVertex(453, 162, 448, 310, 445, 310); bezierVertex(445, 325, 430, 342, 425, 342); bezierVertex(425, 348, 440, 350, 440, 350); bezierVertex(410, 410, 329, 410, 350, 410); bezierVertex(407, 415, 463, 371, 473, 352); bezierVertex(450, 350, 445, 344, 445, 342); bezierVertex(487, 315, 487, 300, 487, 300); bezierVertex(470, 305, 464, 264, 464, 250); bezierVertex(453, 170, 465, 179, 400, 125); endShape(); image(halfOutline, 0, 0); pushMatrix(); translate(600, 0); scale(-1, 1); image(halfOutline, 0, 0); popMatrix(); //Fur on top //filling strokeWeight(4.5); stroke(colors.cat.color); fill(colors.cat.color); beginShape(); vertex(285, 101); bezierVertex(310, 85, 310, 60, 310, 65); bezierVertex(322, 90, 318, 95, 319, 95); bezierVertex(333, 85, 340, 70, 339, 75); bezierVertex(348, 80, 345, 105, 343, 105); vertex(287, 103); endShape(); //shading of left tuft (I think that's what you call it) strokeWeight(4); stroke(colors.cat.shading); fill(colors.cat.shading); triangle(310, 103, 320, 92, 315, 85); //shading for the right tuft triangle(335, 106, 342, 105, 342, 92); //outline of fur on top noFill(); stroke(colors.mainStroke); strokeWeight(5); beginShape(); vertex(285, 101); bezierVertex(310, 85, 310, 60, 310, 65); bezierVertex(322, 90, 318, 95, 319, 95); bezierVertex(333, 85, 340, 70, 339, 75); bezierVertex(348, 80, 345, 105, 343, 105); endShape(); //nose (wip) strokeWeight(6); fill(colors.cat.nose); stroke(colors.mainStroke); strokeJoin(ROUND); triangle(300, 295, 295, 290, 305, 290); var head = get(); //} Head //{ background(0, 0); //Main cup part strokeWeight(5); stroke(colors.mainStroke); fill(colors.cup.color); beginShape(); vertex(190, 240); vertex(205, 252); vertex(225, 450); bezierVertex(255, 465, 325, 465, 355, 450); vertex(375, 252); vertex(390, 240); endShape(); //Cap noStroke(); fill(colors.cup.cap.light); ellipse((355 + 225) / 2, 238, 200, 30); fill(colors.cup.cap.dark); arc((355 + 225) / 2, 238, 200, 30, -89, 90); noStroke(); fill(colors.cup.cap.dark); pushMatrix(); translate(294, 239); rotate(1); arc(0, 0, 155, 22, 90, 270); popMatrix(); //Boba tea ^^ strokeWeight(5); stroke(colors.cup.tea.mainStroke); fill(colors.cup.tea.shading); //Shading pushMatrix(); translate(0, 15); beginShape(); vertex(222, 300); vertex(238, 420); bezierVertex(258, 440, 322, 440, 342, 420); vertex(358, 300); endShape(); //Main fill(colors.cup.tea.color); noStroke(); beginShape(); vertex(231, 300); vertex(244, 415); bezierVertex(254, 433, 326, 433, 336, 415); vertex(349, 300); endShape(); popMatrix(); //Top shading fill(colors.cup.tea.shading); stroke(colors.cup.tea.mainStroke); ellipse(290, 312, 137, 20); //top main fill(colors.cup.tea.color); noStroke(); ellipse(290, 312, 105, 9); //top white foamy thing ig fill(247, 254, 246); ellipse(290, 311, 50, 8); //Straw (bottom part) noStroke(); fill(colors.cup.straw.color); rect(290, 308 + 3, -15, -58); fill(colors.cup.straw.shading); rect(290, 308 + 3, 15, -58); fill(colors.cup.straw.color, 150); rect(280 + 15 2 - 9, 308 + 3, 2, -58); strokeCap(SQUARE); stroke(colors.mainStroke); line(280 + 15 * 2 - 4, 310, 280 + 15 * 2 - 4, 255); stroke(colors.mainStroke); strokeWeight(5); line(276, 255, 276, 310); strokeCap(ROUND); //Boba for(var i = 0; i < boba.length; i ++) { fill(boba[i].col === 'dark' ? colors.cup.tea.boba.dark : colors.cup.tea.boba.light); noStroke(); ellipse(boba[i].x, boba[i].y, 25, 25); } strokeWeight(5); stroke(colors.mainStroke); noFill(); ellipse((355 + 225) / 2, 238, 200, 30); //Straw (top part) noStroke(); pushMatrix(); translate(-4, 0); fill(colors.cup.straw.color); rect(295, 235, -15, -40); fill(colors.cup.straw.shading); rect(295, 235, 15, -40); stroke(colors.mainStroke); line(280, 235 - 40, 280, 235); line(275, 235, 285 + 15 * 2, 235); line(280 + 15 * 2, 235, 280 + 15 * 2, 235 - 40); noStroke(); fill(colors.cup.straw.color, 150); rect(280 + 15 * 2 - 5, 232, 2, -38); popMatrix(); //Shine fill(249, 255, 251); pushMatrix(); translate(240, 420); scale(0.65); pushMatrix(); translate(-322, -300); beginShape(); vertex(322, 300); bezierVertex(320, 280, 347, 281, 350, 300); bezierVertex(349, 314, 329, 316, 322, 300); endShape(CLOSE); popMatrix(); popMatrix(); pushMatrix(); translate(244, 325); rotate(-3); scale(0.7, 0.65); pushMatrix(); translate(-300, -300); beginShape(); vertex(300, 200); bezierVertex(320, 190, 315, 400, 300, 400); bezierVertex(280, 410, 270, 200, 300, 200); endShape(); popMatrix(); popMatrix(); var cup = get(); //} Cup background(colors.backgroundColor); //white glow for(var i = 0; i < 600; i += 10) { noStroke(); fill(colors.glow); ellipse(300, 300, i, i); } //Shadow noStroke(); fill(colors.bottomShadow); ellipse(300, 520, 370, 80); //{ strokeWeight(4.2); stroke(colors.mainStroke); fill(colors.cat.main); beginShape(); vertex(400, 450); bezierVertex(450, 460, 535, 350, 500, 300); bezierVertex(467, 260, 500, 250, 510, 260); bezierVertex(610, 350, 450, 505, 400, 500); endShape(); //tail shading //tip part noStroke(); fill(colors.cat.shading); beginShape(); vertex(500, 428); bezierVertex(585, 310, 500, 255, 500, 257); bezierVertex(480, 255, 575, 305, 500, 425); endShape(); //part next to bottom right paw pushMatrix(); translate(-1, 1); beginShape(); vertex(425, 491); vertex(438, 485); vertex(450, 460); bezierVertex(455, 440, 445, 430, 445, 430); vertex(440, 440); endShape(CLOSE); popMatrix(); //tail outline to hide some shading that goes over the outline stroke(colors.mainStroke); noFill(); beginShape(); vertex(400, 450); bezierVertex(450, 460, 535, 350, 500, 300); bezierVertex(467, 260, 500, 250, 510, 260); bezierVertex(610, 350, 450, 505, 400, 500); endShape(); //} tail //body stroke(colors.mainStroke); fill(colors.cat.color); beginShape(); vertex(218, 325); bezierVertex(208, 375, 198, 500, 198, 500); bezierVertex(300, 520, 402, 500, 402, 500); bezierVertex(392, 375, 382, 325, 382, 325); endShape(CLOSE); //head pushMatrix(); translate(300, 250); scale(0.8, 0.77); image(head, -300, -300); popMatrix(); //shading between the left top paw and the bottom left paw noStroke(); fill(colors.cat.shading); pushMatrix(); translate(-3, 0); quad(220, 405, 225, 405, 228, 435, 222, 435); popMatrix(); //shading between the top right and the bottom right paw quad(379, 400, 395, 400, 392, 422, 385, 425); //outline to hide the shading going over body outline stroke(colors.mainStroke); strokeWeight(4.5); line(392, 400, 395, 422); //{ var g = createGraphics(width, height, JAVA2D); g.background(0, 0); g.strokeWeight(6); g.angleMode = "degrees"; g.stroke(colors.mainStroke); g.fill(colors.cat.main); g.beginShape(); g.vertex(100, 400); g.bezierVertex(55, 400, 55, 300, 55, 300); g.bezierVertex(55, 235, 145, 235, 145, 300); g.bezierVertex(145, 400, 100, 400, 100, 400); g.endShape(); g.fill(colors.cat.paw); g.pushMatrix(); g.translate(0, 4); //left small pad g.pushMatrix(); g.translate(75, 285); g.rotate(-5); g.ellipse(0, 0, 15, 24); g.popMatrix(); //middle small pad g.pushMatrix(); g.translate(100, 275); g.ellipse(0, 0, 15, 27); g.popMatrix(); //right small pad g.pushMatrix(); g.translate(125, 285); g.rotate(5); g.ellipse(0, 0, 15, 25); g.popMatrix(); g.popMatrix(); //big pad g.pushMatrix(); g.translate(0, -20); g.beginShape(); g.vertex(100, 325); g.bezierVertex(105, 325, 120, 335, 120, 350); g.bezierVertex(120, 360, 80, 360, 80, 350); g.bezierVertex(80, 335, 95, 325, 100, 325); g.endShape(); g.popMatrix(); //"spaces" between the small pads g.fill(colors.mainStroke); //left g.pushMatrix(); g.translate(2, 0); g.strokeWeight(2); g.strokeJoin(ROUND); g.triangle(82, 258, 82, 270, 78, 260); g.popMatrix(); //right g.pushMatrix(); g.translate(-2, 0); g.strokeJoin(ROUND); g.strokeWeight(2); g.triangle(118, 258, 118, 270, 122, 260); g.popMatrix(); var backPaw = g.get(); //back paw outline var g = createGraphics(width, height, JAVA2D); g.background(0, 0); g.strokeWeight(6); g.angleMode = "degrees"; g.stroke(colors.mainStroke); g.noFill(); g.beginShape(); g.vertex(100, 400); g.bezierVertex(55, 400, 55, 300, 55, 300); g.bezierVertex(55, 235, 145, 235, 145, 300); g.bezierVertex(145, 400, 100, 400, 100, 400); g.endShape(); g.fill(colors.cat.paw); g.pushMatrix(); g.translate(0, 4); //left small pad g.pushMatrix(); g.translate(75, 285); g.rotate(-5); g.ellipse(0, 0, 15, 24); g.popMatrix(); //middle small pad g.pushMatrix(); g.translate(100, 275); g.ellipse(0, 0, 15, 27); g.popMatrix(); //right small pad g.pushMatrix(); g.translate(125, 285); g.rotate(5); g.ellipse(0, 0, 15, 25); g.popMatrix(); g.popMatrix(); //big pad g.pushMatrix(); g.translate(0, -20); g.beginShape(); g.vertex(100, 325); g.bezierVertex(105, 325, 120, 335, 120, 350); g.bezierVertex(120, 360, 80, 360, 80, 350); g.bezierVertex(80, 335, 95, 325, 100, 325); g.endShape(); g.popMatrix(); //"spaces" between the small pads g.fill(colors.mainStroke); //left g.pushMatrix(); g.translate(2, 0); g.strokeWeight(2); g.strokeJoin(ROUND); g.triangle(82, 258, 82, 270, 78, 260); g.popMatrix(); //right g.pushMatrix(); g.translate(-2, 0); g.strokeJoin(ROUND); g.strokeWeight(2); g.triangle(118, 258, 118, 270, 122, 260); g.popMatrix(); var backPawOut = g.get(); //} making back paws //{ //all back these two //left paw pushMatrix(); translate(205, 475); rotate(-27); scale(0.75, 0.85); pushMatrix(); translate(-100, -325); image(backPaw, 0, 0); popMatrix(); popMatrix(); //right paw pushMatrix(); translate(395, 475); rotate(27); scale(-0.75, 0.85); pushMatrix(); translate(-100, -325); image(backPaw, 0, 0); popMatrix(); popMatrix(); //shading back paws //right noStroke(); fill(colors.cat.shading); beginShape(); vertex(400, 520); bezierVertex(430, 490, 470, 420, 400, 415); bezierVertex(462, 425, 422, 485, 400, 520); endShape(); //left beginShape(); vertex(218, 430); vertex(228, 520); bezierVertex(228, 528, 230, 525, 240, 530); vertex(230, 440); endShape(CLOSE); //back paw outlines //left pushMatrix(); translate(205, 475); rotate(-27); scale(0.75, 0.85); pushMatrix(); translate(-100, -325); image(backPawOut, 0, 0); popMatrix(); popMatrix(); //right pushMatrix(); translate(395, 475); rotate(27); scale(-0.75, 0.85); pushMatrix(); translate(-100, -325); image(backPawOut, 0, 0); popMatrix(); popMatrix(); //} using back paws and adding shading //cup pushMatrix(); translate(300, 432); image(cup, -290, -360); popMatrix(); fill(colors.cat.color); stroke(colors.mainStroke); strokeWeight(5); //{ var g = createGraphics(width, height, JAVA2D); g.background(0, 0); g.fill(colors.cat.color); g.stroke(colors.mainStroke); g.strokeWeight(4); g.pushMatrix(); g.translate(-30, -35); g.beginShape(); g.vertex(250, 375); g.bezierVertex(285, 375, 285, 445, 250, 445); g.bezierVertex(205, 440, 205, 380, 250, 375); g.endShape(); g.popMatrix(); g.strokeWeight(4); g.noFill(); g.arc(235, 360, 20, 9, radians(-170), radians(-50)); g.arc(240, 385, 20, 8, radians(-170), radians(-50)); var paw = g.get(); var g = createGraphics(width, height, JAVA2D); g.background(0, 0); g.noFill(); g.stroke(colors.mainStroke); g.strokeWeight(4); g.pushMatrix(); g.translate(-30, -35); g.beginShape(); g.vertex(250, 375); g.bezierVertex(285, 375, 285, 445, 250, 445); g.bezierVertex(205, 440, 205, 380, 250, 375); g.endShape(); g.popMatrix(); g.strokeWeight(4); g.noFill(); g.arc(235, 360, 20, 9, radians(-170), radians(-50)); g.arc(240, 385, 20, 8, radians(-170), radians(-50)); var pawOutline = g.get(); //} making front paws //{ //right paw pushMatrix(); translate(375, 368); rotate(10); pushMatrix(); translate(-375, -375); pushMatrix(); translate(300, 300); scale(-1, 1); image(paw, -300, -300); //shading of right paw noStroke(); fill(colors.cat.shading); pushMatrix(); translate(-330, -335); beginShape(); vertex(260, 375); bezierVertex(223, 375, 215, 437, 250, 445); bezierVertex(205, 440, 205, 370, 250, 375); endShape(); popMatrix(); image(pawOutline, -300, -300); popMatrix(); popMatrix(); popMatrix(); //left paw pushMatrix(); translate(220, 370); rotate(-10); pushMatrix(); translate(-220, -375); image(paw, 0, 0); //left paw shading noStroke(); fill(colors.cat.shading); pushMatrix(); translate(-30, -35); beginShape(); vertex(250, 375); bezierVertex(285, 375, 285, 445, 245, 445); bezierVertex(265, 440, 285, 390, 250, 375); endShape(); popMatrix(); image(pawOutline, 0, 0); popMatrix(); popMatrix(); //} using front paws and adding shading fill(colors.cat.color); stroke(colors.mainStroke); strokeWeight(4); //mouth so that it can go over the straw beginShape(); vertex(277, 264); bezierVertex(290, 280, 300, 268, 300, 268); bezierVertex(313, 280, 323, 264, 323, 264); endShape(); //logo bc i had time to add it lol stroke(0); strokeWeight(3); pushMatrix(); translate(570, 570); scale(0.3); //Top A line(0, -55, -40, 25); line(0, -55, 12, -30); //Left X line line(-60, -60, -27, -27); line(-10, -10, 30, 30); //Botton A line(24, -7, 59, 65); //Right X line line(60, -60, -60, 60); popMatrix(); //awesome tool that helped me greatly in the making of this stroke(0); strokeWeight(1); for(var i = 0; i < 600; i += 50) { if(i === 300) { strokeWeight(4); } else { strokeWeight(1); } if(i % 100 === 0 && i !== 300) { strokeWeight(2); } //line(i, 0, i, 600); //line(0, i, 600, i); } //1000+ lines :o //what might you be doing down here.. hmmmm
Folds	39,87,98,108,116,373,376,543,550,554,563,609,647,804,806,874,891,936,938,992,1037,1050
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPX_wq3RCAw
Votes	272
Spin-Offs	11
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	ΛGΞПТ Ж
Author Name	xXMoonLightXx
Author ID	kaid_51518766668545629580011
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739370995401
Updated	4 months ago, 1744845328339
Source Deleted	unknown