Art 22 Fall 23

Instructor: Lisa Jevbratt
TA: Jenni Hutson

Syllabus (pdf)
Class Description

Using a project-based approach, the basic components of web development and computer programming and are explored in different markup and programming languages such as HTML/CCS, JavaScript and P5.js. The class is intended to create an understanding of computer programming in general, its use and cultural implications, as well as providing a foundation for utilizing programming in a wide range of projects, from traditional to new media.

Week 1:

Tue. 10/3) Class Introduction / HTML

Due: Downloading/installing class software

Download the text editor Brackets (for writing code) and install it on your computer.

Download the SFTP program Cyberduck (for uploading files) and install it on your computer.

Thur. 10/5) HTML/CSS

Lecture introducing more HTML/CSS.
Lab working on homepage.

Tutorials

W3 Schools HTML Basics
W3 Schools HTML Elements
W3 Schools HTML CSS intro
W3 Schools HTML Links
W3 Schools HTML Images
W3 Schools CSS Intro
W3 Schools CSS Styling Links
W3 Schools CSS Fonts
W3 Schools CSS Using Google Fonts, Google Fonts
W3 Schools HTML Entities

Due: Creating an HTML file on our server

A very basic HTML file on our server. Make a page that displays "Hello World!" or something else in a web browser.

To create your HTML file (and folder to put it in) on our class server:

In the SFTP software Cyberduck connect to our class server (File -> Open a connection ...)
Settings in Cyberduck:

SFTP (SSH File Transfer Protocol)
Server: 'class.arts.ucsb.edu'
Username:'art22'
Password: will give in class
SSH Private Key: None

Navigate to 'Sites/f_23'
Create a folder (File->New Folder) in the 'f_23' folder called 'yourlastname_yourfirstname' all lower case.
Open the folder you just created by clicking on it.
Create a file (File->New File) in the folder
Name the page 'home.html'
The url will be https://class.arts.ucsb.edu/~art22/f_23/
yourlastname_yourfirstname/home.html

To write/edit your HTML file:

In Cyberduck, SINGLE click on the file to select it.
Open the file in Brackets, our text editor, by selecting File ->Edit With -> Brackets
The page will open in Brackets. It will be blank until you written something on it
Write/edit your HTML
Save directly to the server by doing command + s on mac or control +s on PC.

Examples:

One centered image
Several images
Same look as above but using a separate style file.
Linking

Week 2:

Tue. 10/10) HTML/CSS Continued

Due: Basic HTML5 homepage

Make a simple homepage in HTML5. (Using the page you started above.)
It should have an image of yourself, your name, and a link to a website you think is interesting.
Use CSS to set the background color, text color, font etc.
The page should be readable both on your mobile device and on desktops.
Make sure you name your page correctly (if it does not show up when you click on your name under "students" above, you did not name it correctly.)

Examples:

Google fonts and special characters
div and span

Thur. 10/12) P5.js intro

Due: Updated webpage and context

Homepage 2.0

In Cyberduck, make a copy of your current home page. Call the copy first_home.html
Continue to work on your original home.html page:
- Add everything that was due on Tuesday if you have not yet done so.
- Make it even better, listen to input from instructors and peers.
- Use at least 3 html tags or style features you did not use originally
- Make sure the code looks good, use indentation to clarify what is inside a tag and style brackets.

Context

Find an interesting artwork that use computer programming in some way.
Make a webpage that has:
- an image of the artwork
- a paragraph you write about why you selected the work and how you think it uses programming.
- a link to a website discussing the project.
Make a link to the page on your homepage. Label the link "1. Context" (i.e the part you click on should say "1. Context" )

Tutorials

The Coding Train: Programming with p5.js

Examples

Simple shapes

Week 3:

Tue. 10/17) p5.js

Examples:

mouseX, mouseY
Increments
Random

Due: p5.js code drawing

Make an account at p5.js Editor
Make an interesting drawing using only the 2D primitive shapes listed in the p5.js Reference (Shape -> 2D Primitives) and color.
Use all the 2D primitive shapes listed
Use a lot of shapes
Link to your sketch from your homepage:
- In the p5.js editor go File->Share, copy the URL in the edit window
- Use the URL you copied in the href attribute in your link.
- Name the link "2. p5 Drawing".

Watch:

The Coding Train p5.js: Intro
The Coding Train p5.js: Editor
The Coding Train p5.js: Shapes and Drawing
The Coding Train p5.js: Color
The Coding Train p5.js: Errors

Thur. 10/19) p5.js Variables, Movement, Mouse Input

Examples

if, back to start
if, mouseX
if, Stopping Ball
if, Bouncing Ball
if, dancing dots
if/else, pattern
A little more complex version of the script above
if/else and modulus operator

Due: Updated drawing

Make one (or more copies) of your drawing sketch due on Tuesday. Make changes to the copy:

Use mouse input to change color/shape/placement of objects.
Increment variables to make parts in your drawing move and change color/shape.
Use random numbers to create color/shape/placement of objects.
If you think your sketch is getting messy, you can make several sketches.
Link to the sketch from your homepage. Name the links "2b. p5 Drawing Updated" ("2c. p5 Drawing Updated" ... etc.)

Watch:

The Coding Train: Variables - Mouse Input
The Coding Train: Defining Variables
The Coding Train: Incrementing Values
The Coding Train: Randomness

Week 4:

Tue. 10/24) p5.js conditional statements

Examples

Else If, Else If without Else
Or (||)
And (&&)

Due: p5.js If!

Make an interesting p5.js sketch that is using conditional statements to determine how it looks and functions.

Make a link to the page on your homepage. Label the link "3a. If"

Watch:

The Coding Train p5.js: Conditional Statements
The Coding Train p5.js: Conditional Statements 2

Optional:
The Coding Train p5.js: map()
The Coding Train p5.js: createGraphics

Thur. 10/26) moving p5 sketches to our server, p5.js createGraphics

Make an interesting p5.js sketch that use conditional statements in a different way than your last sketch.

There should be interactivity,
There should be movement.
Use 'else if'.
Use AND (&&) and OR (||).
Make a link to the sketch on your homepage. Label the link "3b. If/Else"

Week 5:

Tue. 10/31) p5.js Loops, Arrays, Data Visualization.

Reference

p5.js: map() function
W3 Schools JavaScript: For Loop

Examples

Array
Array and For Loop
UFO Data 1 (Array, For, Map)
UFO Data 2 (Array, For, If, Map)

Due: Webpage with p5.js sketch(es).

Make a webpage with one of your p5.js sketches.

Optional: Make a web page that displays more than one p5 sketch. To do so make two or more web pages with different sketches. Then make one web page with iframes that each display one sketch. See examples above.

Make a link to the page on your homepage. Label the link "3c. web page with sketch(es)"

Thur. 11/2) p5.js Data Visualization

Due: p5.js Array/For

Using p5, make a visual representation of data (at least 30 data points) stored in an array. You can use the ufo sighting data in my example. Make a link to the sketch on your homepage. Label the link "4a. Array"

Read:
W3 Schools: For Loop
Watch:

The Coding Train p5.js: map()

The Coding Train p5.js: While and For Loops
The Coding Train p5.js: Arrays
The Coding Train p5.js: Arrays and Loops

Week 6:

Tue. 11/7) p5.js Making large scale images and SVG files

Examples

pixelDensity() and save() for printing

Drawing tool
Drawing tool 2
Loop tube (script built on this basic sin/cosine script)

Loop tube PNG

SVG (Scalable Vector Graphics) for laser cutting

Simple, Cutting
Square rotations, Cutting
Square rotations 2, Cutting
Square rotations 2, Cutting SVG
Circles 1, Engraving
Circles 2, Engraving
Circles 2, Engraving SVG

To create SVG images in p5, you have to include p5.svg.js in your project. The easiest way to do this is to make a copy of my simple example and work from there.

Thur. 11/9) Arduino workshop with Jenni

Please download the Arduino Software before the workshop.

If you choose to do laser cutting or color printing you can work at home or in estudio. Jenni will be busy with Arduino.

Week 7:

Tue. 11/14) Printing, Laser cutting, Arduino Lab

Meet in estudio.

Due: Physical Limitations

Select one of these options:

Make two high resolution images for color printing using p5.js (see examples above)
- You have to use a for loop or user input.
- Do not just mess with the numbers in my examples, make major changes to the actual code if you start with my examples.
- You have to set the pixelDensity() to increase the resolution of your images
- We will print on 13"x19" paper. The shortest side of your image should be 12" and the longest no longer than 18". Check in photoshop or other image software.
- The resolution should be 150-300 dpi.
- Be aware that very saturated colors will be less saturated when printed.
- Make a links to the p5.js sketches on your homepage. Label the links "5a. Color print p5" and "5b. Color print p5"
- Make a links to the png files on your homepage. Label the links "5a. png "5b. png"

