Code on This Site

Now that we have started looking at code, I want to mention a few specifics about how code will work and what it will look like on this site.

You have hopefully already noticed, during all of these first three weeks that there are specific code blocks. These should be displayed in your browser with a dark grey background and utilize a monospaced font. In theory this should look like code.

Example Code Block

This is what code will look like in your browser on this site.

This code will also be highlighted so that the syntax of the code is more apparent.

Specifying Language or File

When appropriate, there will be information about what the code is you are looking at in the upper-right hand corner. Typically, for this course, this will be one of;

• p5
  • This is general p5 code.
• sketch.js
  • This is p5 code that is specifically in the sketch.js file.
• *.js/p5
  • This is p5 code in another file, which will be specified in place of the ‘*’ wildcard.
• JS
  • or JavaScript, which specifies the code you are looking at is general JavaScript.
• HTML
  • This is HTML code.
  • You will not see this very often.
• BASH
  • This is code for the command line application of your choice or OS.
  • Please remember that, you will copy or type text that comes after the dollar sign ($).

Code Results / Sketch Output

Whenever possible and appropriate, I will also work to show you what the code output we are working on should look like. These sections will be surrounded with a big magenta/pink border.

Playing with Code

Also, whenever possible, I will try to provide code output in a way that is editable, changeable, and playable, by you. These will still occur in the magenta code blocks, but will also include a tab’d bar within, that at a minimum will include;

• “Result”
• “JavaScript”

If you see one of these sections, you can;

1. click on the other tabs,
2. change the code,
3. go back to “Results”
4. and see the changes live!

Try it below with the “Hello World!” example.

To do this;

• click the “JavaScript” tab,
• change the "Hello World!" bit in line 2,
• and go back to Results. You should now see your changes!

Code Links

Below many code examples, there will also be a number of links. These are, and do the following;

• [ Code Download ]
  • This will be a zip’d folder, containing all of the code for the example.
  • This is a way for you to easily download code examples, to play with on your own computers.
• [ View on GitHub ]
  • This link will take you directly to the GitHub entry for this code, so that you can look at it there.
• [ Live Example ]
  • This will take you to a webpage that only has the code in question presented.

These links will occur underneath code examples when appropriate and available.

All Together

Within this course website, you might see long blocks, like the following. This is an example of pulling together all of these details with the “p5 Hello World” example.

Code Example Bundles

I addition providing individual downloads of each code example, you also have the option of downloading a zip’d folder of all code examples from a week. Links to these downloads will typically be available from the week’s overview page. These are also available directly from the lecture_code directory in the course resources git repo

However, if you would like the code examples for this week, you can down load them here, now!

Week 3 Complete Code Examples Download