Viewing Program

Program Data

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

Title	Khantober 2024
ID	6600361107701760
Created	3 months ago, 1727788109652
Updated	3 months ago, 1727788263118
Code	/** * Challenging you to... * Khantober 2024: 31 Days of Smashing Programming! * Chester Banks * * Khantober starts TODAY, you can join anytime during this first week! To join, just comment below in the T&T! * * What is Khantober? + Khantober is a challenge, not a competition. If you accept the challenge of Khantober, you will: + Try to make a quality program every week of October. + You will be placed on a day of the week (tell me if you have a preference). On that day, you will release your weekly program. + You can subscribe to the Featured Programs thread - I will be choosing programs that I think are cool and post them on there! + Your name will be put on the Challengers section for all to see! * Hope you join, excited to see your work! * * NOTE - I am whole man now so I won't be able to add all your names to the groups until after work tonight. If you ask me for a certain day, just assume you will be put on that day unless I say otherwise. :) / / Sorry for the late release and the ensuing confusion! I am still happy to host this. :) The bonus challenge now is to put yourself on Tuesday and cook up a quality program in 24 hours! / // List of challengers var CHALLENGERS = 'This could be you! Join in the T&Ts now.'.split(', ').sort(); /* Settings / var keys = []; var fonts = { main: createFont('Avenir'), bold: createFont('Avenir Bold') }; /* Graphic functions / // Leaf graphic - I coded my own so I could do any color var leaf = function(x, y, xSz, ySz, rot, color){ pushMatrix(); translate(x, y); rotate(rot); scale(xSz, ySz); noStroke(); fill(color); beginShape(); vertex(-124, 120); bezierVertex(-179, -23, -54, -139, 117, -152); bezierVertex(142, -16, 61, 160, -102, 138); bezierVertex(-91, 120, 106, -134, -124, 120); endShape(); popMatrix(); }; // Chester Banks logo function var logo = function(x, y, sz) { var logoColors = [ color(47, 237, 104), color(98, 227, 43), color(181, 237, 69), color(50, 194, 67), ]; pushMatrix(); translate(x, y); scale(sz); noFill(); strokeCap(SQUARE); stroke(0, 0, 0, 20); strokeWeight(40); arc(8, 9, 170, 170, 30, 330); strokeWeight(11); // Outer layer stroke(logoColors[0]); arc(0, 0, 200, 200, -85, -30); arc(0, 0, 180, 180, -75, -30); arc(0, 0, 200, 200, -300, -240); arc(0, 0, 180, 180, -285, -250); stroke(logoColors[1]); arc(0, 0, 200, 200, -125, -85); arc(0, 0, 180, 180, -115, -75); arc(0, 0, 200, 200, -200, -160); arc(0, 0, 180, 180, -200, -150); stroke(logoColors[2]); arc(0, 0, 200, 200, -160, -125); arc(0, 0, 180, 180, -150, -116); arc(0, 0, 200, 200, -330, -300); arc(0, 0, 180, 180, -330, -286); stroke(logoColors[3]); arc(0, 0, 200, 200, -240, -200); arc(0, 0, 180, 180, -250, -200); // Inner layer stroke(logoColors[0]); arc(0, 0, 160, 160, -200, -160); arc(0, 0, 140, 140, -200, -150); stroke(logoColors[1]); arc(0, 0, 160, 160, -300, -240); arc(0, 0, 140, 140, -285, -250); stroke(logoColors[2]); arc(0, 0, 160, 160, -240, -200); arc(0, 0, 140, 140, -250, -200); arc(0, 0, 160, 160, -125, -85); arc(0, 0, 140, 140, -115, -75); stroke(logoColors[3]); arc(0, 0, 160, 160, -85, -30); arc(0, 0, 140, 140, -75, -30); arc(0, 0, 160, 160, -330, -300); arc(0, 0, 140, 140, -330, -286); arc(0, 0, 160, 160, -160, -125); arc(0, 0, 140, 140, -150, -116); stroke(0, 0, 0, 50); strokeWeight(20); arc(0, 0, 150, 150, 30, 330); popMatrix(); }; /* Moving objects / / Made the title card into its own function so all these variables don't get messy / var titleCard = function(){ this.y1 = 500; this.y2 = 500; this.y3 = 500; this.y4 = 500; this.rectOpacity = 255; this.line1 = 335; this.line2 = 94; this.khantoberOpacity = 255; this.chesterOpacity = 255; }; titleCard.prototype.draw = function() { //rect(40, 176, 524, 258); for(var i = -41; i < 617; i += 150){ for(var j = -48; j < 600; j += 150){ pushMatrix(); translate(i, j); leaf(31, 30, 0.15, 0.15, 0, color(31, 209, 58, 30 + sin((i+j)+60+frameCount1.5)80)); leaf(52, 84, 0.15, 0.15, -73, color(31, 209, 58, 40 + sin((i+j)+frameCount2.5)80)); leaf(75, 44, 0.15, 0.15, -148, color(31, 209, 58, 50+ sin((i+j)-50+frameCount3)80)); leaf(90, 91, 0.15, 0.15, -250, color(31, 209, 58, 70+ sin((i+j)+20+frameCount1.6)80)); leaf(71, 140, 0.15, 0.15, 313, color(31, 209, 58, 30)); leaf(26, 134, 0.15, 0.15, 191, color(31, 209, 58, 40)); leaf(-14, 106, 0.15, 0.15, 69, color(31, 209, 58, 50)); leaf(122, 147, 0.15, 0.15, -89, color(31, 209, 58, 60)); leaf(123, 51, 0.15, 0.15, -11, color(31, 209, 58, 70)); leaf(159, 74, 0.15, 0.15, 120, color(31, 209, 58, 50)); popMatrix(); } } textAlign(RIGHT, CENTER); textFont(createFont("Avenir")); textSize(24); textLeading(80); fill(33, 35, 36, 255 - this.khantoberOpacity); text('Khantober', 545, 150); fill(33, 35, 36, 255 - this.chesterOpacity); text('31 Days of Smashing Programming', 443, 470); fill(98, 138, 115); rect(452, 470, 94 - this.line2, 3); rect(66, 150, 355 - this.line1, 3); textAlign(CENTER, CENTER); textSize(14); textFont(createFont("Avenir Bold")); fill(25, 25, 25, 200 + sin(frameCount10) * 100); text('> USE THE ARROW KEYS TO EXPLORE <', 300, 541); fill(25, 25, 25, 180); text('CHESTER BANKS \| ELEVENTH YEAR ANNIVERSARY', 300, 80); // 2024 fill(36, 36, 36); pushMatrix(); translate(300, 300); // 2 pushMatrix(); translate(-250, this.y1); beginShape(); vertex(70, 76); vertex(129, 76); vertex(129, 117); vertex(16, 117); bezierVertex(13, 40, 85, 21, 85, -41); bezierVertex(88, -64, 59, -87, 61, -16); vertex(17, -16); bezierVertex(9, -65, 32, -106, 70, -103); bezierVertex(117, -105, 134, -70, 130, -36); bezierVertex(129, 14, 84, 35, 70, 76); endShape(); popMatrix(); // 0 pushMatrix(); translate(2, 1 + this.y2); beginShape(); vertex(-54, -63); vertex(-54, -103); bezierVertex(-111, -101, -110, -58, -111, -46); vertex(-111, 46); bezierVertex(-110, 71, -111, 116, -54, 118); vertex(-54, 78); bezierVertex(-65, 77, -65, 69, -65, 62); vertex(-65, -52); bezierVertex(-63, -57, -64, -61, -54, -63); endShape(); pushMatrix(); beginShape(); scale(-1, 1); translate(109, 0); vertex(-54, -63); vertex(-54, -103); bezierVertex(-111, -101, -110, -58, -111, -46); vertex(-111, 46); bezierVertex(-110, 71, -111, 116, -54, 118); vertex(-54, 78); bezierVertex(-65, 77, -65, 69, -65, 62); vertex(-65, -52); bezierVertex(-63, -57, -64, -61, -54, -63); endShape(); popMatrix(); popMatrix(); // 2 pushMatrix(); translate(0, this.y3); beginShape(); vertex(70, 76); vertex(129, 76); vertex(129, 117); vertex(16, 117); bezierVertex(13, 40, 85, 21, 85, -41); bezierVertex(88, -64, 59, -87, 61, -16); vertex(17, -16); bezierVertex(9, -65, 32, -106, 70, -103); bezierVertex(117, -105, 134, -70, 130, -36); bezierVertex(129, 14, 84, 35, 70, 76); endShape(); popMatrix(); // 4 pushMatrix(); translate(0, this.y4); noStroke(); rect(200, -100, 44, 217); rect(135, 46, 121, 36); rect(177, -100, 67, 36); quad(177, -100, 135, 46, 173, 48, 207, -90); popMatrix(); popMatrix(); fill(245, 245, 245, this.rectOpacity); //rect(0, 439, 600, 180); this.line1 /= 1.2; if(this.line1 < 30){ this.khantoberOpacity /= 1.04; } if(this.khantoberOpacity < 150){ this.y1 /= 1.1; } if(this.y1 < 100){ this.y2 /= 1.1; } if(this.y2 < 100){ this.y3 /= 1.1; } if(this.y3 < 100){ this.y4 /= 1.1; } if(this.y4 < 25){ this.rectOpacity /= 1.5; this.chesterOpacity /= 1.04; } if(this.chesterOpacity < 150){ this.line2 /= 1.2; } }; var TitleCard = new titleCard(); /** Camera - keeps track of the key movements / var myCamera = function(){ this.x = 300; this.y = 500; this.rot = 0; this.rotVel = 0; this.rotMaxVel = 20; this.rotSpeed = 0.8; this.moveVel = 0; this.moveMaxVel = 5; this.moveSpeed = 1.3; }; myCamera.prototype.rotate = function() { if(keys[LEFT]){ this.rotVel += this.rotSpeed; } if(keys[RIGHT]){ this.rotVel -= this.rotSpeed; } this.rotVel /= 1.1; this.rotVel = constrain(this.rotVel, -this.rotMaxVel, this.rotMaxVel); this.rot += this.rotVel; }; myCamera.prototype.move = function() { if(keys[UP]){ this.moveVel += this.moveSpeed; } if(keys[DOWN]){ this.moveVel -= this.moveSpeed; } this.moveVel /= 1.1; this.moveVel = constrain(this.moveVel, -this.moveMaxVel, this.moveMaxVel); this.x += sin(this.rot) this.moveVel; this.y += cos(this.rot) * this.moveVel; }; var Camera = new myCamera(); /** Put it all together / draw = function() { background(245, 245, 245); pushMatrix(); translate(Camera.x, Camera.y); //rotate(Camera.rot); translate(-300, -500); TitleCard.draw(); fill(25); textFont(fonts.bold, 36); text('CHALLENGERS', 915, 100); text('ABOUT KHANTOBER', 247, 793); text('ABOUT CHESTER', -385, 88); textFont(fonts.main, 16); textAlign(LEFT, CENTER); text('+ Khantober is a challenge, not a competition. If you accept the challenge of Khantober, you will:\n\n+ Try to make a quality program every week of October.\n\n+ You will be placed on a day of the week (tell me if you have a preference). On that day, you will release your weekly program.\n\n+ You can subscribe to the Featured Programs thread - I will be choosing programs that I think are cool and post them on there!\n\n+ Your name will be put on the Challengers section for all to see!\n\n+ This is the ELEVENTH year of Khantober!', 60, 745, 500, 500); text('Hi there! I\'m Chester Banks, the creator of the annual Khantober challenge. I\'ve been hosting this challenge for over 10 years.\n\nThroughout my time on Khan Academy, I\'ve really enjoyed both the creative, visual side of Processing JS and the logical, technical side that always comes with coding.\n\nI\'ve made over 40 games on here - Legend of the Last Ninja, Fly Home, and Dig Deep are some of my favorites.\n\nAs a kid, Khan Academy helped me get my start in coding. Now I\'ve got a degree in Computer Science and am working as a web designer! I get to use those skills of design and programming together every day and it\'s pretty awesome.\n\nNever stop learning and always try new things - you never know what could turn into a lifelong passion!', -537, 66, 411, 550); textAlign(LEFT, TOP); textFont(fonts.main, 16); pushMatrix(); translate(748, 42); for(var i = 0; i < CHALLENGERS.length; i++){ pushMatrix(); translate(floor(i / 21) 253, -440 * floor(i / 21)); text((i + 1) + ' ✦ ' + CHALLENGERS[i], 40, 90 + i * 21); popMatrix(); } popMatrix(); pushMatrix(); translate(-1000, 1000); image(getImage('avatars/mr-pink'), 0, 0, 60, 60); text('sup', 20, 77); popMatrix(); logo(300, -300, 2); popMatrix(); leaf(300, 497, 0.15, 0.15, -41 - Camera.rot, color(35, 35, 35)); /* Camera settings / Camera.rotate(); Camera.move(); }; /* Detect user events */ keyPressed = function(){ keys[keyCode] = true; }; keyReleased = function(){ keys[keyCode] = false; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNuZ5d_cCww
Votes	51
Spin-Offs	3
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Chester Banks
Author Name	chesterbanks
Author ID	kaid_910220310264858588057640
Author Profile Access	PUBLIC

Archive Data

Added	3 months ago, 1727789199908
Updated	3 months ago, 1727801614456
Source Deleted	unknown