Sketchbook

For this class, you will expected to maintain a sketchbook. This is where you should put examples from lecture, work out techniques for your pieces, and write your weekly reflections.

Why a sketchbook?

We are venturing into the world of creative coding and our mode of working will be different from what you have encountered in other classes (at least it should be).

Every piece will involve a combination of creative and technical aspects. The journey to the deliverable that you hand in will not be a straight path like a typical homework assignment where you keep improving until you reach a point where it is good enough, so you hand it in. In this class you will hit moment where there will be multiple ways to do something, and they will all be valid directions.

A sketchbook will allow you to have a place to keep all of the various directions you have tried so you can go back to them later for other projects. This will keep you from commenting out or deleting promising directions that you have just opted not to follow for the piece you are working on.

A sketchbook allows you to see your progress. If you save each step as you work, you will be able to go back and see what you were thinking. I also find it invaluable to write myself some notes about what I was doing at each step – especially if I need to walk away for a little while and come back to it later.

A sketchbook (the way we will use it) will provide a place where you can combine your work with your notes about what you are thinking and learning. This will be invaluable when you need to do reflections both every week and at the end of the course.

A sketchbook gives you a place where you can make quick examples that show a particular technique without making it into a full piece. This, combined with all of your abandoned directions will create a library of techniques and ideas you can return to.

A sketchbook allows you to try things out that are not meant for public consumption. It is true that I will also have access to these, but I’ll just be looking to see that you are doing work in there, not judging what I see.

Mechanics

To get started,

  1. Accept the sketchbook assignment.
  2. Clone the repository Classroom 50 creates to your local computer (in your shell, type git clone and the name of the repository)

I created the sketchbook as a Quarto project, so you will need to install Quarto on your computer.

Note

For MacOS users, the quarto CLI can also be installed with Homebrew. If you are already a Homebrew user, feel free to do that.

Read through the VSCode tutorial on the Getting Started page. This will give you a general idea of how Quarto works.

Important

We are not using code blocks, so you can ignore any commands about install python packages.

We won’t be deploying your sketchbook as a website anywhere (though you certainly could). We will be relying on the Preview tool which builds the website and then runs it locally in a simple server. You can do this using Ctrl+Shift+K in VSCode or by using quarto preview on the command line. This will start a server with the rendered site. It will tell you the URL to connect to and will probably automatically open it in your browser as well.

Note

I do use the preview in VSCode out of habit, but for the way we use the sketchbook it can be a little buggy.

Sketchbook structure

Inside of the sketchbook directory you will find these things:

  • index.md - This is the front page of your sketchbook. We don’t care much about this, so you can write whatever you like on this.
  • reflections - This directory will hold your weekly reflections.
  • sketches - This directory is where you will put your commentary about your sketches.
  • src - This directory will contain the actual p5.js pieces that you wre creating.
  • _quarto.yml - This configures the sketchbook. You should not need to touch this
  • styles.css - This styles the sketchbook. You can ignore this as well.
  • .gitignore - This is the list of files and directories git should not track. You can ignore this.
  • .quarto - This is a hidden directory that won’t exist until you render the site. You can ignore this. If you delete it, it will be regenerated the next time you build the site
  • _site - This is where the actual rendered site will be built. You can ignore this as well. Like .quarto, it can be rebuilt

Writing Content

As you saw in the Quarto introduction, you can write .qmd or .md pages. Since we aren’t using executable code blocks, you can just use .md. For both, the content should be written using Markdown. If you are unfamiliar with using Markdown, I suggest you spend a few minutes reading through the documentation for the basics.

Another important detail is that a “page” can be a simple markdown page (e.g., mypage.md) OR it can be a directory with an index.md in it (e.g., mypage/index.md). The advantage of the later is that you can group resources with the page in the same directory. So, for example, I might have a page with two images on it and I might structure the files like this:

  • mypage/index.md - the text of the page
  • images - a sub-directory for images
    • images/img1.jpg
    • images/img2.png

I set up the sample reflection as a simple text file, and the sample sketch as a directory so you could see both forms. You are welcome to use either approach for either one.

Sharing your sketchbook with me

When you have made a change, you will want to add it to your git repository and push it to GitHub. Please read the documentation for more details on how to do that if you don’t already know.

Reflections

The reflections should be pretty straightforward. Every week I would like a new page that talks about the week. See the reflections page for details about the content.

You should be able to copy the page from the week before (starting with my sample week00.md). Update the filename and the title, and then write your new reflection.

Sketches

The sketches are a little more complicated.

p5.js file structure

To understand what is going on, we need a little background. A typical p5.js sketch will have at least three files:

  • index.html - The actual webpage to be loaded by your browser
  • style.css - A CSS stylesheet that describes how the page is laid out (name just has to match in index.html)
  • sketch.js - The JavaScript file where the code lives (name just has to match what is in index.html)

For simple sketches, you can change the page title in index.html and then completely focus on the code in sketch.js.

For more complex sites, you might do more editing of index.html and style.css, add assets like images, sounds or videos, and add more source files.

Note

Another thing we need in order to use p5.js is the library itself. We can link to the online library, or we can have our own local version. I’ve configured my example to use a local version. You will find this in src/libs, though there is no need for you to do anything with it. I like this model so I can work offline, which happens sometimes.

Running p5.js sketches in isolation

In order to see your sketches, you need to have a server running that can serve the pages listed above to your web browser.

I set up your sketchbook so that you could focus just on your sketches, or you could think about writing your thoughts out while you work.

There is a README.md file in the example sketch that describes this, but there are two simple ways to set up a server.

The first is to start a simple server on the CLI. Python is the simplest way to do this and you probably have everything you need installed already. Navigate to the src directory and start the server:

python -m http.server 8000

You will find all of your scripts at http://localhost:8000 with your browser.

The second is to start a server from inside of VSCode using the Live Server extension. You can right click on HTML files and select “Open with Live Server” or just click the “Go Live” button in the lower right (not the Live Share button, which does something entirely different).

Incorporating your sketches into the sketchbook

The way that I have been working is to show my sketches in the sketchbook itself. To do that, we are going to take advantage of the fact that we can include raw HTML inside of Markdown and add an iframe.

Note

The <iframe> tag allows us to embed a nested browsing context inside of a page (basically, you can put the output of one page on another one).

I’ve provided you with an example that looks like this:

<iframe src="/src/gradients-1/index.html"></iframe>

If you write this into the markdown in sketches, it will embed the sketch gradients-1 into your page. There is no need to worry about the width and height – I have configured the index.html in the sketches to automatically resize themselves to be whatever size you set up in your p5.js code.

Putting it all together

Let’s say you have some idea you want to explore.

  1. Copy an existing directory in sketches
  2. Rename the directory and update the title in the enclosed index.md file
  3. Remove the rest of the contents
  4. Copy an existing directory in src
  5. Rename the new directory
  6. Update the page title in index.html
  7. Embed the new sketch in your markdown file with an iframe
  8. Try out your idea and take notes as you go
  9. If you have something that kind of works, but you want to explore further, copy the sketch directory, rename it, and embed the new link into your notes with another iframe