Viewing Program

Program Data

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

Title	Logo/Intro for LilFoxCub
ID	5147363024879616
Created	3 years ago, 1637585672852
Updated	3 years ago, 1637585741186
Code	/ Gray Wolf, November 2021 Logo/Intro for LilFoxCub https://www.khanacademy.org/profile/kaid_9968406906227812006250022 @Instructons_for_LilFoxCub @Intro To run the intro just create a new Logo instance: var logo = new Logo({}); Then in the draw function add the following: draw = function() { background(255); if(logo.done) { //place your code inside here } logo.run(); }; Note that the "if(logo.done) {" conditional statement is optional. If you don't have the conditional statement it just means that your program will be running at the same time as the logo. If you do have it then your program will only start running when the logo intro is finished. @Corner_Logo If you want to just display a corner logo: var logo = new Logo({ x: 510, //the x position y: 520, //the y position scale: 0.4 //the scale of the logo }); Then draw the corner logo as so: logo.corner(); / var Logo = (function() { Logo = function(args) { this.x = args.x \|\| 300; this.y = args.y \|\| 300; this.scale = args.scale \|\| 1; this.timer = 0; this.state = 0; this.done = false; this.complete = false; this.font = createFont("Trebuchet MS"); this.colors = { background: color(250, 210, 250), outline: color(150, 100, 55), brown_dark: color(100, 80, 65), brown_medium: color(210, 125, 60), brown_light: color(235, 155, 80), black: color(90, 50, 35), white: color(253, 253, 253), white_shade: color(235, 235, 215) }; this.anim = { fox_yoff: -600, title_xoff: -500, cover_opacity: 0 }; this.fox = this.getFox(); this.init(); }; Logo.prototype = { init: function() { background(0, 0); noStroke(); for(var i = 0; i < 40; i++) { fill(random(245, 255), random(30, 50)); var diameter = random(40, 80); ellipse(random(600), random(600), diameter, diameter); } this.background = get(); }, update: function() { switch(this.state) { case 0: if(this.timer++ > 30) { this.anim.fox_yoff = lerp(this.anim.fox_yoff, 0, 0.1) \| 0; if(this.timer > 120) { this.anim.title_xoff = lerp(this.anim.title_xoff, 0, 0.1) \| 0; if(this.timer > 180) { this.timer = 0; this.state++; } } } break; case 1: if(this.timer++ > 80) { this.anim.cover_opacity = constrain(this.anim.cover_opacity + 4, 0, 255); if(this.anim.cover_opacity >= 255) { this.done = true; this.timer = 0; this.state++; } } break; case 2: this.anim.cover_opacity = constrain(this.anim.cover_opacity - 5, 0, 255); if(this.anim.cover_opacity === 0) { this.complete = true; } break; } }, getFox: function() { background(0, 0); //outer body stroke(this.colors.outline); strokeWeight(2); fill(this.colors.brown_light); beginShape(); vertex(330, 199); bezierVertex(415, 176, 481, 229, 483, 300); bezierVertex(484, 383, 406, 426, 332, 434); vertex(340, 425); bezierVertex(268, 443, 184, 400, 145, 353); vertex(137, 354); bezierVertex(146, 346, 154, 342, 170, 340); bezierVertex(151, 337, 133, 340, 121, 349); bezierVertex(168, 249, 251, 263, 306, 279); bezierVertex(319, 268, 329, 252, 333, 235); bezierVertex(343, 244, 341, 227, 332, 216); bezierVertex(339, 214, 334, 208, 323, 206); endShape(CLOSE); //shading on bottom of tail noStroke(); fill(this.colors.brown_medium); beginShape(); vertex(433, 212); bezierVertex(525, 316, 445, 367, 354, 395); bezierVertex(342, 399, 344, 404, 352, 407); bezierVertex(325, 417, 285, 417, 250, 417); bezierVertex(286, 434, 337, 428, 343, 422); vertex(337, 432); bezierVertex(470, 421, 537, 282, 433, 212); endShape(CLOSE); //shading right of head beginShape(); vertex(316, 193); bezierVertex(333, 199, 347, 208, 342, 217); bezierVertex(351, 230, 350, 242, 341, 251); bezierVertex(359, 249, 373, 251, 383, 258); bezierVertex(356, 254, 341, 261, 331, 271); bezierVertex(372, 294, 412, 305, 436, 291); bezierVertex(425, 316, 389, 305, 369, 301); bezierVertex(344, 293, 322, 284, 302, 276); endShape(CLOSE); //white end on tail stroke(this.colors.outline); fill(this.colors.white); beginShape(); vertex(126, 343); bezierVertex(162, 262, 256, 262, 312, 282); bezierVertex(297, 290, 281, 283, 263, 286); bezierVertex(280, 299, 279, 305, 242, 311); bezierVertex(270, 314, 306, 321, 312, 337); bezierVertex(316, 358, 276, 342, 255, 360); bezierVertex(262, 363, 261, 367, 251, 369); bezierVertex(272, 380, 274, 389, 233, 385); bezierVertex(258, 402, 285, 409, 296, 416); bezierVertex(304, 430, 273, 429, 232, 413); bezierVertex(201, 402, 166, 377, 144, 350); bezierVertex(156, 343, 166, 342, 177, 339); bezierVertex(157, 337, 139, 339, 126, 344); endShape(CLOSE); //line finishing off the tail noFill(); bezier(306, 279, 369, 302, 423, 322, 438, 290); bezier(338, 425, 345, 423, 351, 420, 358, 418); bezier(323, 284, 337, 259, 362, 254, 385, 260); bezier(138, 353, 143, 348, 153, 354, 157, 353); //ears outer strokeWeight(1); stroke(this.colors.outline); fill(this.colors.brown_light); beginShape(); vertex(300, 187); bezierVertex(315, 142, 299, 111, 281, 94); bezierVertex(256, 82, 248, 114, 241, 142); endShape(CLOSE); beginShape(); vertex(180, 162); bezierVertex(163, 142, 148, 131, 135, 131); bezierVertex(112, 135, 105, 186, 149, 238); endShape(CLOSE); //shading on ears noFill(); strokeWeight(7); stroke(this.colors.brown_medium); bezier(258, 109, 252, 118, 251, 126, 246, 146); strokeWeight(4); bezier(120, 172, 125, 201, 137, 217, 148, 231); strokeWeight(11); stroke(this.colors.brown_dark); bezier(294, 123, 283, 91, 265, 91, 257, 111); bezier(292, 121, 280, 94, 268, 108, 263, 119); strokeWeight(10); bezier(160, 149, 143, 135, 119, 123, 123, 175); bezier(156, 152, 143, 144, 130, 136, 130, 169); //inner ears strokeWeight(1); fill(this.colors.white); beginShape(); vertex(292, 179); bezierVertex(296, 151, 294, 129, 284, 113); bezierVertex(267, 105, 267, 131, 262, 156); endShape(CLOSE); beginShape(); vertex(171, 173); bezierVertex(158, 159, 148, 150, 139, 151); bezierVertex(127, 164, 138, 200, 156, 222); endShape(CLOSE); //shading inside ear noStroke(); fill(this.colors.white_shade); beginShape(); vertex(263, 166); bezierVertex(264, 139, 269, 110, 279, 112); bezierVertex(276, 132, 276, 149, 277, 167); endShape(CLOSE); beginShape(); vertex(158, 223); bezierVertex(143, 204, 130, 175, 137, 155); bezierVertex(144, 179, 153, 196, 162, 207); endShape(CLOSE); //head stroke(this.colors.outline); strokeWeight(2); fill(this.colors.brown_light); beginShape(); vertex(330, 198); bezierVertex(327, 195, 317, 192, 304, 184); bezierVertex(275, 147, 250, 131, 226, 136); bezierVertex(232, 127, 227, 123, 216, 136); bezierVertex(216, 130, 212, 127, 206, 133); bezierVertex(196, 144, 174, 153, 164, 172); bezierVertex(155, 193, 155, 222, 139, 230); bezierVertex(124, 235, 126, 246, 137, 249); bezierVertex(129, 262, 130, 276, 140, 268); bezierVertex(142, 277, 150, 287, 158, 298); bezierVertex(220, 255, 268, 267, 305, 278); bezierVertex(319, 268, 329, 252, 333, 235); bezierVertex(343, 244, 341, 227, 332, 216); bezierVertex(339, 214, 334, 208, 323, 206); endShape(CLOSE); //shading on left of face noStroke(); fill(this.colors.brown_medium); beginShape(); vertex(157, 194); bezierVertex(157, 209, 155, 222, 149, 233); bezierVertex(153, 231, 164, 230, 165, 239); bezierVertex(166, 248, 154, 249, 175, 287); bezierVertex(168, 289, 163, 292, 159, 297); bezierVertex(149, 283, 139, 273, 142, 266); bezierVertex(130, 272, 128, 263, 139, 251); bezierVertex(126, 244, 127, 231, 138, 232); bezierVertex(146, 230, 151, 218, 157, 194); endShape(CLOSE); //white face fill(this.colors.white); beginShape(); vertex(306, 278); bezierVertex(317, 267, 323, 259, 327, 250); bezierVertex(322, 247, 320, 246, 315, 244); bezierVertex(317, 243, 316, 239, 313, 239); bezierVertex(302, 240, 294, 241, 287, 238); bezierVertex(279, 233, 262, 233, 254, 241); bezierVertex(249, 245, 243, 253, 230, 260); bezierVertex(211, 264, 200, 270, 195, 278); bezierVertex(237, 264, 274, 270, 306, 278); endShape(CLOSE); //nose fill(this.colors.black); beginShape(); vertex(275, 259); bezierVertex(288, 250, 287, 237, 273, 240); bezierVertex(256, 242, 253, 254, 275, 259); endShape(CLOSE); //eyebrows noFill(); stroke(this.colors.black); strokeWeight(3); bezier(210, 200, 207, 200, 202, 204, 198, 209); bezier(290, 186, 288, 183, 284, 180, 278, 181); bezier(294, 206, 296, 217, 289, 220, 281, 210); bezier(221, 227, 222, 239, 214, 244, 207, 234); //mouth stroke(this.colors.brown_dark); bezier(254, 262, 255, 270, 266, 271, 268, 264); strokeWeight(1); return get(112, 88, 375, 350); }, corner: function() { pushMatrix(); translate(this.x, this.y); scale(this.scale); pushStyle(); imageMode(CENTER); image(this.fox, 0, 0); imageMode(CORNER); popStyle(); popMatrix(); }, draw: function() { pushMatrix(); scale(width/600); pushStyle(); if(!this.done) { background(this.colors.background); image(this.background, 0, 0); imageMode(CENTER); image(this.fox, 300, 250 + this.anim.fox_yoff); imageMode(CORNER); textAlign(CENTER, CENTER); textFont(this.font, 40); fill(this.colors.black); text("LilFoxCub", 300 + this.anim.title_xoff, 470); } fill(this.colors.background, this.anim.cover_opacity); rect(0, 0, 600, 600); popStyle(); popMatrix(); }, run: function() { if(!this.complete) { this.update(); this.draw(); } } }; return Logo; })(); var logo = new Logo({}); var logoCorner = new Logo({ x: 510, y: 520, scale: 0.4 }); draw = function() { background(255); //place your code inside here if(logo.done) { fill(74, 74, 74); textSize(30); textAlign(CENTER, CENTER); text("MY PROGRAM", width/2, height/2); logoCorner.corner(); } //leave this as is logo.run(); };
Folds	47,363
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIPF_a-SCQw
Votes	78
Spin-Offs	0
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	3 months ago, 1727909631656
Updated	3 months ago, 1728150500661
Source Deleted	unknown