Art 102 Winter 2024 Mobile Media - App Art

Time: M/W 10:00 AM - 11:50 AM
Instructor: Lisa Jevbratt Office hours: by appointment (in e-studio or my office Art 2228)
Syllabus (pdf)
Students
Yanwen Chen
Christina Cui
Eva Goldsberry
Destiny Gong
Vanessa Gonzalez
Cyn Haro
Will Hazlinger
Audrey Kenyon
Diane Kim
Alaina Liu
Linh Ly
Mikah Nelson
Ace Nguyen
Angel Ochoa
Tvisha Patel
Kylie Ryland
Rui Wu
Week 1 (Jan 8)
T) Introductions
TR) work environment setup, HTML, manifest

Web page creation setup
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.

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:'art102'
    • Password: will give in class
    • SSH Private Key: None
  • Navigate to 'Sites/w_24'
  • Create a folder (File->New Folder) in the 'w_24' 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/~art102/w_24/
    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.
To copy HTML/CSS/JavaScript from my examples:

Using Safari on computer:
  • If you cannot see "Develop" in your Safari menu:
    • Go to Safari->Settings->Advanced and check the box that says "Show features for developers"
  • If/When you see "Develop" in your Safari menu:
    • Go to Develop->Show Page Source
    • Select the text you want to copy
    • Use command+c to copy the text
    • Use command+v to paste the text into your document in Brackets.
Using Chrome on computer:
  • Go View-> Developer->View Source
  • Select the text you want to copy
  • Use command/control+c to copy the text
  • Use command/control+v to paste the text into your document in Brackets.

HTML/CSS Examples
HTML/CSS Tutorials
Week 2 (Jan 15)
T) JavaScript/p5.js intro, mouseX/mouseY, random

Due: Home page
  • Make a simple homepage in HTML.
  • 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 (there will be links under "students" above, your page should be loaded when you click your name)
For those with more experience with HTML (including Art 22 students from F 23)
  • Use a manifest.json file to make your home page, or another page you made before, a standalone app.
  • Play with the various settings in the manifest file.
  • Make an icon for your app.

Javascript/p5.js App Examples
p5.js reference/tutorials
Reference:

p5.js Reference

Video Tutorials:

These tutorials are using the p5 code editor. We are writing the code into web pages using the software "Brackets" (or other text editors).

The Coding Train p5.js: Shapes and Drawing
The Coding Train p5.js: Color
The Coding Train: Variables - Mouse Input
The Coding Train: Defining Variables
The Coding Train: Randomness
TR) Device Motion

Due: 1. It's an App!
Make a simple app using HTML and p5.js
  • Create basic shapes (see the p5.js Reference for a list of shapes)
  • If you are new to p5.js you can use my examples as a starting point.
  • Use random and/or mouseX/mouseY to change the color and position of the shapes.
  • Link to the HTML page from your homepage, use the number 1 in the link.
In addition, try to:
  • Use a manifest.json file to make your HTML file a standalone app. See example from last class.
  • Make an icon for your app.

Javascript/p5.js App Examples
p5.js reference/tutorials
Week 3 (Jan 22)
T) Device Rotation, Lab - working on the "Introverted App"

Due: 2. Device Motion Exercise
Make a simple app using HTML and p5.js
  • Use accelerationX/accelerationY/accelerationZ
  • The user's movement should make something happen, it could play sounds, display text, change colors and shapes etc.
  • Link to the HTML page from your homepage, use the number 2 in the link.

Javascript/p5.js App Examples
p5.js reference/tutorials
TR) Manifest.json, Lab - working on the "Introverted App"

Javascript/p5.js App Examples/Tutorials
Week 4 (Jan 29)
T) Crit.
Due: 3. Introverted App
Make an app that deals with issues of isolation and introversion related to the use of mobile devices. You can use images, sound, text (and on android, vibration).
  • The app should have some kind of user interaction: responding to how/where the user touches the screen, how they hold or move the device etc.
  • (More advanced options could be to make an app that reacts to sounds or gestures using mic and camera input.)
  • Make a link to the app on your homepage, use the number 3 in your link.
In addition, try to:
  • Use a manifest.json file to make your HTML file a standalone app. See example from week 1.
  • Make a name/title of your app short enough to look good when the app is added to the home screen.
  • Make an icon for your app.
