appendices

Schedule

• I am available most Fridays, 1-4 pm (for at least part of that time)
• I am not available then, but still want to hear about the group (List your preferred availability below)
• Other:

What do you want Code Collective to offer? (Add your ideas!)

• Co-working space
• Online resource hub
• PhD-led workshops
• Student-led workshops
• Student-led drop-in tutoring
• Student-organized project showcase
• Visits to hackathons or other outside events and organizations
• Other:

What workshops interest you? (Add your ideas!)

• Activist Chatbots and Other Automated Agents
• Environmental Data and Sensor Networks
• Machine Learning Tactics for Artists
• Making Electronic Instruments
• Movement-Based Interaction Design
• Poetics of Regular Expressions
• Python as a Second Language
• Raspberry Pi for Tactical Media
• Visualizing Your Personal Data
• Other:

Bonus

• What projects do you want to work on? What would keep you coming back? What skills can you share with the collective? Any fears / interests / context you want to mention?

Proposal: Code Collective

The Code Collective will be a space for MAP + iMAP students to develop their computational media practice in a flexible, collaborative setting that strengthens the Media Arts + Practice community. It supports gaining computer science skills in an engaging, non-intimidating, non-engineering environment—instead focusing on artistic strategies for learning and making with code, emphasizing criticality and experimentation.

Code Collective draws from models like Girls Who Code, UCSD’s ICAM and Stanford’s CS+X majors, and Gene Kogan’s Machine Learning for Artists. It addresses the need in Media Arts + Practice for additional emphasis on computational media practices expressed by students. Designed as an emergent organization responsive to community needs, Code Collective will be flexible enough to support existing IML instruction and in-class projects (e.g. for 288, 300, 400), and it will also incorporate programming languages and code practices not currently prioritized within IML curricula so that students may extend their artistic practice and professionalization.

Potential components of Code Collective will include workshops led by iMAP PhD students and invited guests; student-led tutoring, coworking, and troubleshooting; online resource-sharing; and visits to local hackathons or other campus groups. Sample workshops may include Python as a second language, machine learning tools and tactics, movement-based interaction design, environmental data and sensor networks, raspberry pi for tactical media, visualizing personal data APIs, and the poetics of regular expressions.

past

• Help Me Code IAI zine making workshop, Sarah Ciston
• Feminist.AI, Christine Meinders
• Movement-based interaction design, (Fidelia Lam)
• Machine Learning Tactics for Artists, (Catherine Griffiths)
• Getting Started with ML5.js, Sarah Ciston
• 8-bit Game Design, (Todd Furmanski)
• Coding for Live Performance, (Ben Nicholson)
• Multisensory Touch Electronics, Emily Van Bellingham
• Coem: An esolang for poetics, Katherine Yang

planned or dreamed

• Ethics of NFTs for Artists: If Such a Thing Is Possible
• Bias in NLP Language & Ethical AI
• Group coding: we each take some time to attempt a solution to a simple but not trivial given problem, then come back and talk about our approaches
• Co-write community values & docs
• Anti-hackathon
• Remix videos on the command line
• Music visualization with Pure Data
• Audio signal processing
• P5js and P5 Live
• Data moshing
• DIY Portfolio Examples and How to Code Them
• Shaders for scaredy cats
• Internships and jobs for multi-/inter-disciplinary work like ours
• Webscraping with Python
• Merging theory and content with code and practice. Choosing tools that are ethically and conceptually grounded.

Preparation

No particular experience is required! Any kind of field or background is helpful to get started; we’ll meet you where you are. You don’t have to install or buy anything in advance either; we’ll handle that together.

So that we can focus during our time together, it will help if you have in mind a project or a skill you want to work on. We’re going to focus on text-based tools, so here’s what you can prep in advance:

Have a dataset (text) in mind you’re interested to work with—this could be your own journal, something from the USC Libraries Digital Collection, or anything goes. For example, your corpus could be the entire series of the show Community, like @kayserifserif, or these sarcastic and serious news headlines, or the archived pages from the early internet sites like Friendster and Geosities.

Don’t worry, no matter your existing level of comfort with code, even if it’s none, we will meet you where you are. Just start from asking, What do you want to make, and why?

