In this section of the course, you will learn how to program animations (things that move on the screen). You will be learning a parts of a language called "JavaScript", but this language has been expanded for artists into an environment called "Processing". We will be using a version of Processing called p5.js which allows you to use any editor to create and edit the code, and a set of libraries that extends the capabilities of Javascript for easier drawing and animation.
As usual, there have been recent updates to the app, so your teacher will give you the set of folders and libraries that you will need. Organize them on your D:/ drive, then upload these folders to GitHub so that your web pages can use them. Each time you want to create a new program (called a "sketch"), you should copy the Template example folder, give it a new name, go inside the folder and edit the index.html and sketch.js files, then upload the entire folder to GitHub.
We will also be using a different on-line learning environment for this unit. Please go to the Khan Academy and sign in using your student Google account. You should not have to create a new username nor password. Make sure you're already signed into your student Google account, then just click on the link to log in using Google. Once you're logged in, follow the teacher's instructions to connect to your teacher's class, with the teacher as your coach. As you follow the lessons, your progress will be monitored by your teacher. Many of this lessons will use video and audio to explain new concepts. Please plug in some earphones before you start these lessons. Try the first few lessons now and return to this page when you have finished "Drawing Basics" and have learned how to draw some shapes.
On your D:/ drive, go to the p5 folder and make a copy of the Template example folder. Rename it Snowman. Open the Snowman folder, and open the sketch.js file using Notepad or Notepad++. You should see some code that looks like this:
function setup() {
createCanvas(640, 480);
}
function draw() {
ellipse(200, 200, 80, 80);
}
Sketches alsways have two parts: a setup function and a draw function. This is like HTML files always having a head and a body. To match what you have been doing in KhanAcademy, you should go into the setup function and change the canvas size to (400, 400). Then, go back to KhanAcademy, copy some code that you have written to draw a snowman, and paste it into the draw function instead of the existing ellipse.
Please get into the habit of using comments to explain your code. Two slashes in the code will make the remainder of the line a comment that is ignored by the computer. /* and */ can enclose a longer, multiline comment. Always put the title of the sketch, your name and the current date at the top of each sketch. Use additional comments to explain what your code is doing to other humans (such as your teacher!)
Save the sketch, then in the p5/Snowman folder, click on the index.html file to open it in a browser. You should see your snowman! Now upload the Snowman folder into your p5 folder on GitHub and make your first drawing available to the world. Don't forget to "Commit changes" after you upload the folder! Here's what it should look like. Right click on the page to view the source code. Note that when you are linking to your web pages with sketches, the href should specify the path as far as the folder. Your browser will know to automatically open the index.html file in that folder.