TR) No class (work on reading assignment)
Week 5 (Feb 5)
T) Geolocation

Due: 4. Reading
Read: Chapter 6 Auxiliary Organs: An Ethics of the Extended Mind, Nick Srnicek from The Imaginary App (Software Studies) Edited by Paul D. Miller and Svitlana Matviyenko

Answer the questions below in writing. Make a web page with the questions and your answers. Link to the page from your homepage using the number 4 in your link.
  1. According to the author, how are we, humans, integrated into a “digital layer of augmentation” which “increasingly permeates our world”?
  2. The author talks about how apps can extend our minds and perception. What are some of the examples he brings up?
  3. What are some examples you can think of?
  4. According to Metzinger’s research, what happens in us when we see an object? What implications of these findings does the author mention?
  5. According to the author, how has mobile technologies changed humans’ everyday behaviors?
  6. How do you imagine your everyday behaviors would be different if mobile technologies disappeared over night?
  7. What does the author believe is the role of the artist with this the shift in human kind brought on by the shifts he describes in the text?
  8. What is something you think is interesting in the text? Describe.

Examples/Reference
TR) Data

Data Examples/Reference

Due: 3b. Manifest file
If you have not already done so:
  • Use a manifest.json file to make your Introverted app a standalone app.
  • Make a name/title of your app short enough to look good when the app is added to the home screen.
  • Make an icon for your app.
  • Add the app to your homescreen and make sure it works/looks good
  • Make a separate link to the updated app, use the number 3b in your link
Due: 5. geo location exercise

Make an app that use geolocation coordinates.
  • Use information about the users location to change color, images, shapes, sounds etc.
  • You can use geo fencing, distance, the actual coordinates.
  • map() and if statements might be helpful.
  • You are not allowed to use the text() function in p5 (to prevent you from just making minor changes to my examples)
  • Link to the app from your homepage using the number 5 in your link.
Week 6 (Feb 12)
T) Sharing with other users

Sharing Examples/Reference
Examples (using p5 and Perl):

Dot size
Random background


Saving text
Reading text


p5 references:

p5.js httpGet
p5.js split string


Perl/UNIX help:

perl_unix_handout.pdf Some info about working with perl and UNIX on our server. We will not be talking about UNIX in class but if you get into perl I will help you get started with UNIX as well.
Beginner Perl Tutorial

Due: 6. data exercise
Make an app that read in data from an external site.
  • You can use my examples above reading in earthquake data, news or weather.
  • Use the data to create text, color, images, shapes, sounds etc.
  • Link to the app from your homepage using the number 6 in your link.
TR) Lab, Working on the extroverted app
Week 7 (Feb 19)
T) Lab, Working on the extroverted app
TR) Crit.

Due: 7. Extroverted App
Make an app that in some way address connectedness related to using mobile devices. The app should make the user realize, think or feel something about how apps are connecting us to the outside world.

Your app should technically connect to the world around the user by using at least one of the following:
  • geolocation
  • data from some other site (preferably real time data, but other data could be used as well)
  • sharing information between users (by saving/retrieving it from our server using a server side program in perl)
In addition:
  • Make a link to the app on your homepage, use the number 7 in your link.
  • On your home page write a one paragraph statement describing what your app is doing and what you are trying to make the user to feel/think about.
  • Use a manifest.json file to make your HTML file a standalone app.
  • Make a name/title of your app short enough to look good when the app is added to the home screen.
  • Make an icon for your app.
Week 8 (Feb 26)
T)
Due: 8. Final Project Proposal

See final project description in week 10 below. Write a proposal:
  • Describe what your "most important issue in the world" is.
  • Describe how your app is addressing the issue.
  • Describe how your app will function and look.
  • Describe what specific coding features you will be using (such as geolocation, data, rotation).
  • If you are working with an API or external data, list the specific API or site you are getting data from.
  • Include interface sketches.
  • Describe what do you want your audience to experience/feel/think/learn and why.