Goals

• You’ll understand how artists, engineers, makers, and academics can embrace coding with a critical eye toward ethics and a creative glint that can help imagine more equitable futures.
• You will gain comfort exploring data and coding, building on any existing skills with new perspectives both technical and critical. You will also emerge with a zine about what we’ve learned.
• You’ll develop your portfolio of individual and collaborative code projects, plus the opportunity to continue in the fall with the Code Collective community.

Format

This course is a workshop in exploratory programming, run as an open-format collaboratory. Its self-directed learning model requires motivated student engagement and rewards artistic risk-taking. As lab leader I provide technical and theoretical resources to facilitate your projects, and as a group we agree to cultivate a supportive environment for creating. Together we bring our individual skill sets and abilities; our interest to learn from each other and together; and our open minds, mutual respect, and sense of possibility. Practically, this means you come each day ready to discuss the topic and to support each other’s co-learning, ideating, and troubleshooting; and you’ll have time to develop your code-based projects with support from the collaboratory. Because of the lab nature of this course, we will decide as a group how to work through the readings and where to take them next, thus this schedule and reading list are subject to change depending on your projects and interests.

Weekly sessions will be divided into “Studio” days, during which we code together and troubleshoot our work, and “Salon” days, during which we discuss something we’ve read and reflect on the practices we’re undertaking. Each will have a text or tutorial attached that pertains to the broader theme. Still the work will be self-directed toward each student’s particular project, explorations, and goals. Through collaboration, co-learning, co-teaching, We discover how much we already know and how much we can build on that together.

Not So Vanilla 🍦 “Just” Javascript

What Is Javascript?

“The programming language of HTML and the Web. Interaction with the user, animation, etc, all done with JavaScript.” (Q)

What’s a Javascript Library

P5 is a Javascript library, which means it’s an add-on set of Javascript that’s been pre-written to make certain things easy. But there’s a lot Javascript can already do.

Pssst, we’ve been coding in Javascript this whole time!

And there’s a TON of other JS libraries for ANY specialized thing you might want to do, from make sleek websites, to run servers, to music, virtual reality, or machine learning. Here’s a list

We say “vanilla”🍦 Javascript when we mean not using any added libraries, but usually you’re always using some… this demo will offer some code concepts that apply to web development as well as general times you’re working with Javascript situations.

Review: P5.js DOM

Besides adding functions to JS, the P5.js library “wraps” up some Javascript to simplify the syntax.

P5’s DOM functions: - selectElement() - createElement('tag', [content inside]) - createDiv([html/content]) - Things to do on a selected or created element(el): - el.style('color', 'black'), el.style('font-size', '18px') - el.position(0,0) (absolute position) - el.attribute('align', 'center') - el.hide(), el.show() - el.size() - el.html(<tag></tag)>, true) note: the additon of true appends instead of replacing (if no argument, returns existing) - el.parent(), el.child() attaches new thing to existing thing - Events: createButton(), el.mouseClicked(), el.mouseOver(), el.mouseOut(), changed(), createInput() - Highly recommend the callbacks on multiple elements video

These are all “wrappers” of the same code you learned to write in plain JS. Behind the scenes, it’s calling that plain JS to do this work.

Essential Javascript for Web

• Select by id, class, element/tag, parent, child

  • document.getElementById('id') document.getElementByClassName('class') document.querySelector('#id') document.querySelectorAll('.class')
  • Note the different syntax options. Document for more choices.
  • set it to a variable name to ‘save’ it for reuse: let line = document.querySelector('#line') //selects the element with the id line

• Create makes new elements and Append places the items we made where we want them

  let button = document.createElement("BUTTON"); // creates a button but hasn't put it anywhere yet
  button.innerHTML = "click me"; // puts text in the button
  line.appendChild(button); // adds a button inside every paragraph

• Add/remove class is confusing, don’t worry because they’re each doing slightly different things

  • el.className = 'class' set equal to className makes it that class only, erases any others
  • OR: el.classList.toggle('class') note toggle on/off choice can avoid a check before if/then but might intro errors
  • OR: add/remove from classList el.classList.add('class') and el.classList.remove('class') note the name is in quotes but doesn’t need dot before it because class is in the attribute, …maintains a list of classes

• Modify Styles

  • el.style.color = 'blue'
  • el.style.borderBottom = '1px dotted black'

• Events:

  • think about how these events combine using 1) thing you touch and 2) thing you want to affect
  • click, scroll, hover, mouseEnter/Leave, slideToggle etc. onclick vs item.click()
  • Hide/show/fade/delay/toggle all done with callbacks: document.addEventListener('eventname', functionName) ``
  • Transformations

Note where elements appear, in the canvas vs in the rest of the DOM/page depending on how you’re writing them. As you’re blending the P5 library with other Javascript this can get confusing. P5 has ways to do both, but they’re different. So does plain JS. They serve different purposes: - e.g. Choose createImage() (P5) or document.createElement('IMG') and then appendChild (plainJS) anywhere in the DOM vs choose image() to put it inside a canvas element.
- Choose setup() or draw() depending on if you want it to happen once or repeatedly, only works in P5.

Review: Logics of Code**

You already know (because you know JS) or may see around town:

1. Callbacks and Code Patterns

• MAKE & NAME : create a thing & assign it to a variable so you can keep referring to it

• SCHEDULE & ACT: use functions to say what you want to do with it when

  var thing = new Thingy() //MAKE & NAME
  thing.doStuff('click', actFunction) //SCHED
  
  //ACT
  function actFunction(){
    console.log("outcome")
  }

  Thingy() initializes an object of the class Thingy, which already has a method (function) .doStuff(), we’re saying to run it when ‘click’ happens and to run actFunction()

2. Loops & Conditionals

• if/then and if/else
• for loops for (let i=0; i<list.length;i++){} and for (let l in list){}
• try/catch and the dreaded while

3. Data Types Javascript is wild & doesn’t label its types like other languages do

• individual:
  • strings (“text”)
  • numbers (integers, floats, binary, etc.)
  • boolean (True, False)
• groups:
  • arrays aka lists
  • objects aka dictionaries or key-value paired lists etc.
  • sets (stricter lists of unique items)
  • functions
• imported data that can be converted to the above: JSON, CSV, TXT, etc.

1. Additional Considerations & Weirdnesses

• Helps to write pseudocode to start
• Comments are a great debug strategy (Note where your console.log() comments appear in glitch, frontend vs backend concepts)
• Include error handling.
• let works the same as var and const, they all initialize variables. Let is the preferred going forward. JS used to distinguish between variable and constant.
• arrow functions: if you see them, don’t let them confuse you: let myFunction = () => console.log("sarah") is same as ``` function myFunction(){ console.log(“sarah”) }
• Glitch has a back-end/server-side Log/Console besides the front-end console you’re used to seeing in the browser’s dev tools. Check it out!

BONUS: Libraries & Frameworks & Expansion Oh My!

Ways people have solved problems, tried to make life easier and made it more complicated, aka words you might see around town & more to think about later

#### Helpers

• [p5]
• [JQuery]
• What are some others you’ve heard of? Do you know what they do?

#### Design for web layout, look, & feel

• Handlebars templating language, pre-built buttons and CSS for your sites, lots of others like it, such as…
• Bootstrap, Semantic.io, Material.io (React)
• [React] a whole superset of JS built by Facebook to make complex sites with many components. Other Frameworks like it are Vue and Angular. You only need to learn one of these, if any.

#### Design tools for specific tasks

• Tiny Tools Directory by Everest Pipkin
• ScrollMagic scroll effects
• [Paper.js] curves & swerves
• [Three.js] 3D stuff

#### Servers & Offline

• [Node.js] a superset of Javascript that lets you do servers and use JS without a browser, just in your local machine. A great place to start with Node is the Glitch template! Use Node for websites where you want a database or need to send info back and forth to a server.
• [Express.js] makes it easy to make a server, part of the Node template in Glitch

#### Machine Learning

• ML5, part of the p5/Processing family, is a simpler version of (aka built on/wrapper of Tensorflow)
• [Tensorflow.js]
• Lots of little ML tools out there, another lesson maybe for code collective?

Your Project