U1LA5.1: Your Custom Function Library

How can I create a library to store my custom functions?

Teacher Notes && Overview

In this lesson, students will share what they created in the last mini-project by sharing the code itself for others to use. This is a great skill to learn that collaboration does not need to look like pair programming, and it's also a terrific time for students to get creative!

This will also introduce the idea of having multiple files in one program to keep their code organized. Encourage students to follow this practice as much as possible to stay neat and orderly; their main program file should just be the run of the program, and as much as possible we should hide our (working) functions away so they don't get accidentally messed with and also do not clog up our screen.

Objectives

Students will be able to:

• Link multiple JavaScript documents in a single project

• Store functions in a separate JavaScript document

• Share custom functions

• Utilize the functions of their peers

Suggested Duration

1 Period (~45 minutes)

This could easily become a two-period lesson if you would like students to spend more time creating with the functions they were given. Please plan accordingly!

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.5 Modify a function or procedure in a program to perform its computation in a different way over the same inputs, while preserving the result of the overall program.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

• Library: a document that contains a bunch of functions

Planning Notes && Materials

Planning Notes	Materials
This requires students to use code from the past mini-project. You may want to create a sample, or use past code, for any students who have been absent or did not finish.	No additional materials needed for this lesson.

Resources

• Custom Functions Library Template

Assessments

Formative:

• Custom Function Library Project

Summative:

• Abstract Album Art (Upcoming Unit Project)

Do Now/Warm Up (~2 - 3 minutes)

Ask students to open their custom emoji and also a tab with a blank editor in whatever online IDE you choose to use. Depending on the time allotted, students can make any final tweaks to their emoji functions. (Stress that this is the function, not the design they made with it that they will be adjusting!)

Creating Documentation (~5 - 10 minutes)

Since the start of the year, you've been using functions written by other people and documentation that explains how they work. It is always a best practice to leave documentation in your code - and especially within your function - with the assumption that someone else might be using your code one day. (And, honestly, that someone else might just be Future You.)

An easy way to do this is to leave multi-line code comments. We want to describe not only what our function does, but what the inputs do, as well. And we should add our name for good measure! So if we use the very first happyFace() function we wrote, the documentation might look like this:

/**
 Draws a happy face design.
 xPos is the x position of the face on a p5 canvas
 yPos is the y position of the face on a p5 canvas
 Made by Your Name.
*/

function happyFace(xPos, yPos){
  strokeWeight(1)
  stroke(0)
  fill(169, 222, 183)
  ellipse(xPos,yPos,100) //125, 200
  arc(xPos-15,yPos,25,25,180,0)
  arc(xPos+35,yPos,15,25,180,0)
  arc(xPos+11,yPos+26,40,10,0,180)
}

NB: Eventually, they should also describe the return of a function, but that is not necessary yet as their functions do not have return values and it would be a lot to explain!

Ask students to take a moment to document their function by writing a multi-line comment directly above it. It should include one line to explain what the function does, and then explanations for any and all parameters.

Sharing Functions && Documentation (~7 - 12 minutes)

Share students on the Custom Functions Library Template.

Please note that you should just make one per class - in especially large classes, you may have students do this in batches.

Ask students to copy/paste their documentation and function into the document. Remind students not to style the font - it is currently set to a monotype font which generally copy/pastes well into code editors! (Other fonts can do strange things with formatting.) At this point, ask students to change their emoji name just in this document to include their first name before it, such as courtneyHappyFace().

Eventually, students will be creating their own function library, and functions must be uniquely named to work as expected!

From there, have students go to the blank editor they opened as part of the do now. They will be creating a new file to house all their functions and linking it in their HTML so the functions are usable. This section is best done as a code along.

p5 Editor:

Click the arrow next to sketch.js which will pop out a small side window that the editor usually hides. This contains the HTML page, the javascript file students usually work in, and a CSS document. Because JavaScript is a web development language, all of these pieces are necessary. Whenever they've been making a project, they've actually been making a webpage!

Screen shot of the side panel exposed in p5 web editor

Next, click the down arrow next to Sketch Files and select 'Create File.' Name this file 'functions.js'. It must have the .js in it so that the computer recognizes it as a javascript file.

repl.it:

In repl.it, these files are more likely to be displayed already. If they are not, grab the grey bar to the left of your code pen and drag it to the right until they are. You should see a setup like this, with an icon to add a file:

Screenshot of repl.it screen and add file button.

Click the 'Add File' button. Name this file 'functions.js'. It must have the .js in it so that the computer recognizes it as a javascript file.

In both options:

From there, we will link the file into our HTML, which is the page that displays our p5 canvas. Click on index.html and look for this line in the <body> tag:

<script src="sketch.js"></script>

This is what connects your p5 sketch to your HTML page so it can display! If we want to access information from other javascript files, one way is to connect them in a similar fashion. Add a line so you now have this:

<script src="functions.js"></script>
<script src="sketch.js"></script>

This should connect the two files, but we don't actually have anything in functions.js to test this, so let's give it a go. Ask students to go find a function that looks interesting in the function library, and copy/paste it (along with the documentation) into their functions.js file. Once they've done this, have them head back to their sketch.js function and call the function to create a design on their screen. If it shows up, you did everything correctly!

If it did not, students will need to troubleshoot focusing on small, typo based errors, as those are usually the problem.

Using Your Custom Function Library (10 - 15 minutes)

Ask students to identify several functions they want to use and copy/paste each into their functions.js file. They should use these to create an interesting composition in their new project. Remember to save to use this as a reference later!

Wrap-Up (~5 minutes)

Allow several students time to share what they have made on the screen, or within small groups. This has the chance to be very exciting as students learn about new ways to work collaboratively to create!

Extensions

There are no planned extensions for this lesson. Students should keep creating with the given functions, but they can also modify functions to make their own version!