Make a webpage with the text and images. Link your proposal from your homepage using the number 8 in your link.
TR)
Due: 9. Coding Feature Test
Identify what the core code features are in your final app (such as data, sharing, reading in images etc). Make a program testing one or more of the core features your final app will use. Link to the app on your homepage, use the number 9 in your link.
Week 9 (Mar 4)
T)
Due: 10. Project Progress
Link to your most recent project file, use the number 10 in your link. Do not link to the same file as last week.
Due: 11. App Art Example
  • Find an app that is intended to be an art project that you think is interesting.
  • You can for example look at the winning entries in the ZKM App Art Awards list
  • You can also search the web. It is not that easy to find, you will have to spend some time on it, many apps that come up if you search for apps and art will be apps used to create art, not artworks in themselves.
  • Try to use the app.
  • Make a web page about the app:
    • Write a couple of paragraphs about what the app does, and why you think it is intersting.
    • On your art app page, link to the official page about the app if there is one, or some other page about the app.
    • On your homepage, link to your app art page using the number 11 in the link.

Examples
Art 122 Google Maps API Class Website There are many examples on the page.However due to the page being old and APIs get updated some scripts might not work, and others might work but create warnings.
Acceleration example
Mapping example with a world map (Equirectangular projection)
Mapping example with a US map (Equirectangular projection)
TR) lab
Due: 12. Project Progress
Link to your most recent project file, use the number 12 in your link. Do not link to the same file you linked to on Tuesday.
Week 10 (Mar 11)
T) lab
Due: 13. Project Progress
Link to your most recent project file, use the number 13 in your link. Do not link to the same file you linked to last week.
TR) Final Project Crit.
Due: 14. Final Project
  • Make an app that in some way addresses what is most important to you in the world.
  • The app should make the user think about, or have an experience related to, an aspect of that issue, fact or condition.
  • The app can use any coding features we have used in class and any other p5 or javascript coding feature you are able to use.
  • You can use small snippets of code you find on the web or made by chatGPT but you have to understand all the code you are using and you have to write where you got it from.
  • The app has to function properly. No javascript errors. Fix/remove everything that cause an error in the javascript console.
  • Use a manifest file to make a standalone app.
  • Make an icon for the app
  • On your home page write a one paragraph statement describing what your app is doing and what you are trying to make the user to feel/think about.
  • Link to the app from your homepage, use nr 14 in your link.


The project is graded on effort, conceptual originality, and aesthetic and technical accomplishment.
Class Readings:

Chapter from The Imaginary App (Software Studies) Edited by Paul D. Miller and Svitlana Matviyenko
Text editors:

Brackets, a basic free text editor (Mac/Windows/Linux)
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)

SFTP client:

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

Debug software:
Inspect, To debug Android on Mac, and Android and iOS on windows. Free for two weeks.
To debug Android on PC (have not tried it)
Online Tutorials and Help:

HTML
CSS
JavaScript
p5.js Reference
Progressive Web Apps explained on MDN
HTML Validation
Check if your phone supports a specific feature.
Libraries and APIs:

webRTC (Web Real-Time Communication) samples
Mozilla Web APIs
Progressive Web App "Stores":

App Scope
findPWA
PWA List
Examples of, and texts about, app art:

ZKM App Art Awards
ZKM App Art Awards 2017

Selected apps from ZKM App Art Award
David Colombini: The Weather Followers
Fragmenting: Your Phone Needs To Cool Down
App Art by Rainer Kohlberger
Sacrificium by Joanna Dauner

About Franky Aguilar's app art
Totally 'FarrOut': How I Made My Own Art App

David Shrigley: "Light Switch" (the app does not exist anymore, this is the animation version)
About David Shrigley's "Light Switch"

XYZ app by Jodi
About Serendipitor by Marc Shepard (no longer available for download)
Serendipitor by Marc Shepard (no longer available for download)
indeterminate hikes+ by ecoarttech
Interview with ecoarttech
Follower by Lauren McCarthy
Phoney by Julia Christensen (cannot find link to download app or in app store)
Jody Zellen's Apps (best to first look at her site on a computer. Click on "apps")

Stanford Mobile Phone Orchestra
Stanford Mobile Phone Orchestra video

Send Me To Heaven android app
About Send Me To Heaven
About I Am Rich
Data etc.:

Data from "Corgis", several kinds of data
Data from "Kaggle", several kinds of data

Data from USGS, last days's earthquakes
About USGS earthquake data

freesound - Sound effects etc.
freesfx - Sound effects etc.