Art 22 - Introduction to Computer Programming in the Arts, Fall 24

Make a very basic web page that shows "Hello World!" or something else in a web browser and save it to our server. (There is a tradition in the programming world making your first program write out "Hello World!")

Use Brackets to write your html code. Look at the examples on this page and at the tutorials.

1. Use the HTML and the BODY tag.
2. Save the file on your computer.
3. Name the page 'hello.html'

To save 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:
1. SFTP (SSH File Transfer Protocol)
2. Server: 'class.arts.ucsb.edu'
3. Username:'art22'
4. Password: will give in class
5. SSH Private Key: None
• Navigate to 'Sites/f_24'
• Create a folder (File->New Folder) in the 'f_24' folder called 'yourlastname_yourfirstname' all lower case.
• Drag your html file from your computer to the folder
• The url will be https://class.arts.ucsb.edu/~art22/f_24/​yourlastname_yourfirstname/hello.html

• Find an interesting artwork that was created using computer programming. It is not enough that it was created using video/image/sound software.
• Make a webpage that has:
  • an image of the artwork
  • a paragraph you write about why you selected the work and how it uses computer programming.
  • a link to a website discussing the project.
• Make a link to the page on your homepage. Use the number "1. Art Example" (i.e the part you click on should say "1. Art Example" )

• Make an account at p5.js Editor
• Make a drawing that reveals something about the world using only the 2D primitive shapes listed in the p5.js Reference (Shape -> 2D Primitives), color and movement (by incrementing a variable).
• Use all the 2D primitive shapes listed
• Use a lot of shapes
• Make parts in your drawing move and change color/shape by incrementing variables.
• 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. The World".

Modify one of the examples shown in class on Tuesday. Try to understand how for/array/map (whatever your chosen example use) works. Make a link to the sketch (in the editor) on your homepage. Use "4a." in your link.

Make an interesting visual representation of some data (at least 50 data points) stored in an array or read in from the internet. You can use my example data sets or find some data you are interested in. The data could be in JSON format or an array in your program. You can for example find data files on the "CORGIS" site. USGS have several different kinds of earthquake data in JSON format

1. Make your own visualization, it should look very different from the visualizations in my examples.
2. Make a separate html page with the sketch, make a link to that page on your homepage. Use the "4." in your link name.

Look at the final project prompt in week 10. Come up with an idea. Write a proposal including written descriptions of:

• What is the end medium: web based interactive program, prints, laser cut objects ...?
• 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"

Make an art project using p5.js. The project could take many different forms depending on your interests.

The project should be meaningful as an art project. Think about what you want to say, communicate, evoke. Depending on who you are as an artist and what is important for you as an artist and human, the project can be personal, political, humorous, serious, expressive, minimalistic, deal with a specific issue, be a formal aesthetic exploration etc...
You can build the project on something you already made but it has to be significantly more complex and different from the starting point.
The project could be:

• A project displayed in a web page.
• A series of prints
• Laser cut objects

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
• Generate sound
• Filter images
• Be a tool
• Etc...

If you choose to do a project that resides in a web page, make a link to the page on your homepage.
If you make prints or laser cut objects, bring prints/objects to class and document your project (including photos of laser cut work) on a web page and link to to it from your homepage.
Label the link "Final Project"