Code the Dream Labs Logo

Code the Dream

At Code the Dream, we envision a world in which tech innovation comes from all of us and benefits all of us.

INTRO TO PROGRAMMING PRE-WORK ASSIGNMENT

General Instructions > Part 1 > Part 2 > Submission

Part 2: Demonstrate

Each week of class you will be writing code using what you learned. This part of the pre-work assignment will give you an idea of what that is like. Follow the steps below to create a free account with p5.js JavaScript drawing library, then create an original drawing or animation that includes a variable, a conditional, a loop, and a unique function.  

To demonstrate that you learned some basics from the tutorial, complete these three tasks:

  1. Sign up for a free p5.js editor account
  2. Write your original code or copy and paste your Khan Academy code into the p5.js editor. To be considered for the class, your code must include:
    • a variable
    • a conditional
    • a loop
    • a unique function
  3. DOUBLE CHECK YOUR WORK!!!

The next and final step will be to copy the link to your work and submit it.

Demonstrate: Task 1 of 3

NOTE: Before you begin, the drawing library you used in Khan Academy is called Processing.js. This is an old library that has been replaced with a newer (and we think better!) library called p5.js. While most of the code you learned (example: ellipse(x, y, w, h) will work the same in the p5.js editor, you may come across some differences. You can find the same kind of reference information for p5.js that Khan Academy had for the Processing.js library by clicking this link to go to the reference pages for p5.js. The console area of the p5.js editor will also provide you with links to their reference pages if it finds problems with your code (see below for more details).

Click here to be redirected to the p5.js editor. On that page, sign up for a free account by clicking “Sign Up” in the top right corner of the screen. It should look like this:

This takes you to a Sign Up page. You can either enter your information, or use a GitHub or Google account to sign in with instead. The Sign Up page looks like this:

Once you’ve completed the Sign Up portion, you’ll automatically be logged in. You should see your username in the top right corner. The main page once you’re signed in, should look like this:

If you need to stop and come back to your work another time, you can do that by saving your work before you end your work. Then when you’re ready to come back to it, you’ll sign in (if you aren’t already signed in) then use the menu in the top right to select “My Skecthes” as shown here:

Then select your sketch from the list as shown below. Note: the default name is usually something silly and random like “Wary riverbed” or “Purple gorilla”. You can rename your sketch to something more appropriate if you like by clicking the pencil by the sketch name on the editor screen (seen above), or use the drop down on the Sketches screen (seen below):

Demonstrate: Task 2 of 3

Now for the fun part! Write some code!

We want to see what you’ve learned from your tutorial. Your drawing/animation can be anything you imagine. Your code must be YOUR original code and must include ALL of the following:

  • a variable
  • a conditional (example: an if statement),
  • a loop (example: a for or while loop),
  • a unique function (a block of code you’ve given a name to, and called in the draw() function)

While you can copy and paste your code from Khan Academy, your learning is better practiced by typing your code out in the p5.js editor. You also will have a better chance of acceptance if you translate what you learned into something new. For example, if Khan Academy has you build a car that drives across the screen, can you change that into a boat sailing across the ocean? or a person on a bike? Being able to take what you learned and apply it in new ways is a great skill to practice and is used often in technology.

To use the p5.js editor:

Step 1: Add your code inside the draw() function and/or add your code at the bottom under the draw() function. You MUST leave the setup() function as is. You can, make the Canvas larger than the 400 by 400 size it starts as. You MUST have the draw() function in your code. Below is an example of a pre-work in progress. Here, the applicant has changed the Canvas size, changed the Canvas background color, and created a unique function that draws a white circle, which they called in the draw() function for that block of code to run:

Step 2: Save your code. To SAVE your work, either use the keyboard shortcuts of command/control + S or go to File > Save in the editor. The below image shows you where that is located. The editor will auto-save after several seconds of inactivity, but it’s always a good habit to save often.

Step 3: Run your code. To RUN your work, use the Play button on the top left of the screen as seen below. REMINDER: Khan Academy uses a different drawing library that p5.js, so you may find your code behaves differently than in Khan Academy. If your drawing or animation looks or behaves differently than how it did in Khan Academy, you can look at these reference materials to help you edit some of your Khan Academy code to work properly with the p5.js drawing library.

Be sure you run your code often so you can see the changes you make take effect.

NOTE: If you hit the run button, and nothing happens, or the preview takes too long to load, you may have an infinite loop in your code. See “Demonstrate: Task 3 of 3” below about checking your work to help solve this issue.

Demonstrate: Task 3 of 3

Check your work. Be sure the animation/drawing appears in the preview / right side of the p5.js editor page, and that it looks/acts how you expect/want it to.  If your code isn’t looking or acting like you expect, check the console at the bottom of the page for information that will help point your to what line of code might be wrong. The address at the end of the Console message is a clickable link that will take you to the reference information. In this example, the third argument that defines how big the circle is was left out of line 12 of the code, and you could click on “http://p5js.org/reference/#/p5/circle” to see the documentation about the proper way to call/create a circle:

Once you’ve completed your original work, save, and double check that your work includes all of the following:

  • A variable
  • A conditional (example: an if statement),
  • A loop (example: a for or while statement),
  • A unique function (a block of code you’ve given a name to, and called in the draw() function)

You will not be admitted to the class if your work does not include these four items.

Congratulations! The hard part is done! Now, you’ll just need to copy the link to your work and submit it. Use the link below for instructions and the form to submit your work to us…

CLICK HERE TO SUBMIT YOUR PRE-WORK ASSIGNMENT