Viewing Program

Program Data

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

Title	Lab Girl - Anime
ID	5574236519219200
Created	4 years ago, 1623069964103
Updated	4 years ago, 1623111619263
Code	/* Lab Girl (Graphic) Gray Wolf, June 2021 I changed the color of the eyes slightly based on some of the comments :) Used some masking to add a gradient for the skin. Want to be notified when I create a new program? Sub here: https://www.khanacademy.org/cs/gray-wolf/4876588413698048 Graphic based of: https://dribbble.com/shots/4076820-Lab-Girl-Avatar-with-Anime-Style / smooth(); var app; var Logo = (function() { Logo = function(args) { this.scale = args.scale \|\| 1.0; this.x = args.x \|\| 600 0.5 * this.scale; this.y = args.y \|\| 600 * 0.4 * this.scale; this.colors = { back: color(207, 161, 128), outline: color(5, 5, 5), from: color(102, 99, 98), to: color(13, 13, 13), text: color(56, 56, 56) }; this.font = args.font \|\| createFont("Trebuchet MS"); this.gray = { words: "G R A Y W O L F", index: 0, timer: 0, delay: 2 }; this.prod = { opacity: 0, y: height * 1.2, }; this.img = undefined; this.imgs = []; this.splits = { left: undefined, right: undefined }; this.timer = 0; this.states = { a: { delay: 30, duration: 120, }, b: { delay: 30 }, c: { delay: 55 }, d: { delay: 45, x: 0 } }; this.state = "a"; this.done = false; this.complete = false; this.hover = false; this.init(); }; Logo.prototype = { init: function() { var gx = createGraphics(600, 600, P2D); gx.background(0, 0); gx.fill(255); //inner gx.beginShape(); gx.vertex(300, 137); gx.vertex(377, 150); gx.vertex(454, 118); gx.vertex(410, 213); gx.vertex(429, 202); gx.vertex(464, 279); gx.vertex(396, 361); gx.vertex(381, 316); gx.vertex(341, 399); gx.vertex(300, 443); gx.vertex(259, 399); gx.vertex(219, 316); gx.vertex(204, 361); gx.vertex(136, 279); gx.vertex(171, 202); gx.vertex(190, 213); gx.vertex(146, 118); gx.vertex(223, 150); gx.endShape(CLOSE); var shape = gx.get(115, 90, 370, 355); gx.noStroke(); for(var i = 90; i <= 445; i++) { gx.fill(gx.lerpColor(this.colors.to, this.colors.from, i/445)); gx.rect(115, i, 370, 1); } gx.stroke(150, 20); gx.strokeWeight(1); for(var i = 0; i < 200; i++) { gx.line(random(115, 485), random(90, 445), random(115, 485), random(90, 445)); } gx.filter(BLUR, 2.5); var grad = gx.get(115, 90, 370, 355); grad.mask(shape); gx.background(this.colors.back); gx.background(0, 0); gx.noStroke(); gx.fill(this.colors.outline); //outer gx.beginShape(); gx.vertex(300, 126); gx.vertex(376, 138); gx.vertex(480, 92); gx.vertex(437, 187); gx.vertex(482, 283); gx.vertex(396, 364); gx.vertex(383, 344); gx.vertex(354, 404); gx.vertex(300, 444); gx.vertex(246, 404); gx.vertex(217, 344); gx.vertex(204, 364); gx.vertex(118, 283); gx.vertex(163, 187); gx.vertex(120, 92); gx.vertex(224, 138); gx.endShape(CLOSE); gx.image(grad, 115, 90); fill(this.colors.outline); //nose gx.beginShape(); gx.vertex(300, 372); gx.vertex(323, 367); gx.vertex(320, 382); gx.vertex(300, 400); gx.vertex(280, 382); gx.vertex(277, 367); gx.endShape(CLOSE); //left eye gx.beginShape(); gx.vertex(324, 341); gx.vertex(320, 268); gx.vertex(428, 231); gx.vertex(378, 290); gx.vertex(358, 278); gx.vertex(372, 280); gx.vertex(390, 257); gx.vertex(334, 277); gx.endShape(CLOSE); //right eye gx.beginShape(); gx.vertex(276, 341); gx.vertex(280, 268); gx.vertex(172, 231); gx.vertex(222, 290); gx.vertex(244, 278); gx.vertex(228, 280); gx.vertex(210, 257); gx.vertex(266, 277); gx.endShape(CLOSE); this.img = gx.get(115, 90, 370, 355); //generate pieces of image for(var i = 0; i < 10; i++) { for(var j = 0; j < 10; j++) { this.imgs.push({ img: gx.get(115 + 37 * i, 90 + 35.5 * j, 37, 35.5), w: 37, h: 35.5, dx: 115 + 37 * i + 18.5, dy: 90 + 35.5 * j + 17.75, x: random(-width, width * 2), y: random(-height, height * 2), angle: ~~random(3600) }); } } }, draw: function() { if(!this.complete) { pushMatrix(); scale(this.scale); pushStyle(); switch(this.state) { case "a": background(this.colors.back); if(this.timer++ >= this.states.a.delay) { for(var i = 0; i < this.imgs.length; i++) { var item = this.imgs[i]; item.x = lerp(item.x, item.dx, 0.1); item.y = lerp(item.y, item.dy, 0.1); item.angle = lerp(item.angle, 0, 0.1); imageMode(CENTER); pushMatrix(); translate(item.x, item.y - 28); rotate(item.angle); image(item.img, 0, 0, item.w, item.h); popMatrix(); } if(this.timer >= this.states.a.duration) { this.state = "b"; this.timer = 0; } } break; case "b": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); if(this.timer++ >= this.states.b.delay) { textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); if(this.gray.index < this.gray.words.length && this.gray.timer++ >= this.gray.delay) { this.gray.index++; this.gray.timer = 0; } text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); this.prod.opacity = constrain(this.prod.opacity + 7, 0, 255); this.prod.y = ~~lerp(this.prod.y, this.y * 2.1, 0.030); textSize(30); fill(this.colors.text, this.prod.opacity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); } if(this.gray.index === this.gray.words.length) { this.state = "c"; this.timer = 0; } break; case "c": background(this.colors.back); imageMode(CENTER); image(this.img, this.x / this.scale, this.y / this.scale); textFont(this.font); textAlign(CENTER, CENTER); textSize(40); fill(this.colors.text); text(this.gray.words.substring(0, this.gray.index), this.x / this.scale, this.y * 2 / this.scale); if(this.timer++ >= this.states.c.delay) { this.prod.opacity = constrain(this.prod.opacity - 5, 0, 255); } textSize(30); fill(this.colors.text, this.prod.opacity); this.prod.y = constrain(~~lerp(this.prod.y, this.y * 2.1, 0.035), 530 * this.scale, Infinity); text("P R E S E N T S", this.x / this.scale, this.prod.y / this.scale); if(this.prod.opacity === 0) { //get split image for next state this.splits.left = get(0, 0, width / 2, height); this.splits.right = get(width / 2, 0, width / 2, height); this.state = "d"; this.timer = 0; } break; case "d": scale(1 / this.scale); imageMode(CORNER); if(this.timer++ >= this.states.d.delay) { this.states.d.x = constrain(this.states.d.x + 7, 0, width / 2); } image(this.splits.left, -this.states.d.x, 0); image(this.splits.right, width / 2 + this.states.d.x, 0); if(this.states.d.x >= width / 2) { this.completed = true; } if(this.timer === this.states.d.delay) { this.done = true; } break; } popStyle(); popMatrix(); } } }; return Logo; })(); var App = (function() { App = function(args) { this.scene = "load"; this.logo = new Logo({}); this.colors = { back: color(207, 161, 128), stroke: color(20), white: color(255, 255, 255), hair: { dark: color(124, 30, 73), medium: color(178, 60, 105), light: color(240, 120, 160), streak: color(255, 255, 255) }, shirt: { collar: { dark: color(45, 65, 20), medium: color(65, 100, 35), light: color(160, 190, 140) }, center: { medium: color(88, 119, 67), light: color(160, 190, 140) }, outer: { main: color(245, 245, 245), shadow: color(50, 50) } }, skin: { dark: color(179, 121, 77), medium: color(215, 171, 134), light: color(245, 223, 203) }, eyes: { dark: color(0), light: color(196, 81, 85) }, tounge: color(102, 0, 0) }; this.images = undefined; this.imageIndex = 0; this.loaded = false; this.setup(); }; App.prototype = { setup: function() { this.images = { back: function() { var hexSize = 50; background(0, 0); noStroke(); fill(215, 171, 134); for(var x = 0; x <= 600 + hexSize; x+= hexSize) { for(var y = 0; y <= 600 + hexSize * 3; y+= hexSize) { beginShape(); for(var i = 0; i <= 360; i+= 60) { vertex(x + (y % (hexSize2) === 0 ? hexSize/2 : 0) + sin(i) hexSize * 0.5, y - (y/hexSize(hexSize0.15)) + cos(i) * hexSize * 0.5); } endShape(); } } return get(); }, face: function() { background(0, 0); //shape //main face stroke(app.colors.stroke); fill(255); beginShape(); vertex(413, 104); vertex(424, 248); bezierVertex(415, 296, 406, 326, 405, 328); bezierVertex(400, 350, 383, 369, 353, 391); bezierVertex(327, 408, 314, 413, 305, 413); bezierVertex(288, 412, 267, 399, 240, 379); bezierVertex(217, 360, 212, 348, 202, 320); vertex(179, 232); vertex(195, 104); endShape(CLOSE); var faceShape = get(187, 134, 234, 282); //pattern background(0, 0); noStroke(); for(var i = 0; i <= 282; i++) { fill(lerpColor(app.colors.skin.light, app.colors.skin.medium, i/400)); rect(187, 134 + i, 234, 1); } var faceImage = get(187, 134, 234, 282); faceImage.mask(faceShape); background(0, 0); stroke(app.colors.stroke); noFill(); beginShape(); vertex(413, 104); vertex(424, 248); bezierVertex(415, 296, 406, 326, 405, 328); bezierVertex(400, 350, 383, 369, 353, 391); bezierVertex(327, 408, 314, 413, 305, 413); bezierVertex(288, 412, 267, 399, 240, 379); bezierVertex(217, 360, 212, 348, 202, 320); vertex(179, 232); vertex(195, 104); endShape(CLOSE); image(faceImage, 187, 134); return get(187, 134, 234, 282); }, neck: function() { background(0, 0); //shape //neck stroke(app.colors.stroke); fill(255); beginShape(); vertex(337, 390); bezierVertex(340, 414, 345, 449, 360, 472); vertex(387, 483); bezierVertex(337, 537, 274, 537, 218, 480); vertex(249, 475); bezierVertex(266, 450, 271, 421, 274, 390); endShape(CLOSE); var neckShape = get(230, 396, 150, 120); //pattern background(0, 0); noStroke(); for(var i = 0; i <= 120; i++) { fill(lerpColor(app.colors.skin.light, app.colors.skin.medium, i/120)); rect(230, 396 + i, 150, 1); } var neckImage = get(230, 396, 150, 120); neckImage.mask(neckShape); background(0, 0); stroke(app.colors.stroke); noFill(); beginShape(); vertex(337, 390); bezierVertex(340, 414, 345, 449, 360, 472); vertex(387, 483); bezierVertex(337, 537, 274, 537, 218, 480); vertex(249, 475); bezierVertex(266, 450, 271, 421, 274, 390); endShape(CLOSE); image(neckImage, 230, 396); return get(230, 396, 150, 120); } }; }, load: function (s) { var obj = Object.keys(this.images); this.images[obj[this.imageIndex]] = this.images[obj[this.imageIndex]](); this.imageIndex++; background(this.colors.back); pushStyle(); fill(56, 56, 56); textAlign(CENTER, CENTER); textSize(40); text('LOADING', 300, 300); noFill(); stroke(56, 56, 56); strokeWeight(15); arc(300, 300, 300, 300, 0, map(this.imageIndex / obj.length, 0, 1, 0, 360)); strokeWeight(1); popStyle(); if(this.imageIndex < obj.length){ this.loaded = false; } else { this.loaded = true; this.scene = s; } }, draw: function() { background(this.colors.back); image(this.images.back, 0, 0); //hair at back stroke(this.colors.stroke); fill(this.colors.hair.dark); beginShape(); vertex(169, 261); bezierVertex(186, 352, 183, 431, 156, 519); vertex(456, 519); bezierVertex(429, 439, 422, 346, 441, 228); endShape(CLOSE); //streaks on back hair from facing left to right noStroke(); fill(this.colors.hair.medium); beginShape(); vertex(195, 310); bezierVertex(195, 379, 180, 446, 167, 496); vertex(191, 482); bezierVertex(203, 429, 208, 370, 211, 313); endShape(CLOSE); beginShape(); vertex(216, 348); bezierVertex(215, 391, 208, 431, 202, 462); vertex(235, 462); bezierVertex(243, 435, 248, 407, 250, 379); endShape(CLOSE); beginShape(); vertex(252, 382); bezierVertex(251, 411, 247, 439, 243, 459); vertex(256, 464); bezierVertex(259, 438, 261, 416, 262, 390); endShape(CLOSE); beginShape(); vertex(266, 391); bezierVertex(266, 415, 264, 438, 259, 464); vertex(352, 463); bezierVertex(346, 431, 345, 410, 345, 392); endShape(CLOSE); beginShape(); vertex(347, 387); bezierVertex(348, 417, 352, 439, 356, 468); vertex(369, 465); bezierVertex(364, 441, 360, 410, 358, 380); endShape(CLOSE); beginShape(); vertex(358, 378); bezierVertex(363, 410, 369, 439, 374, 461); vertex(423, 493); bezierVertex(404, 435, 397, 384, 392, 344); endShape(CLOSE); beginShape(); vertex(400, 327); bezierVertex(403, 375, 409, 433, 421, 488); vertex(447, 502); bezierVertex(427, 437, 415, 366, 413, 297); endShape(CLOSE); //light streaks on back hair from facing left to right noStroke(); fill(this.colors.hair.white); beginShape(); vertex(220, 353); bezierVertex(216, 397, 210, 434, 202, 463); vertex(209, 458); bezierVertex(218, 424, 224, 385, 227, 361); endShape(CLOSE); beginShape(); vertex(235, 368); bezierVertex(231, 403, 227, 431, 222, 454); vertex(226, 455); bezierVertex(232, 422, 237, 392, 240, 370); endShape(CLOSE); beginShape(); vertex(373, 369); bezierVertex(377, 410, 381, 437, 386, 457); vertex(389, 456); bezierVertex(383, 429, 378, 395, 375, 367); endShape(CLOSE); beginShape(); vertex(383, 358); bezierVertex(389, 400, 397, 439, 405, 468); vertex(412, 473); bezierVertex(402, 435, 394, 390, 390, 350); endShape(CLOSE); //ears stroke(this.colors.stroke); fill(this.colors.skin.light); //left beginShape(); vertex(433, 232); bezierVertex(445, 246, 451, 259, 449, 272); bezierVertex(445, 288, 438, 299, 432, 308); bezierVertex(424, 315, 415, 318, 395, 321); endShape(CLOSE); //right beginShape(); vertex(170, 242); bezierVertex(164, 255, 162, 262, 162, 273); bezierVertex(165, 287, 171, 300, 181, 310); bezierVertex(192, 318, 202, 321, 218, 321); endShape(CLOSE); //inner right ear noFill(); stroke(125, 85, 40); strokeWeight(2); beginShape(); vertex(432, 240); bezierVertex(437, 247, 440, 252, 439, 260); bezierVertex(435, 264, 432, 263, 427, 262); endShape(); beginShape(); vertex(424, 264); bezierVertex(427, 265, 432, 266, 436, 269); bezierVertex(440, 274, 436, 288, 430, 298); bezierVertex(426, 302, 419, 298, 404, 307); endShape(); strokeWeight(1); //inner right ear noFill(); stroke(125, 85, 40); strokeWeight(2); bezier(177, 283, 179, 295, 182, 298, 187, 299); strokeWeight(1); //shading on left ear noStroke(); fill(this.colors.skin.dark, 100); beginShape(); vertex(428, 267); bezierVertex(434, 266, 441, 274, 437, 281); vertex(425, 274); endShape(CLOSE); //collar behind stroke(this.colors.stroke); fill(this.colors.stroke); beginShape(); vertex(344, 469); bezierVertex(371, 458, 385, 455, 393, 458); vertex(393, 533); vertex(214, 535); vertex(213, 454); bezierVertex(224, 453, 241, 457, 272, 468); endShape(CLOSE); //neck (masked) image(this.images.neck, 230, 396); //shaded line on neck noStroke(); fill(this.colors.shirt.outer.shadow); beginShape(); vertex(330, 414); bezierVertex(326, 435, 321, 449, 313, 462); bezierVertex(319, 447, 325, 432, 330, 414); endShape(CLOSE); //shading on neck noStroke(); fill(this.colors.skin.medium, 80); beginShape(); vertex(337, 396); bezierVertex(340, 419, 344, 438, 349, 451); bezierVertex(314, 439, 290, 423, 273, 408); vertex(274, 398); endShape(CLOSE); //main face (masked) image(this.images.face, 187, 134); //eye brows noStroke(); fill(this.colors.stroke); beginShape(); vertex(213, 220); bezierVertex(236, 212, 262, 215, 283, 223); bezierVertex(256, 219, 232, 218, 213, 220); endShape(CLOSE); beginShape(); vertex(327, 223); bezierVertex(354, 212, 382, 214, 405, 221); bezierVertex(380, 218, 348, 219, 326, 224); endShape(CLOSE); //eye whites //right noStroke(); fill(this.colors.white); beginShape(); vertex(240, 241); bezierVertex(257, 241, 274, 249, 275, 263); bezierVertex(275, 280, 267, 295, 254, 302); bezierVertex(236, 309, 219, 301, 212, 290); bezierVertex(206, 280, 206, 267, 210, 256); bezierVertex(219, 244, 230, 242, 240, 241); endShape(CLOSE); //left beginShape(); vertex(375, 241); bezierVertex(386, 243, 400, 251, 402, 263); bezierVertex(405, 276, 401, 291, 389, 298); bezierVertex(376, 309, 358, 308, 345, 294); bezierVertex(337, 284, 334, 270, 336, 259); bezierVertex(344, 244, 359, 240, 374, 241); endShape(CLOSE); //black arc on top of eyes noStroke(); fill(this.colors.stroke); //right beginShape(); vertex(206, 257); bezierVertex(225, 237, 250, 233, 271, 240); bezierVertex(265, 240, 258, 241, 254, 242); bezierVertex(262, 243, 273, 250, 275, 260); bezierVertex(267, 249, 258, 246, 248, 243); bezierVertex(236, 243, 221, 248, 206, 257); endShape(CLOSE); //left beginShape(); vertex(402, 258); bezierVertex(384, 235, 357, 233, 335, 240); bezierVertex(344, 240, 348, 240, 354, 241); bezierVertex(345, 243, 338, 249, 336, 257); bezierVertex(347, 247, 359, 242, 370, 243); bezierVertex(381, 244, 391, 251, 402, 257); endShape(CLOSE); //black arc on bottom of eyes noStroke(); fill(this.colors.stroke); //right beginShape(); vertex(215, 293); bezierVertex(230, 303, 247, 304, 261, 297); bezierVertex(246, 313, 227, 310, 215, 293); endShape(CLOSE); //left beginShape(); vertex(348, 297); bezierVertex(366, 303, 381, 302, 393, 296); bezierVertex(382, 310, 363, 311, 348, 297); endShape(CLOSE); //colored parts of eyes noStroke(); fill(this.colors.eyes.light); beginShape(); vertex(227, 248); bezierVertex(240, 241, 255, 252, 259, 262); bezierVertex(265, 275, 262, 291, 253, 298); bezierVertex(243, 304, 227, 299, 222, 288); bezierVertex(215, 272, 216, 254, 227, 248); endShape(CLOSE); beginShape(); vertex(384, 249); bezierVertex(393, 259, 394, 273, 388, 287); bezierVertex(382, 298, 371, 303, 359, 300); bezierVertex(347, 291, 342, 277, 348, 259); bezierVertex(355, 248, 370, 240, 384, 249); endShape(CLOSE); //radial shading over colored eyes noFill(); strokeWeight(4); //right pushMatrix(); translate(239, 273); rotate(-6); for(var i = 0; i < 9; i++) { stroke(this.colors.stroke, 10 + i * 10); ellipse(0, 0, 18 + i * 3.1 , 18 + i * 4.4); } popMatrix(); //left pushMatrix(); translate(370, 273); rotate(4); for(var i = 0; i < 9; i++) { stroke(this.colors.stroke, 10 + i * 10); ellipse(0, 0, 18 + i * 3.2 , 18 + i * 4.4); } popMatrix(); strokeWeight(1); //eye balls noStroke(); fill(this.colors.stroke); pushMatrix(); translate(239, 273); rotate(-6); ellipse(0, 0, 12, 24); popMatrix(); pushMatrix(); translate(371, 273); rotate(4); ellipse(0, 0, 12, 24); popMatrix(); //black curved lines in colored part of eye noStroke(); fill(this.colors.stroke); //right beginShape(); vertex(228, 260); bezierVertex(227, 271, 228, 278, 232, 283); bezierVertex(229, 275, 230, 267, 228, 259); endShape(CLOSE); beginShape(); vertex(251, 265); bezierVertex(253, 279, 248, 289, 239, 294); bezierVertex(247, 285, 250, 275, 250, 264); endShape(CLOSE); //left beginShape(); vertex(361, 266); bezierVertex(357, 280, 362, 285, 370, 292); bezierVertex(359, 288, 354, 277, 360, 267); endShape(CLOSE); beginShape(); vertex(372, 254); bezierVertex(379, 255, 384, 262, 383, 271); bezierVertex(382, 264, 378, 259, 372, 255); endShape(CLOSE); //white ellipses in eyes noStroke(); fill(this.colors.white); //right pushMatrix(); translate(230, 261); rotate(-30); ellipse(0, 0, 9, 20); popMatrix(); pushMatrix(); translate(249, 290); rotate(-28); ellipse(0, 0, 7, 13); popMatrix(); //left pushMatrix(); translate(379, 261); rotate(30); ellipse(0, 0, 9, 20); popMatrix(); pushMatrix(); translate(360, 290); rotate(30); ellipse(0, 0, 7, 13); popMatrix(); //black outlines of eyes noFill(); stroke(this.colors.stroke, 200); strokeWeight(2); beginShape(); vertex(236, 241); bezierVertex(254, 240, 265, 257, 265, 275); bezierVertex(265, 290, 252, 304, 240, 303); bezierVertex(227, 304, 212, 287, 213, 270); bezierVertex(213, 255, 224, 244, 236, 241); endShape(CLOSE); beginShape(); vertex(371, 241); bezierVertex(381, 239, 395, 253, 396, 268); bezierVertex(399, 286, 387, 300, 376, 303); bezierVertex(362, 306, 344, 288, 346, 271); bezierVertex(345, 256, 359, 242, 370, 241); endShape(CLOSE); strokeWeight(1); //shaded hair noStroke(); fill(this.colors.skin.medium, 140); beginShape(); vertex(187, 200); bezierVertex(187, 219, 189, 238, 193, 249); bezierVertex(206, 208, 217, 185, 227, 169); bezierVertex(224, 183, 227, 201, 229, 211); bezierVertex(249, 187, 260, 177, 269, 172); bezierVertex(267, 183, 265, 198, 267, 212); bezierVertex(278, 199, 290, 182, 305, 169); bezierVertex(293, 203, 288, 246, 288, 274); bezierVertex(306, 217, 328, 184, 348, 170); bezierVertex(354, 183, 355, 194, 355, 207); bezierVertex(359, 195, 360, 187, 362, 165); bezierVertex(365, 180, 368, 195, 372, 212); bezierVertex(379, 193, 381, 177, 385, 169); bezierVertex(390, 180, 393, 194, 396, 215); bezierVertex(398, 203, 399, 182, 402, 157); bezierVertex(408, 195, 410, 235, 410, 266); bezierVertex(418, 248, 428, 188, 412, 117); vertex(196, 119); endShape(CLOSE); //hair in front stroke(this.colors.stroke); fill(this.colors.hair.light); beginShape(); vertex(324, 41); bezierVertex(336, 28, 349, 24, 367, 32); bezierVertex(393, 43, 417, 61, 432, 82); bezierVertex(452, 114, 460, 149, 452, 177); bezierVertex(454, 143, 440, 94, 402, 62); bezierVertex(446, 109, 473, 214, 415, 295); bezierVertex(424, 223, 416, 179, 403, 138); bezierVertex(412, 182, 411, 222, 400, 264); bezierVertex(407, 216, 401, 177, 374, 142); bezierVertex(392, 185, 389, 225, 376, 273); bezierVertex(382, 223, 379, 184, 369, 158); bezierVertex(373, 194, 373, 219, 353, 301); bezierVertex(371, 207, 363, 169, 355, 142); bezierVertex(315, 181, 291, 225, 277, 283); bezierVertex(274, 215, 281, 176, 300, 144); bezierVertex(263, 190, 236, 233, 231, 293); bezierVertex(229, 223, 238, 185, 250, 155); bezierVertex(217, 214, 207, 256, 208, 309); bezierVertex(195, 253, 200, 215, 212, 179); bezierVertex(182, 230, 190, 279, 200, 312); bezierVertex(157, 271, 143, 216, 158, 156); bezierVertex(147, 187, 144, 217, 142, 249); bezierVertex(135, 190, 149, 141, 174, 100); bezierVertex(208, 50, 241, 28, 272, 24); bezierVertex(240, 26, 209, 40, 191, 53); bezierVertex(211, 29, 228, 20, 256, 16); bezierVertex(282, 14, 306, 24, 324, 41); endShape(CLOSE); //medium streaks on hair noStroke(); //center star on head fill(this.colors.hair.medium); beginShape(); vertex(320, 52); bezierVertex(309, 43, 293, 39, 284, 39); bezierVertex(300, 43, 312, 48, 317, 55); bezierVertex(273, 45, 236, 59, 212, 81); bezierVertex(248, 61, 278, 53, 308, 57); bezierVertex(298, 59, 291, 62, 285, 67); bezierVertex(294, 63, 304, 62, 314, 62); bezierVertex(308, 70, 301, 78, 298, 86); bezierVertex(308, 77, 314, 71, 320, 67); bezierVertex(332, 73, 345, 80, 352, 87); bezierVertex(346, 79, 336, 72, 327, 66); bezierVertex(333, 67, 338, 69, 346, 71); bezierVertex(341, 67, 335, 64, 326, 61); bezierVertex(330, 60, 336, 58, 340, 57); bezierVertex(334, 57, 331, 57, 327, 57); bezierVertex(328, 55, 329, 54, 331, 50); bezierVertex(329, 52, 324, 54, 320, 52); endShape(CLOSE); //streaks from facing left to right beginShape(); vertex(268, 69); bezierVertex(196, 89, 164, 148, 163, 198); bezierVertex(176, 142, 208, 100, 268, 69); endShape(CLOSE); beginShape(); vertex(233, 106); bezierVertex(169, 152, 176, 219, 191, 279); bezierVertex(185, 227, 203, 189, 219, 165); bezierVertex(209, 200, 204, 242, 208, 273); bezierVertex(218, 215, 233, 173, 267, 129); bezierVertex(256, 134, 251, 137, 244, 142); bezierVertex(258, 119, 271, 102, 285, 88); bezierVertex(239, 116, 214, 156, 195, 198); bezierVertex(207, 150, 220, 126, 233, 106); endShape(CLOSE); beginShape(); vertex(305, 137); bezierVertex(253, 179, 234, 226, 232, 274); bezierVertex(246, 207, 279, 169, 305, 137); endShape(CLOSE); beginShape(); vertex(317, 120); bezierVertex(289, 151, 281, 185, 278, 229); bezierVertex(288, 184, 303, 148, 317, 120); endShape(CLOSE); beginShape(); vertex(350, 145); bezierVertex(335, 150, 327, 154, 321, 161); vertex(323, 148); bezierVertex(298, 184, 290, 219, 285, 250); bezierVertex(307, 192, 333, 163, 350, 146); endShape(CLOSE); beginShape(); vertex(357, 125); bezierVertex(396, 156, 402, 195, 403, 228); bezierVertex(411, 180, 400, 144, 357, 125); endShape(CLOSE); beginShape(); vertex(382, 95); bezierVertex(418, 152, 421, 208, 419, 271); bezierVertex(436, 206, 427, 140, 382, 95); endShape(CLOSE); beginShape(); vertex(422, 128); bezierVertex(436, 163, 439, 188, 437, 209); bezierVertex(446, 186, 440, 156, 422, 128); endShape(CLOSE); beginShape(); vertex(361, 44); bezierVertex(389, 64, 409, 85, 432, 114); bezierVertex(416, 82, 393, 58, 361, 44); endShape(CLOSE); beginShape(); vertex(316, 41); bezierVertex(291, 13, 254, 23, 233, 40); bezierVertex(262, 30, 287, 29, 316, 41); endShape(CLOSE); //line on hair noFill(); stroke(this.colors.stroke); line(355, 142, 353, 136); //white streaks in hair noStroke(); fill(this.colors.hair.white); beginShape(); vertex(227, 53); bezierVertex(201, 72, 185, 95, 174, 114); vertex(185, 106); vertex(182, 114); vertex(199, 104); vertex(190, 120); vertex(210, 103); vertex(195, 129); vertex(212, 118); vertex(206, 132); vertex(219, 122); vertex(216, 135); vertex(234, 112); vertex(223, 138); bezierVertex(241, 115, 258, 99, 275, 88); vertex(244, 96); vertex(250, 86); vertex(235, 92); vertex(248, 80); vertex(226, 85); vertex(233, 72); vertex(203, 89); bezierVertex(211, 75, 217, 65, 227, 53); endShape(CLOSE); beginShape(); vertex(278, 95); bezierVertex(262, 110, 252, 127, 246, 140); vertex(266, 127); vertex(254, 156); vertex(273, 127); vertex(276, 144); bezierVertex(281, 127, 291, 112, 304, 100); vertex(288, 108); vertex(297, 91); vertex(273, 111); endShape(CLOSE); beginShape(); vertex(312, 102); bezierVertex(302, 112, 296, 121, 291, 131); vertex(298, 126); vertex(300, 132); bezierVertex(304, 122, 307, 112, 312, 102); endShape(CLOSE); beginShape(); vertex(334, 94); bezierVertex(338, 105, 343, 113, 346, 124); vertex(346, 118); vertex(350, 121); vertex(348, 109); vertex(355, 120); vertex(355, 112); vertex(362, 119); vertex(360, 105); vertex(375, 122); vertex(370, 109); vertex(381, 116); vertex(379, 105); vertex(387, 112); vertex(381, 96); vertex(404, 107); vertex(388, 80); vertex(389, 89); vertex(378, 79); vertex(379, 87); vertex(364, 78); vertex(369, 96); vertex(355, 77); vertex(361, 95); vertex(347, 80); vertex(350, 91); vertex(342, 84); vertex(342, 97); endShape(CLOSE); beginShape(); vertex(396, 80); bezierVertex(406, 92, 413, 103, 418, 116); vertex(419, 109); bezierVertex(427, 119, 430, 124, 437, 135); bezierVertex(429, 112, 414, 91, 395, 80); endShape(CLOSE); beginShape(); vertex(421, 161); bezierVertex(427, 191, 429, 212, 429, 234); vertex(434, 222); bezierVertex(431, 239, 429, 251, 425, 267); bezierVertex(441, 227, 446, 200, 443, 172); bezierVertex(442, 187, 440, 201, 438, 211); vertex(436, 189); vertex(434, 203); bezierVertex(432, 186, 426, 170, 421, 161); endShape(CLOSE); beginShape(); vertex(155, 212); bezierVertex(158, 252, 171, 274, 181, 289); bezierVertex(174, 275, 171, 262, 168, 251); vertex(175, 259); bezierVertex(171, 233, 172, 213, 173, 189); bezierVertex(169, 211, 168, 224, 168, 242); vertex(165, 235); vertex(163, 241); vertex(155, 212); endShape(CLOSE); //mouth noStroke(); fill(this.colors.stroke); beginShape(); vertex(266, 345); vertex(343, 345); bezierVertex(341, 367, 325, 384, 305, 384); bezierVertex(281, 383, 267, 363, 266, 345); endShape(CLOSE); //teeth noStroke(); fill(this.colors.white); beginShape(); vertex(273, 348); vertex(336, 348); bezierVertex(335, 353, 334, 357, 329, 359); vertex(281, 359); bezierVertex(277, 359, 274, 356, 272, 348); endShape(CLOSE); //tounge noStroke(); fill(this.colors.tounge); beginShape(); vertex(283, 373); bezierVertex(298, 362, 314, 364, 325, 374); bezierVertex(313, 383, 296, 383, 283, 373); endShape(CLOSE); noFill(); stroke(this.colors.stroke); bezier(303, 365, 307, 367, 310, 367, 311, 373); //shading on nose noStroke(); fill(this.colors.skin.medium); beginShape(); vertex(305, 307); bezierVertex(307, 314, 308, 322, 305, 332); bezierVertex(318, 322, 320, 323, 305, 307); endShape(CLOSE); //nose noStroke(); fill(this.colors.stroke); beginShape(); vertex(305, 307); bezierVertex(307, 314, 308, 322, 305, 332); bezierVertex(310, 327, 313, 320, 305, 307); endShape(CLOSE); //lines under eyes noFill(); stroke(this.colors.skin.dark); //right eye line(219, 307, 215, 313); line(222, 311, 220, 314); line(227, 313, 223, 319); //left eye line(391, 307, 394, 313); line(386, 311, 388, 315); line(381, 312, 383, 318); //sleeves stroke(this.colors.stroke); fill(this.colors.shirt.outer.main); beginShape(); vertex(85, 602); bezierVertex(96, 564, 102, 542, 108, 534); bezierVertex(116, 526, 129, 520, 153, 519); bezierVertex(259, 570, 361, 570, 454, 518); bezierVertex(476, 519, 488, 524, 496, 531); bezierVertex(506, 554, 514, 580, 520, 602); endShape(CLOSE); //shading on right sleeve noStroke(); fill(this.colors.shirt.outer.shadow); beginShape(); vertex(130, 522); vertex(117, 528); bezierVertex(119, 538, 121, 545, 126, 558); endShape(CLOSE); //shading on left sleeve noStroke(); fill(this.colors.shirt.outer.shadow); beginShape(); vertex(476, 521); vertex(486, 525); bezierVertex(486, 539, 484, 547, 481, 562); endShape(CLOSE); //shirt outer stroke(this.colors.stroke); fill(this.colors.shirt.outer.main); beginShape(); vertex(126, 602); bezierVertex(126, 563, 128, 536, 131, 523); bezierVertex(141, 507, 168, 490, 198, 475); bezierVertex(278, 532, 350, 531, 410, 474); bezierVertex(437, 489, 464, 506, 474, 518); bezierVertex(480, 529, 481, 568, 480, 602); endShape(CLOSE); //shading on shirt noStroke(); fill(this.colors.shirt.outer.shadow); //right beginShape(); vertex(152, 602); vertex(172, 514); vertex(158, 602); endShape(CLOSE); //left beginShape(); vertex(448, 602); vertex(433, 508); vertex(453, 602); endShape(CLOSE); //shirt center stroke(this.colors.stroke); fill(this.colors.shirt.center.medium); beginShape(); vertex(410, 479); bezierVertex(397, 535, 387, 576, 379, 602); vertex(227, 602); bezierVertex(217, 566, 205, 522, 195, 483); bezierVertex(272, 540, 347, 540, 410, 479); endShape(CLOSE); //shirt center light shading noStroke(); fill(this.colors.shirt.center.light); beginShape(); vertex(234, 602); vertex(220, 532); bezierVertex(275, 591, 342, 575, 378, 543); vertex(371, 602); endShape(CLOSE); //collar front stroke(this.colors.stroke); fill(this.colors.shirt.collar.medium); beginShape(); vertex(380, 472); bezierVertex(384, 462, 387, 456, 395, 456); bezierVertex(405, 462, 412, 465, 414, 471); bezierVertex(411, 489, 401, 513, 369, 536); bezierVertex(337, 557, 302, 564, 264, 552); bezierVertex(234, 541, 208, 514, 196, 489); bezierVertex(192, 477, 197, 466, 204, 459); bezierVertex(210, 454, 216, 452, 220, 457); bezierVertex(231, 479, 258, 502, 299, 508); bezierVertex(339, 515, 364, 495, 380, 472); endShape(CLOSE); //light shading on collar noStroke(); fill(this.colors.shirt.collar.light); beginShape(); vertex(219, 465); bezierVertex(242, 503, 274, 521, 313, 516); bezierVertex(344, 512, 365, 497, 381, 480); bezierVertex(358, 512, 331, 526, 294, 524); bezierVertex(261, 520, 236, 500, 219, 465); endShape(CLOSE); //dark shading on collar noStroke(); fill(this.colors.shirt.collar.dark); beginShape(); vertex(195, 481); bezierVertex(237, 539, 288, 559, 334, 540); bezierVertex(375, 527, 403, 495, 411, 478); bezierVertex(400, 521, 354, 559, 303, 557); bezierVertex(256, 558, 210, 529, 195, 481); endShape(CLOSE); }, run: function() { switch(this.scene) { case "load": this.load("draw"); break; case "draw": if(this.logo.done) { this.draw(); } this.logo.draw(); if(this.logo.complete) { noLoop(); } break; } } }; return App; })(); app = new App(); draw = function() { app.run(); };
Folds	22,327,328,1351
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP2c0bfzCQw
Votes	186
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739393764418
Updated	8 months ago, 1744820086124
Source Deleted	unknown