Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Winnie Soon: Feminist Coding in p5.js | Can Software be Feminist?

First workshop: 25 Nov 2017 in Aarhus (as part of !=null platform, organized by Anders Visti)

/This is a one day feminist coding workshop primarily for women, queers, LGBT, non-binaries and minorities who are interested in programming, exploring the intersection of art, language, technology and feminism. The workshop addresses computer code as a language that is designed for both human and machine reading. Participants will base on the artwork/digital poetry/composition ‘Vocable Code’ to learn basic coding concepts, and they will also explore code as expressive and aesthetic materials, such as computer code as poetic text that is performative and executable. Through thinking and discussing code and (non)binary logics, participants will incorporate textual materials, visual effects and recorded voices to produce their own web-based algorithmic vocable code./

5 hrs run-down:

  1. Introduction
  2. Technical Setup


  1. Activity A - Decoding, Reading and Interpreting Code and Logics
  2. The basic of coding


  1. Activity B - Tinkering Code
  2. Discussion
  3. Activity C - Writing, Thinking and Creating your own vocable code
  4. Performing Code


Technical Setup

  • Firefox Browser => for by passing the cross origin requests
  • The Firefox browser: Open the console panel (Browser > Tools > Web developer > Web console)
  • Speaker is on and workable
  • Code editor (try downloading atom)
  • Download p5.js here > Unzip > drag the html file (under the folder called empty-example) to the browser > anything happens?
  • Then drag sketch.js to atom > go to p5js get started > copy the code to atom > refresh your browser

!NB: unzip (either double click or on linux> terminal "unzip file.zip -d destination_folder", see more here)

Activity A - Decoding, Reading and Interpreting Code and Logics

  • Download the Source code -> click the green download button -> unzip the file -> drag the index.html file (under the folder "vocablecode_program") onto the browser.

  • Mini exA1: Identify the possible logics and effects based on what you see and what you hear. (Run Vocable Code by dragging the index.html file-under the folder called "vocablecode_program"-onto your browser) Directions:

    • Visual (what you see?)
    • Sound (what you hear?)
    • Process (what are the sequences?)
    • Time (what have been changed over time?)
    • Data (What kind of data are involved?)
  • The concept of pseudocode (see more here)

    • Can be used as an informal tool for planning/outlining your programs and algorithms
    • Human readable: it consists of short phrases that are used to explain specific tasks in high level
    • Focuses on logics but not syntaxes
    • Independent of any programming language
  • Mini ExA2: Reading code and Wild Guess: Mapping the source code with the identifiable items from exA1

The basic of coding

Activity B: Tinkering code

  • The concept of Tinkering

  • Mini exB1: Exploring numbers and their effects and how things work - Changing parameters esp numbers (e.g color no in 'Background()' and 'this.gradient()', size of text in 'this.text', speed in 'this.speed = random()', random no range in 'random()', etc. in vocableCode_xx.js)

  • Mini exB2: Exploring the semantic and poetic aspect of code by changing the names to create your own codework (both in js and json). How names and logics are conflated both technically and poetically? (When you change the name, make sure you have searched for other parts of the program that have used the same name. e.g variable 'non_binary' or 'withPride' is used more than one time in the program.)

!NB1: For every change of the number/name, save the file and then refresh the browser (with your web console opens to check for any errors may occur.)

!NB2: Rememeber what you have done (which line of code you have changed) and test it on your browser for any tiny changes made. (good for error checking)

!NB3: Don't panic if nothing show up on the webpage or with error msg on the web console. It is ok to encounter errors as they help us to understand how things work/not work, as well as the underlying logics. You can always undo and try again.


  • Where do you normally read/see a poem?
  • What consitite poetry?
  • How is Vocable Code (as a codework) different from what/where you normally read a poem?
  • What does it mean by feminist coding and feminist software? How may we explore that?

Activity C: Writing, Thinking and Creating your own vocable code

Work in pairs:

  • Mini exC1: Where is your own voice?

    • What is queer? (see feministing and the comments of the article)
    • Try to create two voices and two statments of your own, and see if you can incorporate that into Vocable Code (1. Record two of your voices in wav file format 2. see voices.json file and add your name and statements)
      • Record your/other voices through your smartphone (download a free app e.g VoiceRecorder, or you can try with my voice recorder)
      • The wav files are named in this convention: firstname2.wav and firstname3.wav -> all are put under the folder called "inclusive\voices"
      • The voices.json file is structured in this convention:
        • iam: "yourfirstname",
        • lastname: "yourlastname",
        • statement2: "your first statement",
        • statement3: "your second statement"
    • You may also try to modify/delete/add existing voices and statements
    • See the constrains here > Go to Process
  • Mini exC2 (optional): Add/change functions, effects and behaviors in the js file

    • e.g changing background and font color, text size, movement from vertical to horizontal and add shapes in the background, and many others...
  • Mini exC3 (optional): If you have given a chance to change entirely about Vocable Code, what will you change and how will you change it? What might be the potential logic/algorithm that you want to add in order to write a codework (code poetry)? Make a sketch or pseudocode!

Performing Code

Further learning and reading