↖ Creative Coding

ART 2210 Creative Coding is an applied course that focuses on creating internet based projects that impact media and culture. Students will learn current web design and development workflows with an emphasis on networked interaction and visualization. Current trends in online media will be examined with special attention paid to how projects can exist on multiple platforms such as mobile phones, tablets, and desktop computers. Through in-class exercises, projects, critique, hands-on workshops, readings and discussion we will explore the role of the digital artist/designer in a constantly evolving digital landscape. Students will develop an understanding of web technologies in order to implement creative systems.

Materials

2024 Assignments

2019 Assignments

2016 Assignments

Procedures

Video Guide

The following assumes a few things

First, make sure that you have Git installed. This can be downloaded from here: https://git-scm.com.
Second, make sure that you have a useful text editor you can code in like Visual Studio Code, https://code.visualstudio.com.

To work on your HW

Click the assignment invite button on this page to have GitHub automatically create a repo for you. Note the repository URL given to you here.
Open Terminal (Mac) or Git Bash (Windows).
cd /to/where/you/store/your/classwork For instance, a “Creative Coiding” folder inside “(My) Documents” would work well.
git clone <repository url> The URL here should be for the repo GitHub made for you in the first step.
ls to get the names of the files in this folder
cd /to/the/name/of/your/repo You can see what your repo is called from the output of the previous command.
Now you’re ready to set up your p5.js project! Proceed to the next section for instructions.

Set up a p5.js project (in Terminal)

Open the repo folder in your text editor with File > Open or by using something like code . in terminal if you’re using VS Code and have command line capabilities installed.
Use touch index.html in terminal to create an empty index.html file or use your file editor to make a new file named index.html.
Use touch sketch.js in terminal to create an empty sketch.js file or use your file editor to make a new file named sketch.js.
In terminal use curl -L https://github.com/processing/p5.js/releases/latest/download/p5.min.js to download p5.js to your project folder.
Now you should have a folder on your computer with files named index.html, sketch.js, and p5.min.js. See the “Scaffold” section below for a basic struture for the first 2 files.
Now you’re ready to start coding!

Set up a p5.js project (in VS Code)

Video coming soon.

To upload or make changes to your code on GitHub

git add -A This lets GitHub know you want all your files to be added. If you’re already run this before and there isn’t anything new you don’t have to run it again.
git commit -am "your message here" This creates a snapshot of the changes you’ve made along with a message describing them.
git push This uploads your code to GitHub.
Your code is now online. Use git config --get remote.origin.url to see your repos URL.

To create a website from your GitHub code

Go to your GitHub repo website.
Click Settings and scroll down to GitHub Pages.
Under source choose your master branch.
Visit your website at: http://lsudigitalart.github.io/<your repo name>

Notes

Troubleshooting

If VS Code or Git throws an error that says “Make sure to configure your user.name and user.email in Git.” open terminal in your assignment directory and put in the following git config commands separately pressing enter after each one. Make sure to use your LSU email address.

cd into\your\assignment\directory
git config --global user.email “you@lsu.edu”
git config --global user.name “Your Name”

Helpful Bash Commands

Display the present working directory: pwd
Change direcotry: cd <dir name>
List the contents of a directory: ls
Create a directory: mkdir <dir name>
Create an empty file: touch <filename>
Open current directory in VS Code: code .
Traverse up a directory: cd ..
Shortcut for home directory: “~”
Shortcut for current directory: “.”
delete a file rm <file>
copy a file cp <source> <destination>
hotkey to complete pathnames: “TAB”
to display contents of a file cat <filename>

Helpful Git Commands

How to download a repo: git clone <url of repo>
Check status of a local rep git status
Take a peek at any changes made to remote repo: git fetch
Download any changes made to a repo git pull
See what you’ve done to your repo git log

Start a server

Mac

Open Terminal
cd into your sketch directory
Type python -m SimpleHTTPServer
Visit your site at http://localhost:8000

Windows

Download and Install Python 2 from python.org
cd into your sketch directory
Open command prompt or git bash and type C:/Python27/python.exe -m SimpleHTTPServer
Visit your site at http://localhost:8000

Scaffold

Empty Example of index.html

<!doctype html>
<html>
  <head>
    <title>Assignment ## - First Name Last Initial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

Empty Example of sketch.js

function setup() {
  // Put things you want to run once in here. 
}

function draw() {
  // Put things you want to over and over here. 
}

Download Scaffold

Plain
Pretty much the basics.

curl -L https://github.com/fredeerock/p5js_starter/archive/master.zip | tar xz --strip=1

Featured
This has a VS Code debugging config as well as a bit more starter code.

curl -L https://github.com/fredeerock/p5js_starter/archive/debug.zip | tar xz --strip=1