Viewing Program

Program Data

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

Title	NitOwl007's Subscription Page
ID	6082510550433792
Created	6 years ago, 1567703003854
Updated	5 years ago, 1597269547234
Code	//ATTENTION: Do not use any of this code without my permision, please. Thank you rectMode(CENTER); imageMode(CENTER); noStroke(); smooth(); var page = "home"; var grassCount = 600; var grassX = [grassCount]; var grassY = [grassCount]; var grass2X = [grassCount]; var grass2Y = [grassCount]; var grass3Y = [grassCount]; for(var i = 0; i < grassCount; i++) { grassX[i] = random(-10, 500); grassY[i] = random(0, 48); grass2X[i] = random(-5, 5); grass2Y[i] = random(463, 471); grass3Y[i] = random(408, 483); } var xPositions = []; var yPositions = []; var speeds = []; var sizes = []; var direction = []; for (var j = 1; j < 20; j++) { xPositions.push(random(0, 600)); yPositions.push(random(-18, 540)); speeds.push(random(0.6, 2.0)); sizes.push(random(0.09, 0.24)); direction.push(random(0, 360)); } var button = function(buttonX, buttonY, buttonWidth, buttonHeight, buttonText, pageGoTo) { fill(38, 38, 38); stroke(222, 183, 129); strokeWeight(2); rect(buttonX, buttonY, buttonWidth, buttonHeight, 10); textFont(createFont("Times Bold Italic"), buttonHeight / 2 + 4); textAlign(CENTER); fill(158, 158, 158); text(buttonText, buttonX + 2, buttonY + 9); if(mouseX > buttonX - buttonWidth/2 && mouseX < buttonX + buttonWidth/2 && mouseY > buttonY - buttonHeight/2 && mouseY < buttonY + buttonHeight/2) { cursor("pointer"); fill(255, 40); rect(buttonX, buttonY, buttonWidth, buttonHeight, 10); if(mouseIsPressed){ page = pageGoTo; } } noStroke(); }; var drawTree = function(x, y, sx, sy, r, c) { pushMatrix(); translate(x, y); rotate(r); scale(sx, sy); fill(c); beginShape(); vertex(0, 396); bezierVertex(45, 362, 15, 333, 15, 327); bezierVertex(13, 255, 41, 266, 45, 231); bezierVertex(59, 218, 37, 201, 0, 189); vertex(0, 186); bezierVertex(17, 185, 16, 189, 33, 194); bezierVertex(49, 185, 44, 156, 25, 164); bezierVertex(31, 152, 50, 155, 52, 178); bezierVertex(41, 206, 50, 187, 56, 203); bezierVertex(82, 176, 70, 175, 99, 130); bezierVertex(104, 109, 110, 118, 81, 85); bezierVertex(50, 47, 59, 28, 72, 16); bezierVertex(63, 38, 56, 47, 95, 80); vertex(108, 94); bezierVertex(111, 58, 142, 53, 140, 53); bezierVertex(137, 54, 173, 49, 165, 81); bezierVertex(157, 58, 143, 54, 121, 81); bezierVertex(118, 96, 123, 96, 122, 110); bezierVertex(124, 111, 120, 147, 107, 152); bezierVertex(104, 157, 120, 158, 120, 159); bezierVertex(159, 156, 175, 161, 193, 152); bezierVertex(204, 148, 220, 147, 213, 121); bezierVertex(207, 109, 191, 93, 177, 117); bezierVertex(177, 92, 200, 96, 210, 103); bezierVertex(236, 127, 222, 140, 218, 150); bezierVertex(209, 158, 209, 169, 177, 171); bezierVertex(209, 186, 198, 221, 176, 226); bezierVertex(203, 204, 184, 187, 171, 181); bezierVertex(155, 176, 128, 161, 79, 211); bezierVertex(65, 251, 65, 248, 64, 279); bezierVertex(119, 269, 126, 283, 161, 289); bezierVertex(213, 317, 229, 312, 245, 308); bezierVertex(247, 302, 258, 293, 239, 279); bezierVertex(278, 302, 253, 323, 246, 320); bezierVertex(159, 325, 188, 304, 129, 303); bezierVertex(159, 324, 188, 340, 206, 340); bezierVertex(239, 339, 242, 340, 264, 360); bezierVertex(239, 347, 234, 345, 207, 350); bezierVertex(167, 347, 159, 337, 145, 330); bezierVertex(126, 315, 132, 318, 101, 300); bezierVertex(92, 295, 73, 302, 55, 311); bezierVertex(64, 328, 81, 351, 75, 360); bezierVertex(130, 361, 120, 351, 188, 390); bezierVertex(158, 387, 105, 356, 106, 373); bezierVertex(134, 392, 116, 379, 160, 401); bezierVertex(175, 417, 116, 387, 99, 374); bezierVertex(91, 374, 82, 367, 75, 381); bezierVertex(78, 407, 65, 406, 71, 422); endShape(); popMatrix(); }; var drawLeaf = function(x, y, sx, sy, r, c) { pushMatrix(); translate(x, y); rotate(r); scale(sx, sy); fill(c); beginShape(); vertex(-35, -6); vertex(-68, -6); vertex(-58, -12); vertex(-81, -18); vertex(-46, -35); vertex(-59, -40); vertex(-33, -44); vertex(-48, -55); bezierVertex(-41, -55, -12, -75, 30, -55); vertex(51, -97); vertex(58, -97); vertex(36, -53); bezierVertex(63, -29, 63, -30, 76, 0); vertex(58, 0); vertex(72, 26); vertex(55, 27); bezierVertex(58, 40, 69, 44, 64, 77); vertex(56, 67); bezierVertex(53, 58, 62, 70, 49, 88); vertex(37, 57); vertex(31, 70); vertex(17, 24); vertex(7, 77); vertex(1, 57); vertex(-7, 71); vertex(-57, 106); vertex(-58, 70); vertex(-62, 73); vertex(-53, 31); vertex(-61, 36); vertex(-44, 9); endShape(); popMatrix(); }; var drawOwl = function(x, y, sx, sy, r, c) { pushMatrix(); translate(x, y); rotate(r); scale(sx, sy); fill(20); beginShape(); vertex(-58, -17); bezierVertex(-65, -15, -81, -46, -54, -75); bezierVertex(-67, -89, -70, -129, -35, -95); bezierVertex(-25, -89, -13, -94, 11, -93); bezierVertex(45, -122, 48, -100, 36, -86); bezierVertex(39, -62, 52, -82, 49, -28); bezierVertex(82, -19, 98, 35, 87, 32); bezierVertex(83, 54, 85, 47, 92, 77); bezierVertex(83, 65, 104, 83, 82, 99); vertex(86, 113); vertex(82, 114); bezierVertex(92, 133, 72, 133, 59, 127); bezierVertex(65, 133, 41, 111, 25, 93); vertex(28, 107); vertex(9, 95); vertex(-6, 107); vertex(-10, 98); vertex(-21, 99); vertex(-23, 89); vertex(-40, 106); vertex(-45, 104); vertex(-46, 99); vertex(-55, 100); vertex(-60, 95); vertex(-56, 84); vertex(-32, 72); bezierVertex(-54, 45, -81, -3, -58, -17); endShape(); fill(0); ellipse(-30, -58, 28, 23); ellipse(13, -58, 28, 23); fill(199, 116, 0); ellipse(-30, -58, 19, 17); ellipse(13, -58, 19, 17); fill(0); ellipse(-30, -58, 16, 14); ellipse(13, -58, 16, 14); fill(255); ellipse(-32, -60, 7, 5); ellipse(11, -60, 7, 5); popMatrix(); }; var grassMovement = function() { //darker grass land noStroke(); fill(31, 28, 26); rect(250, 545, 500, 116); ellipse(412, 499, 262, 61); ellipse(171, 512, 331, 61); //grass fill(31, 28, 26); for(var i = 0; i < 600; i++){ pushMatrix(); translate(grassX[i], grassY[i]); beginShape(); vertex(0, 498); bezierVertex(grass2X[i], grass2Y[i], 15, 446, 39 + sin(frameCount * 3) * 9, grass3Y[i]); bezierVertex(14, 450, 6, 467, 1, 499); endShape(); popMatrix(); } }; var fallingLeaves = function() { for (var i = 0; i < xPositions.length; i++) { noStroke(); drawLeaf(xPositions[i] + sin(frameCount * speeds[i]) * sizes[i], yPositions[i], sizes[i], sizes[i], direction[i]+sin(frameCount * 1) * 89, color(84, 80, 70)); yPositions[i] = (yPositions[i] + speeds[i]) % height; } }; var drawMoon = function() { background(59, 55, 53); //glow for the moon for(var i = 0; i < 24; i++) { noStroke(); fill(232, 209, 183, 8); ellipse(132, 132, 30 * i, 30 * i); } //moon fill(241, 210, 153); ellipse(132, 132, 170, 170); //highlight on the moon for(var i = 0; i < 10; i++) { noStroke(); fill(255, 13); ellipse(132, 132, 14 * i, 14 * i); } // fill(241, 210, 153); }; drawMoon(); //trees in the background drawTree(205, 229, 0.6, 0.6, 0, color(59, 56, 54)); drawTree(220, 229, -0.6, 0.8, -9, color(59, 56, 54)); //trees on the far right in the background drawTree(484, 259, -0.4, 0.4, 8, color(54, 50, 48)); drawTree(575, 140, -0.5, 0.6, 16, color(36, 34, 32)); //tree on the left drawTree(0, 0, 1, 1, 0, color(51, 48, 46)); drawOwl(128, 244, 0.35, 0.36, 0); //hills behind the grass fill(51, 48, 46); beginShape(); vertex(-15, 387); vertex(70, 416); bezierVertex(73, 427, 108, 460, 158, 447); bezierVertex(243, 433, 82, 463, 246, 456); bezierVertex(308, 433, 290, 441, 343, 421); bezierVertex(331, 433, 290, 441, 343, 430); bezierVertex(401, 397, 393, 404, 418, 398); bezierVertex(439, 396, 410, 397, 401, 414); bezierVertex(477, 385, 475, 360, 501, 350); vertex(600, 511); vertex(0, 513); endShape(); var graphicBackground = get(0, 0, width, height); var home = function() { image(graphicBackground, width/2, height/2); button(396, 140, 147, 50, "About", "about"); button(396, 240, 147, 50, "FAQs", "faqs"); button(396, 340, 147, 50, "Subscribe", "subscribe"); button(396, 440, 147, 50, "Graphics", "graphics"); fallingLeaves(); grassMovement(); }; var about = function() { drawMoon(); drawTree(205, 46, 1.0, 1.0, 0, color(59, 56, 54)); drawTree(181, -7, -0.9, 0.9, -16, color(59, 56, 54)); pushMatrix(); translate(276, -195); rotate(52); fallingLeaves(); popMatrix(); grassMovement(); fill(0, 130); rect(250, 300, 363, 600); fill(247, 212, 163); textSize(20); textAlign(CORNER); text("I've been on KA for about 2 years, at the time only using it for school/math. About 8 months ago I was interested in HTML and finished the course within a month, and attempted to learn JS as well. I have now finished 100% of HTML/CSS, 100% of Intro to JS and 87% of Advanced JS: Games & Visualizations. \n\nMy goal on KA is to learn as many computer programming languages, and then move on to something more advanced. Meanwhile also help beginner programmers, and help KA continue to grow stay a great community. ", 111, 85, 300, 500); button(42, 566, 147, 50, "Back", "home"); }; var FAQs = function() { drawMoon(); drawOwl(421, 307, -0.35, 0.36, 0); drawTree(561, 86, -0.9, 0.9, 0, color(51, 48, 46)); drawTree(209, 250, -0.8, 0.8, 0, color(64, 60, 57)); drawTree(-97, 250, 0.8, 0.8, -41, color(48, 43, 40)); pushMatrix(); translate(276, -195); rotate(52); fallingLeaves(); popMatrix(); grassMovement(); fill(0, 130); rect(250, 300, 363, 600); fill(247, 212, 163); textSize(16); textAlign(CORNER); text("How do I get something on the HL? \n\nOkay so this question is asked a lot and some new programmers don't fully understand how the hot list works. New programs only go on the hot list, programs that have just recently been made. After you finish a project, copy and paste the code into a new program then save it, so it's considered a new program, and hopefully it will get a chance of getting to the HL. The faster it gets votes the quicker it will reach the top. In my opinion subpages really help get votes, consequently more people can see your project.\n\nWhere is a good place to start learning programming languages on KA?\n\nWell it really depends on what you are going for, if you want to learn programming for web development I would recommend taking the Intro to HTML/CSS, however, KA doesn't teach a lot about it, though, it is a great start for beginners. If you want to make programs on KA, I would recommend taking the Intro to JS course on KA. You can find all of the programming courses on KA here. [click]", 111, 43, 300, 548); button(42, 566, 147, 50, "Back", "home"); }; var subscribe = function() { drawMoon(); pushMatrix(); translate(276, -195); rotate(52); fallingLeaves(); popMatrix(); drawTree(-7, 242, 0.6, 0.6, 0, color(54, 50, 48)); drawTree(616, 355, -0.6, 0.6, 49, color(43, 39, 37)); grassMovement(); fill(0, 130); rect(250, 300, 363, 600); fill(247, 212, 163); textSize(20); textAlign(CORNER); text("Why sub?\n\nWell, why not? You'll get notified each time I release something new!\n\nHow to sub?\n\nEasy! Just go in the Tips & Thanks and post something less than 3 characters in the sub thread, if you have any questions or concerns about subscribing, feel free to ask me.", 111, 129, 300, 500); button(42, 566, 147, 50, "Back", "home"); }; var graphics = function() { drawMoon(); fallingLeaves(); grassMovement(); fill(0, 130); rect(250, 300, 363, 600); fill(247, 212, 163); textSize(18.5); textAlign(CORNER); text("Some good tips and improvements for graphic artist:\n\nWhenever doing graphics, you want to keep in mind the colors, theme, details, and light. Now it really matters what kind of graphics you are doing, but whenever doing realistic graphics, the colors are very important, you usually don't want to use bright/fake colors.\nAnother thing to keep in mind is the theme, what are you going for? Try to have a good representation about how you want your graphic to turn out.\nDetails are very important, it's the thing that makes your graphic look more real/complex.\nLastly you want to have only one light source. Know where the light is coming from and then you can add shadings based off of that, and it will really make your graphics look more real.", 111, 48, 300, 700); button(42, 566, 147, 50, "Back", "home"); }; draw = function() { cursor("default"); if(page === "home"){ home(); } if(page === "about"){about();} else if(page === "faqs"){FAQs();} else if(page === "subscribe"){subscribe();} else if(page === "graphics"){graphics();} }; mouseClicked = function() { if(page === "faqs" && mouseX > 250-350/2 && mouseX < 250+350/2 && mouseY > 540-100/2 && mouseY < 540+100/2){ println("https://www.khanacademy.org/computing/computer-programming"); } };
Folds	14,20,26,32,34,56,57,114,115,155,156,208,209,230,231,237,238,261,297,308,309,333,334,363,364,388,389,406
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgM7FrYDnCgw
Votes	176
Spin-Offs	1
Type	PJS
Width	500
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	NitOwl007 [INACTIVE]
Author Name	OnlyOwl1
Author ID	kaid_607413902639112014082643
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739453297322
Updated	10 months ago, 1739453304392
Source Deleted	unknown