![\"example\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P01-Hello-World/assets/example.png\" "\\"example\\"")
\n We are excited to have you in the program and we look forward to helping you ramp up your programming skills. :)
"},{"id":"T0E6OlNlY3Rpb24tMTIwMDY=","title":"Assignment Formatting","htmlContent":"As you read through the assignments here, you'll see different kinds of formats for drawing your attention to key areas.
Along the way, important information will be highlighted in an...
\nInformation box.
\nAny time you need to add some code or complete an important step, you'll find it in an...
\nAction box.
\nAfter you've come up with your own answer, you can click to expand the...
\nSolution box.
\nAlong the way and at the end of the tutorial, you can push yourself by tackling all of the...
\nbonus challenges in boxes like this.
\nHow to get familiar with the program structure and get the most out of Ramp.
Each assignment in Ramp starts with a selection of videos from The Coding Train's p5.js Tutorial Playlist.
We strongly recommend watching all of the videos at the top of each assignment to best prepare for completing the code challenges for that assignment.
The code challenges are designed to allow you to practice and extend your understanding of the concepts covered in the videos. Often, the solution to a code challenge relies upon using the same exact coding technique from one of the videos with a few small changes.
\nNote: Students who choose to tackle the code challenges without watching the videos first may spend time working on solutions that are more complicated than they need to be.
\nIn each video, there are code examples that you may want to follow along with for greater understanding.
Under each video in the instructions will be a link to a walkthrough project that you can use to follow along with the video.
At the top of each assignment instruction page will be a link for you to access the starter code. Before you start coding, it's always good to look through the project and see how much of it you already understand or to think of questions that you have that might be answered by the assignment.
Each assignment is set up like a web page, that can use HTML, CSS, and Javascript, with the following files:
index.html // HTML file, web page setup (edit carefully!)\nsketch.js // JS file, where you will write your code\nhelpers.js // JS file, helper code (DO NOT EDIT)\n
The majority of your code will be added to sketch.js.
\nIn some assignments there will be code in a helper.js file that helps make the program more beginner friendly but that you don't need to interact with directly. Feel free to look at the contents, but please do not make edits there.
Complete all of the challenges in each assignment by reading the directions carefully and checking that both your code and the end result meet all of the requirements as given.
All of the assignments in Ramp are written in Javascript (JS) and use the p5.js library, which provides useful code features packaged together for convenient use.
All of the available p5.js functions and features are described in the documentation at http://p5js.org/reference/. Click on the name of a function to see examples and explanations of how to use it.
Check out this helpful guide to using documentation, written by a former Make School student.
Like in science experiments where you form a hypothesis, run an experiment, and then evaluate the results - programmers can follow a similar pattern to help check their work as they go:
What if you are stuck?
Read tips in How to Ask for Coding Help for Beginners, written by a former Make School student.
As a Ramp participant, we also have a few options for getting help from members of the Make School community, listed below.
Join the Make School Online Learning Community Discord by visiting https://make.sc/join-discord.
Once you've joined the Make School Discord community, you can post a question in the #ramp-support channel to get peer support. Our community mentors won't give you the exact answers, but are always happy to help you get back on track! :)
Office hours are hosted by volunteer mentors and dependent on volunteer availability. Upcoming office hour times will be shared in the #ramp-support channel on Discord.
Once you are finished with an assignment you can share a link to your finished project to #ramp-support on Slack to request a peer review for feedback or tips to further improve your code.
\nNote: Peer reviews are all done by volunteers and there is no guarantee of how long it may take to get a reply (though we hope not long!). There is no need to wait for feedback before moving on to the next assignment if you feel ready!
\nEmail ramp@makeschool.com for any other questions you have.
Good luck, and happy coding as you tackle your first code challenges in the next section! :)
"}]},"next":{"id":"T0E6OlBhZ2UtMjQwNA==","slug":"hello-world","title":"0.0 Hello World"},"previous":{"id":"T0E6OlBhZ2UtMjQwNA==","slug":"hello-world","title":"0.0 Hello World"}},{"id":"T0E6OlBhZ2UtMjQwNA==","title":"0.0 Hello World","slug":"hello-world","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwMDg=","title":"0.0 Hello World","htmlContent":"\nAccess the assignment 0.0 Hello World.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
"},{"id":"T0E6OlNlY3Rpb24tMTIwMDk=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's Hello World
in sketch.js
\nLocate backgroundColor = color(#, #, #); inside of sketch.js and change the 3 number values to create a custom color.
in sketch.js
\nFind the ? in sketch.js and replace them with your own answers.
Make sure your answers work with the text on the screen:
"},{"id":"T0E6OlNlY3Rpb24tMTIwMTI=","title":"Challenge 4: Answer a question using the print function","htmlContent":"in sketch.js
Question: What inspired you to learn to code?
\nType your answer inside of a print() function at the bottom of the file.
View the console tab in the results panel to check your output:
"},{"id":"T0E6OlNlY3Rpb24tMTIwMTM=","title":"Bonus 1: Answer another question","htmlContent":"in sketch.js
\nAdd a new print statement and answer the question \"What would you like to help create in the world?\"
\nAccess the assignment 0.1 Shapes and Colors.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMTY=","title":"Watch Video 1.4 - Color","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMTc=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's Colorful Creatures
in sketch.js
Create a creature by combining multiple shapes to create a more complex drawing.
\nLook up how to use new functions by viewing the Shape section in the p5.js Reference
\nAs you are making your creatures you should notice that the location 0,0 is in the top left corner and x and y values get bigger as you move down and to the right.
\nFor help getting exact x and y values for your shapes, click on the canvas, then look in the console to see the values for where you clicked.
\ncreate one creature on each side of the center line
\n\nUse 4 or more different shape functions (rect , line , ellipse , arc , triangle , quad , etc)
\nUse 4 or more different colors in fill and/or stroke
You should now have two colorful creatures on the canvas:
"},{"id":"T0E6OlNlY3Rpb24tMTIwMTk=","title":"Bonus 1: Give your creatures names","htmlContent":"in sketch.js
\nAdd more code to display your creature names - do not change the existing text or modify the helper.js file.
\nAccess the assignment 0.2 Variables.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMjE=","title":"Watch Video 2.2 - Variables (make your own)","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMjI=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
\nUse line to add 3 more lines to create the triangle top of the arrow
Arrow size and shape should be the same no matter where you move the mouse. Customize the color and line size to your liking.
"},{"id":"T0E6OlNlY3Rpb24tMTIwMjQ=","title":"Challenge 3: Create a variable for the background color","htmlContent":"in sketch.js
\nDeclare a custom variable name at the top of the file:
\nvar backgroundColor;\n\n
\nUse the color function to create a color object and assign it to the backgroundColor inside of setup.
backgroundColor = color(0);\n\n
Be sure to update your color to use 3 values - for Red, Green, Blue - not just a single grayscale value.
\n\nPass your newly created color variable to the background function instead of 200
Be sure to update your color to use 3 values - for Red, Green, Blue - so that your background is no longer grey.
\nThe color function doesn't work before the setup function, you will get an error if you try to use it at the top when you declare your variable.
in sketch.js
\nDraw a creature made of at least 2 shapes and 2 colors.
\n\nDeclare a custom variable moveX at the top of sketch.js and assign a starting value of 10
For numbers you can assign the starting value at the top because numbers are always available and don't need to wait until the setup function
\nUse your custom moveX variable as the x location for drawing your custom creature
Example of converting your creature to use an moveX variable:
// change this:\nrect(100, 100, 50, 75);\ncircle(120, 30, 80, 75);\n\n// to this:\nrect(moveX, 100, 50, 75);\ncircle(moveX + 20, 30, 80, 75);\n\n
\nIncrement moveX by 1 inside of the draw function so that your creature moves across the screen.\nPlease use only 1 variable for your entire creature.
Ensure you keep the background function at the top of draw, we want the creature to move, not for it to smear color across the canvas (also do not move it to the mousePressed function)
Creature moving from left to right across the canvas:
"},{"id":"T0E6OlNlY3Rpb24tMTIwMjY=","title":"Bonus 1: Colors that change as you move the mouse","htmlContent":"in sketch.js
\nCreate another creature and use creature colors that change based on mouse location
\nThe creature does not need to move, but it's color should change dynamically as you move the mouse around the canvas.
The colors should not change if the mouse is not moving, and should not flash rapidly (don't use the random function).
\nAccess the assignment 0.3 Objects.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMjg=","title":"Watch Video 2.5 - The random() Function","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMjk=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
\nDeclare 2 vars called rightCreature and leftCreature at the top of the file.
\nIn setup, assign rightCreature and leftCreature to objects with the following 5 properties inside of them:
![\"console\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P01-Hello-World/assets/console.png\" "\\"console\\"")
\n ![\"getting](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P01-Shapes-Colors/assets/get_x_y_values.png\" "\\"Get")
\n ![\"example](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P01-Shapes-Colors/assets/example.png\" "\\"example")
\n ![\"example](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P02-Variables/assets/line_arrow.png\" "\\"example"){kind=icon}
\n ![\"custom](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P02-Variables/assets/background.png\" "\\"custom")
\n ![\"moving](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P02-Variables/assets/moving_creature.png\" "\\"moving")
\n ![\"moving](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P02-Variables/assets/moving_creature_2.png\" "\\"moving")
\n color1color2heightwidthxOffset\nGive rightCreature a positive xOffset number and leftCreature a negative xOffset
\nRemember, the color function doesn't work before the setup function, you will get an error if you try to declare and assign values to the objects all at the top.
in sketch.js
\nUse mouseX and xOffset so that rightCreature and leftCreature both follow the mouse but to the left/right side by a distance of xOffset
When drawing the creatures, be sure to:
x and y directions.It should look like your two creatures are staying in the same place on the cloud as you move the mouse around:
"},{"id":"T0E6OlNlY3Rpb24tMTIwMzI=","title":"Challenge 4: Click to change the sky color","htmlContent":"in sketch.js
\nAdd the mousePressed function at the bottom of the file.\nAdd print(\"clicked\") inside so that you can see evidence in the console that your function was correctly called.
\nAlways double check that you are adding new functions in the correct location.\nIf you accidentally create it inside of another function, then the program may not be able to correctly locate and use it and you may get an error.
\n\nInside of mousePressed, add a variable called randomRed and use the random function to assign a random number between 0 and 255.
\nInside of mousePressed, call the setRed function on skyColor to change it's red amount to randomRed.\n(Note: don't use the exact example code, just use it as a guide)
The redness of the sky should now change color each time you click the mouse:
"},{"id":"T0E6OlNlY3Rpb24tMTIwMzM=","title":"Bonus 1: Explain the difference","htmlContent":"Use print() inside of setup to answer:
![\"cloud](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P03-Objects/assets/cloud_creatures.png\" "\\"cloud")
\n ![\"sky](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P03-Objects/assets/sky_color_1.png\" "\\"sky")
\n ![\"sky](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P03-Objects/assets/sky_color_2.png\" "\\"sky")
\n value == 5 and value = 5?\nMake your creatures dance back and forth when you click the mouse
\nUntz untz untz!
"}]},"next":{"id":"T0E6OlBhZ2UtMjQwOA==","slug":"conditionals","title":"0.4 Conditionals"},"previous":{"id":"T0E6OlBhZ2UtMjQwOA==","slug":"conditionals","title":"0.4 Conditionals"}},{"id":"T0E6OlBhZ2UtMjQwOA==","title":"0.4 Conditionals","slug":"conditionals","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwMzU=","title":"0.4 Conditionals","htmlContent":"\nAccess the assignment 0.4 Conditionals.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMzY=","title":"Watch Video 3.2 - The Bouncing Ball","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMzc=","title":"Watch Video 3.3 - Else and Else if, AND and OR","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMzg=","title":"Watch Video 3.4 - Boolean Variables","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwMzk=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
Your beast should move right until it reaches the edge of the canvas, then change direction and move left until it reaches the edge of the canvas, then change direction again, etc.
\nFirst, modify beast.x in the draw loop to get the beast moving from left to right.
\nUse an if statement to update beast.speed to create bouncing behavior
Beast bouncing:
\nTry to use only a single if statement, using && and/or || as needed.
in sketch.js
Dynamically change beast.color to match the color of the background as it moves.
\nCreate an if statement to correctly update beast.color
beast.color should be:
![\"bounce](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/bounce_0.png\" "\\"bounce")
\n ![\"bounce](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/bounce_1.png\" "\\"bounce")
\n color1 while crossing the first third of the background![\"camo](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/camo_0.png\" "\\"camo")
\n color2 in the middle third![\"camo](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/camo_1.png\" "\\"camo")
\n color3 in the last third\nFormat your logic so that colors update correctly even if the canvas is resized to be more or less wide. Would your code above still work if you did createCanvas(200, 800) or createCanvas(500, 100)?
in sketch.js
To prepare for Challenge 5, you will need to find out when the beast is moving towards the mouse and when it is moving away from the mouse.
This can be done using two pieces of information:
There are four possible combinations of these two pieces of information.
Beast moving right and mouse on right:\n\n ![\"chasing](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/chasing_right.png\" "\\"chasing")
\n
Beast moving right and mouse on left:\n\n ![\"fleeing](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/fleeing_right.png\" "\\"fleeing")
\n
Beast moving left and mouse on left:\n\n ![\"chasing](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/chasing_left.png\" "\\"chasing")
\n
Beast moving left and mouse on right:\n\n ![\"fleeing](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/fleeing_left.png\" "\\"fleeing")
\n
In two of the four combinations the beast is moving towards the mouse (\"chasing\") and in two the beast is not (\"fleeing\").
\nCreate a boolean variable called movingTowardsMouse.
movingTowardsMouse should be set to true when:
![\"camo](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P04-Conditionals/assets/camo_2.png\" "\\"camo")
\n beast is moving to the right AND the mouse is to the right of the beast OR beast is moving to the left AND the mouse is to the left of the beast\nfalse\n\nUse an if statement to assign a boolean value to movingTowardMouse
Hint: you can tell which direction beast is moving based on it's speed!
in sketch.js
movingTowardsMouse is true, the message should say \"Chasing\"movingTowardsMouse is false, the message should say \"Fleeing\"\nUse an if statement to update beast.message to say whether it is chasing or fleeing the mouse
(Review the images in Challenge 4 to see how the message should appear in each situation.)
"},{"id":"T0E6OlNlY3Rpb24tMTIwNDQ=","title":"Bonus 1: Add vertical movement to the beast","htmlContent":"in sketch.js
\nUpdate your code so that beast bounces both vertically and horizontally across the canvas.
Ensure that beast still bounces horizontally across the entire width of the canvas.
\nAccess the assignment 0.5 Loops.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNDY=","title":"Watch Video 4.2 - Nested Loops","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNDc=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
\nUse marcher.speed to update marcher.x
\nUpdate marcher.speed so that marcher changes directions at the edges of the canvas
Marcher moving:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNDk=","title":"Challenge 3: Draw clones of the marcher in a vertical row","htmlContent":"in sketch.js
Use a while loop to create a squad of clones that will along with marcher.
\nDefine a new var named cloneY for the loop to use, and assign it a starting value of marcher.y plus some spacing.
\nIn the while loop, draw clones that are spaced out until the end of the canvas. Make them a different color than the marcher.
Clones should all be evenly spaced and moving back and forth together:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNTA=","title":"Challenge 4: Draw a tile floor","htmlContent":"in sketch.js
\nUse a nested for loop to draw colored tiles across the whole screen.
Use the same size for spacing and drawing your tiles so that there are no gaps between tiles where the backgroundColor can show through:
in sketch.js
\nGive your tiles a gradient color effect.
\nEach tile should have a unique non-changing color different from the others around it.
"}]},"next":{"id":"T0E6OlBhZ2UtMjQxMA==","slug":"functions0","title":"0.6 Functions"},"previous":{"id":"T0E6OlBhZ2UtMjQxMA==","slug":"functions0","title":"0.6 Functions"}},{"id":"T0E6OlBhZ2UtMjQxMA==","title":"0.6 Functions","slug":"functions0","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwNTI=","title":"0.6 Functions","htmlContent":"\nAccess the assignment 0.6 Functions.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNTM=","title":"Watch Video 5.2 Function Parameters and Arguments","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNTQ=","title":"Watch Video 5.3 Functions and Return","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNTU=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
The growOrReset function calls other functions depending on the situation.
\nThe growOrReset function should call plantGrow() if the mouse is on the right half of the canvas, and should call plantReset() if the mouse is on the left side.
\nUncomment growOrReset(); inside of draw
You can check in the console to see if plant.size is changing correctly:
in sketch.js
The drawPlant function needs to pass down it's x and y parameters to the other functions it calls.
\nInside of drawPlant, if plant.size is 0, call drawSeed, otherwise call both drawSprout and drawBloom. Don't forget to pass the required parameters!
\nUncomment the two lines calling drawPlant() inside of draw .
Watch the two plants grow and bloom:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNTg=","title":"Challenge 4: Implement the label function","htmlContent":"in sketch.js
The plantLabel function needs to return a string label.
\nBased on plant's current properties, return the correct string: \"seed\", \"growing\", or \"blooming\"
\nUncomment text(plantLabel(), 10, 20); inside of draw
You should now see correct labels in the upper left corner:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNTk=","title":"Bonus 1: Display a field of plants","htmlContent":"in sketch.js
\nDisplay a whole field of plants instead of just two.
\n\nAccess the assignment 0.7 Classes.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNjE=","title":"Watch Video 6.3 Constructor Arguments with Classes in Javascript","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNjI=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
\nAdd a new FancyFlower class with the same constructor arguments: x, y, and petalColor.
Use the PlainFlower class as a guide. Ensure that you are including all of the same properties in your FancyFlower class.
\nAdjust the values of the default and random default properties to your liking.
\nin sketch.js
\nIn draw, call new FancyFlower() to create two new flower objects - flowerThree and flowerFour.\nPass in unique colors and good x, y values so that they will be nicely spaced out.
\nUncomment garden = [flowerOne, flowerTwo, flowerThree, flowerFour]; in draw to include your new flowers in the garden array.
You should now see two new flowers growing alongside the original flowers:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNjU=","title":"Challenge 4: Design a custom bloom","htmlContent":"in sketch.js
Right now your FancyFlower class doesn't have a custom drawBloom function like the PlainFlower class does. If you look inside the drawPlant function you can see that it will call drawDefaultBloom(flower) instead, which just draws a simple ellipse.
if (flower.drawBloom) { // check if the function exists\n flower.drawBloom(); // call the function\n} else {\n drawDefaultBloom(flower); // call the default helper instead\n}\n\n
\nAdd a custom drawBloom function to FancyFlower so that it can create it's own custom bloom shape.
![\"marcher](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P05-Loops/assets/marcher_1.png\" "\\"marcher")
\n ![\"marcher](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P05-Loops/assets/marcher_2.png\" "\\"marcher")
\n ![\"clones\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P05-Loops/assets/clones.png\" "\\"clones\\"")
\n ![\"tile](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P05-Loops/assets/tile_floor.png\" "\\"tile")
\n ![\"gradient](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P05-Loops/assets/gradient_colors.png\" "\\"gradient")
\n ![\"console\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P06-Functions/assets/console.png\" "\\"console\\"")
\n ![\"draw](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P06-Functions/assets/draw_plant.png\" "\\"draw")
\n ![\"seed\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P06-Functions/assets/seed.png\" "\\"seed\\"")
\n ![\"growing\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P06-Functions/assets/growing.png\" "\\"growing\\"")
\n ![\"blooming\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P06-Functions/assets/blooming.png\" "\\"blooming\\"")
\n ![\"field\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P06-Functions/assets/field.png\" "\\"field\\"")
\n ![\"new](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P07-Classes/assets/new_flowers.png\" "\\"new")
\n this.x, this.y, and this.bloomSize to properly place the bloom relative to the sprout.bloomSize is 0.PlainFlower!You should now have a garden with 4 flowers, all different colors, and with two different overall appearances:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNjY=","title":"Bonus 1: Custom sprouts and blooms","htmlContent":"\nNow that you have custom blooms for each class, make changes that give both classes custom seeds and custom sprouts in the same way.
\nThis challenge requires making updates to some of the existing functions.
"}]},"next":{"id":"T0E6OlBhZ2UtMjQxMg==","slug":"arrays","title":"0.8 Arrays"},"previous":{"id":"T0E6OlBhZ2UtMjQxMg==","slug":"arrays","title":"0.8 Arrays"}},{"id":"T0E6OlBhZ2UtMjQxMg==","title":"0.8 Arrays","slug":"arrays","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwNjc=","title":"0.8 Arrays","htmlContent":"\nAccess the assignment 0.8 Arrays.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNjg=","title":"Watch Video 7.2 Arrays and Loops","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNjk=","title":"Watch Video 7.3 Arrays of Objects","htmlContent":"Follow along with the video guide
"},{"id":"T0E6OlNlY3Rpb24tMTIwNzA=","title":"Challenge 1: Add your name","htmlContent":"in index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
The mousePressed function calls saveSpot but nothing happens yet. The goal is to save a spot that has the color that the canvas is when the mouse is clicked.
\nInside of saveSpot, create a new Spot using the current mouse location and currentColor().
You can add the new spot to the spots array using either the push or append functions.
Click a few times and then check the results of print(spots) in the console to see if new Spot objects are being added:
in sketch.js
Now you are saving spots, but not using them. Next, add code to display each one on the canvas.
\nUse a for loop to get each spot in spots and then call the show function on it.
Each time you click your mouse you should see a new colored spot where you just clicked:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNzM=","title":"Challenge 4: Get the last color","htmlContent":"in sketch.js
Right now the lastColor function is just returning a default value of white, that is being used to color the box in the upper left corner.
\nUpdate lastColor so that it returns the color of the most recently added spot. Return the default white when there are no spots yet.
There are a few steps that you can break this challenge into:
![\"custom](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P07-Classes/assets/custom_bloom.png\" "\\"custom")
\n ![\"console\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P08-Arrays/assets/console.png\" "\\"console\\"")
\n ![\"spot](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P08-Arrays/assets/spot_0.png\" "\\"spot")
\n ![\"spot](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P08-Arrays/assets/spot_1.png\" "\\"spot")
\n lastColor to be the value of the color property of the last spot\nIn programming, counting often starts at 0, especially when working with arrays.
\nWhen your logic is working correctly, the upper left square should correctly match the color of the most recently added spot:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNzQ=","title":"Bonus 1: Add functionality","htmlContent":"in sketch.js
\nUse 1 or more new array functions from https://p5js.org/reference/ to add new effects to your program.
\n\nAccess the assignment 0.9 Input, Output, and APIs.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
in sketch.js
\nModify the displayTitle function in sketch.js and add your name so that it says `YOURNAME's Joke Generator
in sketch.js
The assignColors function currently assigns backgroundColor and textColor to default starting values. The goal is to allow the user to type in color names or hex codes to assign colors to the background and text so we’ll need to add input fields for the user to type their preferred colors.
A helper function is already setup to create the first input - look through the starter code to find the function that you’ll need to call during setup.
\n2A Inside of setup, call the helper function that will add the color input elements to the page.
Once you re-run you should see the new text and input added below the canvas. You can type in it but the value is not being used. To access the value of the user’s input, you can reference it using dot notation value().
\n2B In the assignColors function, modify the first line so that the background color is set to inputBGColor.value().
Now you should see that the background color will change to match the color name or hex value that you type. Don’t forget to include the # at the start of your hex codes.
HINT: Right now, if there’s no user input for the color it will default to white. Can you think of how to give it your own custom color when there isn’t any user input yet?
Once you have things working for the background color, use it as your example and add another input for the user to enter a text color.
\n2C Uncomment the global variable inputTextColor, then use it to modify createColorInputs() to add another text and input element, finally update assignColors() to assign textColor to the new input value.
Confirm that you can now change both colors using the inputs:
HINT: Remember, it will default to white when there isn’t any user input at the start of the program. You can use || (or) to give a backup value to variables when the first option might be empty or null: var exampleVariable = checkForValue() || “defaultValue”.
in sketch.js
Now that the page looks nice, let’s get to the jokes. Soon we’ll implement calling the Jokes API for random jokes, but first we’ll add a sample joke for the page to load with.
\n3A Uncomment the global variable jokeInfo, then assign it in the setup function to an object with two properties category and joke.
You can use your own starting joke values, or this one from the “Pun” category - \"Oysters hate to give away their pearls because they are shellfish.\" xD
\n3B Find the two uses of the text function insides of displayJoke() and change it to use the new values on the jokeInfo object.
Check that your page is now Laugh-Out-Loud hilarious...
It’s looking so good, let’s give the user the ability to save the joke! Check out the save function in the p5.js reference.
\n3C Find the helper function that creates the “Save Joke” button and call it in setup. Then find the function called saveJoke and implement the p5.js save function to save the current canvas as a JPG.
NOTE: This function only works when website opened in another tab, not inside of the replit editor. Naviate to the public url located in the top of the output window:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNzk=","title":"Challenge 4: Call the Jokes API to generate new jokes on demand","htmlContent":"in sketch.js
The sample joke is of course toooootally hilarious, but just in case the user has a different sense of humor, let’s connect our page up to JokeAPI for more joke diversity.
\n4A Uncomment global variable jokeURL and assign a valid value to it in setup().
What's a valid URL?
\nTo get a valid URL, visit https://v2.jokeapi.dev/#try-it\nUse “default (json)” as the format\nCheck “single” for joke type (handling “twopart” jokes is a stretch challenge!)\nOnly get 1 joke at a time
\nNext we will use the httpGet function to call the API at the URL and get our joke response. The response is in JSON format, and you can see that it also has joke and category properties (in addition to others we aren’t using), so we’ll be able to save it directly to the jokeInfo object and the displayJoke function will work correctly.
\n4B Find the getNewJoke function. Inside of the httpGet code block, add code between the { and } to set jokeInfo equal to response. Then add a print(response) so that you can see the full return value in the console.
Re-run your program - you’ll see your starter joke still. Test your new function by calling it in the console and checking that it prints out the return value from calling the JokeAPI:
As the final final step we need 1 more button so that the user can click it to call the API for a new joke.
\n4C Modify the createButtons function to add a second button for calling the JokeAPI.
Enjoy generating and saving your favorite jokes!
"},{"id":"T0E6OlNlY3Rpb24tMTIwODA=","title":"Bonus 1: Explore other user inputs for colors","htmlContent":"in sketch.js
\nUse 1 or more other ways to collect user input for the color values. (Example: Check out ColorPickers ).
\nin sketch.js
\nExample: Update ‘displayJoke’ to handle “twopart” jokes.\nExample: Allow the user to select which category of jokes they want to generate.
\nNote:\nStart here if you are already comfortable with the fundamentals of programming (variables, objects, functions, etc) and are ready to take on the challenge of building a larger object-oriented programming (OOP) project.
If you need a refresher on coding fundamentals, or are less comfortable working with JavaScript and the p5.js library, you are encouraged to start at Level 0 instead (assignment 0.0 Hello World).
If you just completed Level 0, a hearty congratulations to you! There is a big jump in difficulty between Level 0 and Level 1, but you've got this. :)
Happy coding!
\nAccess the assignment 1.0 Hello OOP.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
\nYou can also always go back and refer to your previous assignments to remind yourself of how to do things!
\nin index.html
\nFind the h1 tags in index.html and add your name so that it says YOURNAME's...
in sketch.js
\nType your answer using the print function:
Question: What is the difference between a class and an instance?
\nView the console tab in the results panel to see your answer.
"},{"id":"T0E6OlNlY3Rpb24tMTIwODU=","title":"Challenge 3: Modify the Avatar constructor to take parameters","htmlContent":"in sketch.js
\nModify the Avatar constructor to take the following parameters\n- name\n- height\n- width\n- eyeColor\n- hairColor\n- hatColor
Remember that your constructor also needs to use the parameters to assign values.
"},{"id":"T0E6OlNlY3Rpb24tMTIwODY=","title":"Challenge 4: Create an instance of the Avatar class","htmlContent":"in sketch.js
Now you can create an instance of your Avatar class.
\nCreate an instance of your Avatar class.
Ensure that:\n- the instance is assigned to a global variable so you can access it in later steps.\n- you are passing in ALL of the required parameters.
"},{"id":"T0E6OlNlY3Rpb24tMTIwODc=","title":"Challenge 5: Add a show() function to the Avatar class","htmlContent":"in sketch.js
Add code so that your Avatar is visible on the canvas.
\nAdd a show() function to the Avatar class
Ensure that:\n- the show() function is using all 8 of the Avatar properties to control the appearance\n- you call show() on your avatar instance in the draw function
in sketch.js
\nAdd an updateLocation() function to the Avatar class that takes two parameters: newX and newY
Ensure that you:\n- Update the avatar's x and y values from the passed in parameters
\nCall your new updateLocation() function with parameter values so that your avatar is always at the mouse location
-
\nin sketch.js
\n- Give your avatar a catchphrase\n- Display the catchphrase on the canvas when the mouse is pressed\n- Use OOP to think about where your new code makes the most sense!
\nin sketch.js
\n- Modify your code so that avatars can have more than one catchphrase\n- Modify your code so that when the mouse is pressed, they speak one of their phrases at random
\n\nAccess the assignment 1.1 Build the Game of Life.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
\nYou can also always go back and refer to your previous assignments to remind yourself of how to do things!
\nInstructions will be ported over to live on this page in the future, but for now you can read the instructions here.
"}]},"next":null,"previous":null}]}},"page":{"id":"T0E6OlBhZ2UtMjQxMw==","title":"0.9 Input, Output, and APIs","slug":"io-api","sections":{"nodes":[{"id":"T0E6OlNlY3Rpb24tMTIwNzU=","title":"0.9 Input, Output, and APIs","htmlContent":"\nAccess the assignment 0.9 Input, Output, and APIs.
\nRemember to view the p5.js documentation as needed: http://p5js.org/reference/.
in sketch.js
\nModify the displayTitle function in sketch.js and add your name so that it says `YOURNAME's Joke Generator
in sketch.js
The assignColors function currently assigns backgroundColor and textColor to default starting values. The goal is to allow the user to type in color names or hex codes to assign colors to the background and text so we’ll need to add input fields for the user to type their preferred colors.
A helper function is already setup to create the first input - look through the starter code to find the function that you’ll need to call during setup.
\n2A Inside of setup, call the helper function that will add the color input elements to the page.
Once you re-run you should see the new text and input added below the canvas. You can type in it but the value is not being used. To access the value of the user’s input, you can reference it using dot notation value().
\n2B In the assignColors function, modify the first line so that the background color is set to inputBGColor.value().
Now you should see that the background color will change to match the color name or hex value that you type. Don’t forget to include the # at the start of your hex codes.
HINT: Right now, if there’s no user input for the color it will default to white. Can you think of how to give it your own custom color when there isn’t any user input yet?
Once you have things working for the background color, use it as your example and add another input for the user to enter a text color.
\n2C Uncomment the global variable inputTextColor, then use it to modify createColorInputs() to add another text and input element, finally update assignColors() to assign textColor to the new input value.
Confirm that you can now change both colors using the inputs:
HINT: Remember, it will default to white when there isn’t any user input at the start of the program. You can use || (or) to give a backup value to variables when the first option might be empty or null: var exampleVariable = checkForValue() || “defaultValue”.
in sketch.js
Now that the page looks nice, let’s get to the jokes. Soon we’ll implement calling the Jokes API for random jokes, but first we’ll add a sample joke for the page to load with.
\n3A Uncomment the global variable jokeInfo, then assign it in the setup function to an object with two properties category and joke.
You can use your own starting joke values, or this one from the “Pun” category - \"Oysters hate to give away their pearls because they are shellfish.\" xD
\n3B Find the two uses of the text function insides of displayJoke() and change it to use the new values on the jokeInfo object.
Check that your page is now Laugh-Out-Loud hilarious...
It’s looking so good, let’s give the user the ability to save the joke! Check out the save function in the p5.js reference.
\n3C Find the helper function that creates the “Save Joke” button and call it in setup. Then find the function called saveJoke and implement the p5.js save function to save the current canvas as a JPG.
NOTE: This function only works when website opened in another tab, not inside of the replit editor. Naviate to the public url located in the top of the output window:
"},{"id":"T0E6OlNlY3Rpb24tMTIwNzk=","title":"Challenge 4: Call the Jokes API to generate new jokes on demand","htmlContent":"in sketch.js
The sample joke is of course toooootally hilarious, but just in case the user has a different sense of humor, let’s connect our page up to JokeAPI for more joke diversity.
\n4A Uncomment global variable jokeURL and assign a valid value to it in setup().
What's a valid URL?
\nTo get a valid URL, visit https://v2.jokeapi.dev/#try-it\nUse “default (json)” as the format\nCheck “single” for joke type (handling “twopart” jokes is a stretch challenge!)\nOnly get 1 joke at a time
\nNext we will use the httpGet function to call the API at the URL and get our joke response. The response is in JSON format, and you can see that it also has joke and category properties (in addition to others we aren’t using), so we’ll be able to save it directly to the jokeInfo object and the displayJoke function will work correctly.
\n4B Find the getNewJoke function. Inside of the httpGet code block, add code between the { and } to set jokeInfo equal to response. Then add a print(response) so that you can see the full return value in the console.
Re-run your program - you’ll see your starter joke still. Test your new function by calling it in the console and checking that it prints out the return value from calling the JokeAPI:
As the final final step we need 1 more button so that the user can click it to call the API for a new joke.
\n4C Modify the createButtons function to add a second button for calling the JokeAPI.
Enjoy generating and saving your favorite jokes!
"},{"id":"T0E6OlNlY3Rpb24tMTIwODA=","title":"Bonus 1: Explore other user inputs for colors","htmlContent":"in sketch.js
\nUse 1 or more other ways to collect user input for the color values. (Example: Check out ColorPickers ).
\nin sketch.js
\nExample: Update ‘displayJoke’ to handle “twopart” jokes.\nExample: Allow the user to select which category of jokes they want to generate.
\n![\"last](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P08-Arrays/assets/last_color.png\" "\\"last")
\n ![\"color_input\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/color_input.png\" "\\"color_input\\"")
\n ![\"check_colors\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/check_colors.png\" "\\"check_colors\\"")
\n ![\"first_joke\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/first_joke.png\" "\\"first_joke\\"")
\n ![\"public_url\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/public_url.png\" "\\"public_url\\"")
\n ![\"try_it\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/try_it.png\" "\\"try_it\\"")
\n ![\"console_check_2\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/console_check_2.png\" "\\"console_check_2\\"")
\n ![\"jokes\"](\"https://cdn.jsdelivr.net/gh/MakeSchool-Tutorials/Ramp-Level-0@24e7e91f056c670434bd8a208ec378fca605ca5b/P09-Input-Output-APIs/assets/jokes.png\" "\\"jokes\\"")
\n