Make two SVG files for laser cutting and engraving coasters using p5.js (see examples above)
- Use a strokeWeight(1) red line for lines to cut.
- Use a a strokeWeight(1) blue line for lines to engrave.
- Do not just mess with the numbers in my examples, make major changes to the actual code if you start with my examples.
- Each coaster should be 4 inch wide/diameter. (Change in illustrator or Inkscape if it gets larger/smaller)
- You have to use a for loop.
- Make it as complex as possible without having too many lines at the same place.
- Make links to the pages on your homepage. Label the links "5a. Laser Cutting" and "5b. Laser Cutting"
- Make links to the SVG files on your homepage. Label the links "5a. SVG" and "5b. SVG"

Make a functioning arduino interactive setup.
- Make a functioning arduino interactive setup in the workshop, finess it in the class after that.
- Make a webpage with a photo of your arduino setup, and a brief explanation of what it does.
- Make a link to the page on your homepage. Label the link "5. Arduino "

Thur. 11/16) Arduino and Prints Crit, Final Project Introduced

Week 8:

Tue. 11/21) Final Project Lab
Due:
1. Final Project Technical Test

Make a test program of some programming feature you imagine using in your final project.
Make a link to the test (the editor link) on your homepage, label the link "Final: Test".

2. Final Project Proposal

The proposal should include written descriptions of:

What is the end medium: web based program/prints/arduino/etc. ?
What will your program do? - Will it visualize data, transform user input etc.
Why you want to make this specific project.
What do you want your audience to experience/feel/think/learn/question and why?

Make a separate web page with the proposal. Make a link to the page on your homepage. Label the link "Final: Proposal."

Thur. 11/23) THANKSGIVING

Week 9:

Tue. 11/28) Final Project Lab
Due: Final Progress 1

Make a link to your latest file, label it "Final progress 1". Make a copy of the file and continue to work on the copy.

Thur. 11/30) Final Project Lab
Due: Final Progress 2

Make a link to your latest file, label it "Final progress 2". Make a copy of the file and continue to work on the copy.

Week 10:

Tue. 12/5) Final Project Lab
Due: Final Progress 3

Make a link to your latest file, label it "Final progress 3". Make a copy of the file and continue to work on the copy.

Thur. 12/7) Final Project Crit
Due: Final Project

Make an art project using p5.js (or Arduino if you took Jenni's workshop). The project could take many different forms depending on your interests.

The project could be:

An interactive project displayed on a web page.
A series of prints
Laser cut objects
Arduino setup/installation

The program you write could:

Use various kinds of user input: clicks, mouse movements, but also sound, gestures, typing etc.
Create generative images/animations using loops.
Visualize data
Visualize sound
Filter images

Make a link to the page on your homepage. Label the link "Final Project"

Text editor we will use:

Brackets, a basic free text editor (Mac/Windows/Linux)

SFTP client for uploading files to our server:

Cyberduck, sftp client (free)(Mac/Windows/Linux)

You can also try these text editors:
Sublime, a good text editor for Mac/Windows/Linux (free for some time, then you will be asked to pay but can continue to use for free)
Visual Studio Code, a good text editor for Mac/Windows/Linux
BBEdit, a good text editor for Mac (free version available)
Notepad ++, a popular text editor for Windows (free)

Art 22 Introduction to Computer Programming in the Arts

Week 1:

Tutorials

Examples:

Week 2:

Examples:

Homepage 2.0

Context

Tutorials

Examples

Week 3:

Examples:

Examples

Week 4:

Examples

HTML/Javascript Examples

p5.js Example

p5.js Tutorial

Week 5:

Reference

Examples

Week 6:

Examples

pixelDensity() and save() for printing

SVG (Scalable Vector Graphics) for laser cutting

Week 7:

Week 8:

Week 9:

Week 10:

Examples for final project (more to come)

Working with gestures

image filtering

Working with data

Art Examples

Text editor we will use:

SFTP client for uploading files to our server:

Examples:

Books/Tutorials/References:

Tools:

History: