1 of 32

CODEWORDS�PAPER�PROTOTYPES &

PSEUDOCODE

2 of 32

IMPORT text and music

SPLIT into individual words

START 3D SPACE

PLAY music

DISPLAY words randomly on canvas (X,Y and Z)

PLAY sound when each word is displayed

CONNECT words with line in sentence order

ROTATE around Y axis

WHEN mouse is dragged rotate around Y axis according to mouseX

FUNCTION next

IF next button is pressed

THEN display and connect next sentence

FUNCTION previous

IF previous button is pressed

THEN display previous sentence

FUNCTION reload

IF reload button is pressed

THEN reload current sentence display

ENDIF

new idea: should have a slider to “compress time and space” (reduce random range)

3 of 32

4 of 32

5 of 32

6 of 32

7 of 32

Amy

  • Realistic movements (leaves rustling)
  • Sound Based on Movement
  • Colour Changing/inverting

START

PLAY jungle noises

DISPLAY jungle leaves overlapping

IMPORT photos/animations

WHEN mouse moves across leaves

THEN

-INVERT all the colours on screen x 1

- ANIMATE leaves rustling

- PLAY tiger rawr

- DISPLAY/ANIMATE sound lines

REPEAT w/ delay

IF mouse continues to move

STOP when inverted colours cycle through x 3

THEN

DISPLAY text “Click to see the beast”

WHEN leaves are clicked

THEN rotate leaves towards the closest screen edge on x-axis

THEN

DISPLAY kitty sleeping and LOOP animation

PLAY kitty purring

END

8 of 32

Concept :

  • Codeword ( Typographic )
  • Glitch Process ( Theme )
  • Technological design
  • Pop-culture ( Colours )

Peem (Plan1)

Part A : Glitch start ( B & W )

Part B : Codewords come in with Typographic

Part C : Typographic turn to glitch ( B&W )

Part D : Incorporate “Pop-culture” by colours

Part E : Showing the concept that glitch isn’t

Create by an accident. All is about process

And technological design

Part F : Explaining the difference between glitch and accident ( or failure )

9 of 32

Peem - Plan2 - Chosen for FINAL

Pseudocode

Start the game

PRESS : Enter

Else the game won’t start

IF : the users match the “Right key [G]” to the first Alphabet of the word [Gremlins] display screen the first “Meaning will appear”.

**FIRST MEANING = “ Absence : The absence of meaning in this case the presence of all meanings.”

ELSE : match the “Wrong Keys” the result will be “Something else will appear”.

END IF

----------

IF : the users match the “Right key [L]” to the first Alphabet of the word [Lurking] display screen the second “Meaning will appear”.

**SECOND MEANING = “Meaning : Presence of all meanings, absolute ambiguity, a construction outside meaning.”

ELSE : match the “Wrong Keys” the result will be “Something else will appear”.

END IF

----------

IF : the users match the “Right key [I]” to the first Alphabet of the word [In] display screen the third “Meaning will appear”.

**THIRD MEANING = “Construct : Within the constructed ruins of glitch, new possibilities and new meaning arise.”

ELSE : match the “Wrong Keys” the result will be “Something else will appear”.

END IF

----------

IF : the users match the “Right key [T]” to the first Alphabet of the word [The] display screen the fourth “Meaning will appear”.

**FOURTH MEANING = “Generate : The glitch generate new understanding of techno-culture through the gestations of “Glitchspeak “.”

ELSE : match the “Wrong Keys” the result will be “Something else will appear”.

END IF

----------

IF : the users match the “Right key [C]” to the first Alphabet of the word [Computer] display screen the fifth “Meaning will appear”.

**FIFTH MEANING = “Generate : The glitch generate new understanding of techno-culture through the gestations of “Glitchspeak “.”

ELSE : match the “Wrong Keys” the result will be “Something else will appear”.

END IF

----------

IF : the users match the “Right key [H]” to the first Alphabet of the word [Hardware] display screen the sixth “Meaning will appear”.

**SIXTH MEANING = Expressions : Glitchspeak, glitch’s constantly growing vocabulary of new expressions.

ELSE : match the “Wrong Keys” the result will be “Something else will appear”.

END IF

----------

IF : The users match 3 wrong

The game is over

ELSE : To try again

PRESS ENTER TO RESTART THE GAME AGAIN

END GAME!

Chosen Reading : Glitch moment (um)

Topic : (pg) 44 : Creating the “perfect glitch” using critical media aesthetics

“Game logic for reading”

Message : ( Key) - From the text

Within the constructed ruins of glitch, new possibilities and new meaning arise.There is something more than just destruction: new understandings lie just beyond the tipping point.The glitch generate new understanding of techno-culture through the gestations of Glitchspeak, glitch’s constantly growing vocabulary of new expressions.

Second Message - From the text

The absence of meaning its in this case the presence of all meanings, absolute ambiguity, a construction outside meaning. Within the constructed ruins of glitch, new possibilities and new meaning arise.

Purpose of the game :

Game logic reading to enable users to learn the meaning of creating "THE PERFECT GLITCH" ( Chosen text) by trying to match the [Key] to the first alphabet of each words appear on the screen. If the users match the right key then the meanings will appear else if the users match the wrong key something else will appear. If the users match wrong 3 times the game will over..

10 of 32

Peem - Plan2 (FINAL : Development )

After I was having a discussion with Andy on week 11 about my “Game logic for reading”. Andy was mentioned on improving the UI to indicate the “ Gameness” gamifying reading with glitch aesthetic. Because the original text was seem to be a secondary focus and does not jump out as much. I then play around more with the prototype in order to make the text become more standout, more obvious and bring out the original theory.

The development here : I developed from my previous plan so that when the users input the right keys that match the first alphabet of each words ( G, L, I, T, C,H ) appear on the screen then the meanings of “ Creating the perfect Glitch “ will appear. I played around with the layout in which position the meanings will be display on the screen and how it is going to be display that standout, nice and easy to read.

Layout ( 1 )

Layout ( 2 )

More progress on the development toward Gamify reading with glitch aesthetic

11 of 32

Bridie

This is a very primitive test to communicate the text. With a click the words are pulled out of the jumble. The remaining words settle (as if they were in a body of water).

Themes: Stopping of time, losing self in creation

Cyberpsychogeography - Mark Amerika

12 of 32

Taj

START

show preloaded text in legible font play quiet humming sound

IF user scrolls down Type becomes illegible sound playing gets louder

ELSE IF user does not scroll leave type legible and sound quiet

IF user scrolls up make type more legible �make sound quiet

UNLESS user has already scrolled up THEN leave type legible leave sound quiet

13 of 32

Na

INPUT virus

IF run button is clicked

PRINT "virus"

ENDIF

IF self-reproduce button is clicked THEN

Copy the word virus endlessly

ELSE IF jump and blend button is clicked THEN

replace every word virus touch with virus

ELSE IF delete is clicked THEN

send virus to delete random word

ELSE

paragraph stay the same

ENDIF

IF text 1 is clicked THEN

PRINT "Transform viruses' heretoforce hacker driven pseudo-evolution

into something very like real thing"

ELSE IF text 2 is clicked THEN

PRINT "He breeds worm"

ELSE IF text 3 is clicked THEN

PRINT "At this point some individuals will be captured and brought

into laboratories"

ELSE

paragraph that is printed stay in the same coordinates

ENDIF

FOR every the individual letter that is clicked

group selected letters

ENDFOR

PRECONDITON: Group of letter is equal to 1

WHILE group of letter < 3

IF group of letter is place in the drop in box 1 THEN

Box1 is filled

ELSE IF group of letter is place in the drop in box2 THEN

Box2 is filled

ENDWHILE

FOR every group of letters in box 1 and box2

combine group of letter from box 1 with group of letter from box2

PRINT

ENDFOR

IF the new word touch any word in paragraph

THEN word from paragraph fall down to the edge of the canvas

ENDIF

1

2

  • Minigame: you get to mix/replicate/ or mutate the word
  • The idea is at the end you will have your own virus farm
  • At the end you can’t read this paragraph anymore

Going forward: combining these two idea

  • Idea 1
    • Duplicate
    • Word touching = change to another word
    • delete
  • Idea 2
    • Pull word apart
    • Word fall based on gravity

14 of 32

Ruby

The background will swivel around the screen in response to the arrow keys. The ‘dots’ move around the screen as if gravity is pulling them down.

15 of 32

Kristine

  • 3D space with transparent layers with sentences
  • Using p5.easycam library to move around in the 3D space
  • The user moves through the layers to read the sentences
  • As the user passes a new layer of text, a new layer of sound starts to play

pseudocode first draft

START 3D SPACE

DISPLAY rectangles with type on Z-axis

PLAY sound

WHEN scroll up or down

ZOOM in or out of the Z-axis

PLAY sound when passing a new rect

IF fully zoomed out

PLAY all sounds

16 of 32

JACKIE

START

DISPLAY Live Video

DISPLAY "<- OSCILLATE ->"

SET driftSpeed = 0

SET sensorLeft

SET sensorRight

IF user moves over sensorLeft || sensorRight THEN

INPUT new line of text

CLEAR "<- OSCILLATE ->"

IF mouse over any word THEN

STOP word jitter

ELSE jitter words

ENDIF

FUNCTION mousePressed

IF on words THEN

words 3D flyaway

INCREMENT driftSpeed

ENDIF

END

  • Text scrolls over live video, you can see yourself the whole time.
  • When you oscillate, new line of text appears.

Idea is very subject to change at the moment :P

NEEDS:

  • Live video feed
  • May be using Vida to sense where user is on camera (https://www.tetoki.eu/vida/)
  • 3D space.. p5.3D

  • Text is jittering, but when mouse hovers it stops.
  • When clicked, words fly off in 3D space.

17 of 32

Jamie

// VIRUSES AREN'T BAD I PROMISE

IF no text on the page,

Press button.

ELSE no text will display.

WHILE button has been pressed,

Search for random headline about computer Viruses using an API.

END WHILE

IF MousePressed on word, use rITA.js to change to another word

// Idea is to remove negative words from a headline

ELSE words won't change

IF you are satisfied with what is written,

Post to twitter using another API ?

ELSE Press button to create new headline

18 of 32

ray

Part A Typing effect (main, background,Looping)

Print text

Play typing sound

IT IS WORTHLESS, IT IS DATA THAT WORRIES ME.

Part B Pop up ads that avoiding the mouse

Create ads

IF user moves mouse

THEN ads move in an opposite direction

Else the ads moves randomly

OT BLUE BALLS, BUDDY? SAME OLD SAME OLD? FUCK THAT SHIT MAN....GO MONSTER! MONSTER IS THE MOST POTENT FORM OF DAMI- ANA EVER GROWN. AND WE GOT IT HERE IN CUM CITY! TAKE A TRIP TO CUM CITY AND WATCH YOUR LIFE TURN FROM SHITTY TO . . . WORSE!

Part C Pop up ads with Highlight text

IF user moves mouse

THEN ads grow bigger

IF mouse reach the highlight area

THEN you die

WELL,YEAH ABE-BABES,WE’RE ALL HOME NOW! HOME ALONE! TOUCH ME YOU DIE!”

19 of 32

Fergus

* Pseudocode and a more refined paper prototype is on the way *

Typography created through the formation of cells (flocking)

Interaction between visual and sound as the sound intensity is increased as cells are moving through speed/pitch/volume/layering.

START

LOOP AMBIENT MUSIC

RANDOMLY GENERATE CELLS

DISPLAY CYCLING “FREE” -> “INTERNATIONAL” -> “UNIVERSITY”

IF MOUSEPRESSED

DISPLAY “PHRASE_1” WITH CELLS

IF MOUSEPRESSED (AGAIN)

DISPLAY “PHRASE_2” WITH CELLS

IF MOUSEPRESSED (AGAIN)

DISPLAY “PHRASE_3” WITH CELLS

IF MOUSEPRESSED (AGAIN)

DISPLAY “PHRASE_4” WITH CELLS

IF MOUSEPRESSED

RETURN TO START

WHEN CELLS ARE MOVING

INCREASE MUSIC INTENSITY

Typography created through the formation of cells (flocking)

Interaction between visual and sound as the sound intensity is increased as cells are moving through speed/pitch/volume/layering.

20 of 32

Faye

A new framework, of visual projection, overlays the “speech chain” of the communication model, and we begin to complicate, beyond the possibility of a comprehensive reading, the display with textual blocks and graphic elements that cancel each other out until there is only one exit available—the looming eye at the bottom of the page.

Poetics in the Expanded Field: Textual, Visual, Digital…

By Barrett Watten

https://github.com/Faye12/CodeWord/blob/master/Week_7/readme.md

START

Loop music DNA

DISPLAY textual ring

If MOUSEPRESS

textual rings rotate as 3D dimension

adjust the gap between the rings

Else End If

IF MOUSEPRESS

shapes disappear

textual blocks drop from one side to the other

IF MOUSEPRESS

textual blocks cancel each other

If Mouse move to the right

the eye follows to the right

If Mouse move to the left

the eye follows to the left

Else End if

1

2

3

4

21 of 32

Win

The Time of Digital Poetry: From Object to Event

N. Katherine Hayles

As Cayley (1998b) points out, alphabetic language can be considered a digital structure because it consists of a small symbol set that can be endlessly combined and recombined to produce an infinite number of words and texts. The computer (or, as he prefers to call it, the “programmaton”) is the most conspicuous instance of networked and programmable media (in Cayley’s terms, “npm”) that rely on binary code, but it is by no means the first medium to use digitized language.

start

Function show text:

“what do you expect when open a book?”

If open book

INPUT alphabet matrix const = “abcdefghijklmnopqrstuvwxyz + random squares”

PRINT “alphabetic language can be considered a digital structure because it consists of a small symbol set that can be “

Initialize “ alphabet matrix”

PRINT

“Endlessly Combined”

“and recombined”

“to produce an infinite number of words and texts.”

Repeat “INFINITE”

Function mouse click

“INFINITE” = “∞”

Transform

Rotation

If number of “∞” is greater than 12

PRINT “programmaton”

INPUT the graphic of a computer

PRINT “is the most conspicuous instance of networked and programmable media”

Form “NPM”

PRINT “that rely on binary code”

INPUT alphabet matrix

Function interpret code

PRINT

“ELECTRONIC LITERATURE”

Function Keyboard Pressed

restart

book

Open book

Infinite x ∞ times

Infinite = ∞

computer

Electronic Literature

Click Link for inspiration/moodboard

https://github.com/WWsiyang/CODEWORD/blob/master/SKO/Week_08/readme.md

Function Needed

- Text random matrix

- Text formation

- transformation/transition

- Alphabets form into sentence

- Reset

22 of 32

Natasha

Display split screen with a word bank

IF mouse drags text from left to right

THEN text would gradually distort

ELSE text will stay the same

When text go through the process of distortion, sound turns on.

Display mirror.

IF no text on page

Press any key

ElSE no text is visible

WHILE keypressed

Text will appear on the left of the screen and a distorted reflection on the right side

1.

2.

23 of 32

Celia

START OSCILLATING

IMPORT text

DISPLAY split screen with words print/digital

IF mouse hovers over word ‘print’

THEN draw static set of eyes

IF mouse moves away

THEN replace eyes with word

IF mouse hovers over word ‘digital’

THEN draw two eyes bouncing around

half of the screen

IF mouse moves away

THEN replace eyes with word

IF mouse is scrolled

THEN display oscillating transition to reveal next set of words

(repeat for each of the 7 sets of words)

END IF

START

INPUT sentences, split by space to form words

DISPLAY random words from text one by one on canvas (constrained by window width)

WHEN list of words has finished appearing

FUNCTION next

IF key is pressed flock words to correct order

FUNCTION reload

IF key is pressed again restart sketch

(showing new random order of words)

END IF

This is my old idea

This is my new idea!!

It displayed a randomised selection of words from a paragraph, looking at the idea of manipulating order in the digital space to affect meaning/ interpretation

24 of 32

Tom

Pseudocode in Progress….

Also sorry for the lighting did not look as bad on my phone.

25 of 32

Roby

START

IF text is static and not moving THEN reply is static and not moving

IF text is slightly crooked THEN reply is slightly crooked

IF text is moving across the screen THEN reply is moving across the screen

IF text is moving along a circle's path THEN reply is moving along a circle's path

IF text is spread across the screen THEN reply is spread across the screen

...

END

26 of 32

Yutang’s Prototype for OK Text - a Brutal Interactive "Technological Determinism" Experience https://git.io/JUROV

I interpreted the first statement of the OK Text as a warning to the audience, suggesting that the incoming Technological Determinism statements can cause viewer great pain, so I kept it as a warning screen to let user know to proceed with caution.

To create great contrast between a harmless webpage and the cruelty of the technological determinism statements, I’ve planned to have random broken-up texts floating on screen. After testing I’ve determined that four randomly selected and scrambled sentences can form a better experience when displayed on a typical browser screen. The floating texts can react to mouse movement (effect not yet determined).

When user decided to interact, by clicking anywhere on the canvas, a sentence (from the original text) will form by assembling scrambled words. The word that not assembled will fly off the screen, leaving user the statement, the prompt and only one button to continue - OK.

The floating words represent the seemingly nativity of plain technology, which covering the “great pain“ it caused when the technology were enabled with the ability of determine the society.

After pressing the ok button, the screen goes black and four more sets of randomly selected statement will display on a black background.

The background will switch between black and white by each OK click.

Possible

Expansions

In the early phase of prototyping, I’ve created a random cruel statement generator, which contains the basic structure of sentences, with words extracted and filled from a randomiser database. Please see below demonstration.

**Prototype Transcript:**

Your **partner** is **leaving you** because **of your incompetence of taking care of things**. **Do nothing**? →

Your **friend** is **heartbroken** because **you're selfish and never considered others**. **Acting hysterical**?

You **were selected to fly free for a lifetime**, but **couldn't accept in time** because **you were still hang over from the binge drinking last night**. **Cry in bed**? →

You **pitched Netflix and they decided to buy your show**, but **you've missed the final call** because **your partner asked you to go to the servo to pick up dog food**. **Drown in regrets**?

Please see pseudocode in the note area below

27 of 32

Ziyun

IF press start

Texts show up

IF texts “the producing class” show up

Press mouse to read

ELSE

Texts will not appear

IF text “all classes enter into relations of” show up

Choose and click one word from screen

When display ends

Press 1 to go back and check for other words

ElSE

Press mouse to read following texts

IF texts “Their relations are not necessarily dialectical” show up

Press mouse to read

ELSE

Texts will not appear

END IF

IF texts “Their relations are not necessarily dialectical” show up

Press mouse to read

ELSE

Texts will not appear

END IF

28 of 32

Hamish

Paper-Prototype + Pseudocode

START

SCREEN = fillCanvas with colour(255) 100% opacity

TEXT = Broken into words randomly placed across screen

INPUT mic

Mic volume (up) = SCREEN opacity % lowers

Mic volume (down) = SCREEN opacity % rises

TEXT displayed with words broken up at random

Mic volume (up) = text reforming together� Into paragraph

Mic volume (down) = text breaking up into� Seperate words

29 of 32

START

TEXT PROMPT = START TYPING //USER TYPES RANDOMLY ON THE KEYBOARD OR TAPS ON MOBILE SCREEN FOR LETTERS TO AUTOMATICALLY APPEAR ON SCREEN

WHEN LAST LETTER (‘T’ OF WITHOUT) APPEARS ON SCREEN, CURSOR REVEALS ITSELF

IF CURSOR TOUCHES THE EDGE OF A CHARACTER,

CHARACTER FLIES IN A RANDOM DIRECTION UPWARDS ON THE Y AXIS

IF A CHARACTER COLLIDES INTO ANOTHER CHARACTER, BOTH FLY AND FLIP OVER

Samantha

START

TEXT PROMPT = TRACE ALONG DOTTED LINE

WHEN CURSOR MOVES ALONG FROM (X,Y) TO (X,Y), ‘YOU’ CUT-OUT POPS OUT

OUTLINE OF ‘YOU’ IS HIGHLIGHTED TO PROMPT USED TO CLICK

‘YOU’ WILL TRAVEL DOWN TO THE BOTTOM RIGHT OF THE PAGE. THE ATEA YOU PASSES THROUGH WILL BE ERASED

WHEN ‘YOU’ REACHES (X,Y), REMAINING TEXT FADES AWAY

NEXT FRAME STARTS WHERE ‘YOU’ SLIDES ACROSS TO THE LEFT AND OTHER TEXT APPEARS ON SCREEN

SELECTION OF QUOTES FROM THE GLITCH MOMENT(UM) BY ROSA MENKMAN

“The perfect glitch only exists for a spectator at the tipping point between destruction and the creation of something new”��“Glitch reveals but also bridges gaps between the functioning and the malfunctioning of systems”��Spontaneity in the accident form

�Are glitches technological phenomena or social constructions reactive to technological expectations or aesthetics?

WHAT IS A MISTAKE?

30 of 32

Lauren - ‘A Galaxy of Reality’

31 of 32

TAYLA

START

IF mouse hovers over the correct maze pathway

THEN maze will become clearer

ELSE maze will appear typographic mess with growing branches

IF you reach the end of the maze

THEN the word “DEATH” will reveal

IF you hover maze backwards through the maze

THEN the maze will become more illegible again

ELSE the word “DEATH” will remain clearer

ENDIF

a typographic maze

*new idea: type becomes more legible the more you move through the maze ?...so really this gif should be playing in reverse

32 of 32

Unian

“we live inside a set of relations that delineates sites which are irreducible to one another and absolutely not superimposable on one another. These spaces, as it were, which are linked with all the others, which however contradict all the other sites.”

-"Other Spaces, 1967" by Michel Foucault

START

IF nothing on the canvas

THEN MOUSEPRESSED

WHILE MOUSEPRESSED,

points coming out

IF more points show up on canvas

some points link together and become word "Space" (Particle)

ALSO more sound effect about life comes up

ALSO some of the point will never link