PAULA POKORNA
Glasgow School of Art
Interaction Design BA (Hons)
Y4 Studio Work and Research
Portfolio2024
EXPERIMENTATION
The Visual Forum and DIY Non-Linear Narratives in Digital vs Physical Forms
Collective creativity in the analogue media
The approach of the collective drawing ‘platform’ in analogue form is inspired by a collective drawing game that me and my flatmates play regularly. Sometimes tweaking the rules and getting more creative. We’ve collected our creature creations with the aim of making a zine out of them when we all move out.
Can we adopt the scarcity on rather creative process than the social status predetermined by financial wealth in such environments? Throughout my project, I’ll aim to focus on the creative reinterpretation of already created objects, the process, representing its unique scarcity. Additionally looking at the uses and capabilities of adopting these assets, mirroring their bias within their own narratives. This type of a scarcity could potentially result in a social status depicted by the users’ creativity rather than accesibility via inquiry of one. Benefiting the creator but not the creator as an owner.
.
.
.
.
At the beginning of this project, I’ve decided to mimic a networked system of the above collective creature-drawing game
The analogue drawing and note collection is based on drawing and writing in the most natural forms. I will be providing the creators with (the unnatural) 136cm long roll of annotated paper with instructions for its use. The paper includes my first drawing of a ball/skein of thread. The horizontal paper roll is designed to be rolled from both left and right sides to lead the user to the middle/core of the paper, showing the first drawing and its further development. Instructions are however printed on both corners of the roll in order to allow the creators to use the instructions on multiple locations of the paper without needing them to open the full roll while drawing/annotating.
DESIGNING THE SCROLL GAME
The Form: Because of the nature of my project which research investigates the use of space in 3D vs 2D and people’s creative behaviour in it, I decided to use a single sheet “network game”. The single sheet represents the collective space and explores the collectivist approach to creative making, and storytelling and visualises the development of the non-linear narratives. The single-sheet form thus invites the creators to work on a shared “canvas” as a whole, stimulating the collective responsibility of the outcome via understanding the sources of previously added narratives. Furthermore, it allows the creators to not get lost in a page-separated narrative and thus prioritise their creative development of a narrative that is the last to be seen.
Horizontal: Representing common land
The Instructions:
Assignment: to make an entry, continue building your drawing on top of the narratives of any previous entries. Feel free to annotate with text or comments.
Please include:
1. Select one or multiple entries you wish to continue building on top of and connect them with your entries with a simple line
2. Sign with your nickname.
Please do not include:
Content promoting hate speech, fake news, or any other harmful messages.
*These will be scratched over
The Typeface: Whyte Inktrap by Dinamo
ABC Inktrap has curt yet also curvy ink traps at its joints. Ink traps were of course necessary during the hot type era, in order to improve printing quality. With the emergence of variable font technology, we were intent on reviving and rethinking the idea of ink traps in the context of new tools.
- Dinamo
The Colors: the baby blue and grey color version was inspired by a standardized 3d modeling software interface that in some cases provides a blue sky and grey terrain. Thus, referencing a simulation
The First Drawing: a thread ball as a playful metaphor of the beginning of this visual thread communication.
Designing the scroll game #2
Due to the fact that after some time I found the previous design too visually invasive , I redesigned the scroll into a vertical format with white background and adjusted instructions
The Form: Because of the nature of my project which research investigates the use of space in 3D vs 2D and people’s creative behaviour in it, I decided to use a single sheet “network game”. The single sheet represents the collective space and explores the collectivist approach to creative making, and storytelling and visualises the development of the non-linear narratives. The single-sheet form thus invites the creators to work on a shared “canvas” as a whole, stimulating the collective responsibility of the outcome via understanding the sources of previously added narratives. Furthermore, it allows the creators to not get lost in a page-separated narrative and thus prioritise their creative development of a narrative that is the last to be seen.
Verticality: During the process of designing these scrolls, I’ve thought of digitising them since the source of my idea comes from replicating realities, simulating, in the digital realm, the verticality of the scroll does contextualize the idea of a digital device providing these fictional realities.
The Instructions:
Assignment:
This long scroll of a paper represents a network of a creative common space. It’s intention is to promote sharing and awareness of the collective responsibility of its users for the common space we leave behind for others.
Rules:
To make a drawing entry, continue building your drawing on top of the narratives of any previous entries. Select one or multiple entries you wish to continue develop. Draw anything that develops the narrative of selected pre-existing drawings. Feel free to redraw existing entries and make any alterations connect your drawing entry with those you chose to develop (node-like connections). Feel free to use paint, collage, stickers, text comments or any other media
Content promoting hate speech or any other harmful messages will be scratched over.
Signing your entry:
Please do not sign directly next to your entry! If you want to sign your entry please do so on the back side of this scroll by using a referencing method. You can use the free referencing symbols on the right margin to assign your entry to your preffered name.
Important:
After using a referencing symbol please crossit out on the right side of the scroll margin so it out on the right side of the scroll margin so others know it is already taken by someone else.
The Typeface: Whyte Inktrap by Dinamo
ABC Inktrap has curt yet also curvy ink traps at its joints. Ink traps were of course necessary during the hot type era, in order to improve printing quality. With the emergence of variable font technology, we were intent on reviving and rethinking the idea of ink traps in the context of new tools.
- Dinamo
The Colors: This time I decided to print on a blank white paper to avoid predetermination of any visual bias other than the drawings themselves. The only colourful elements without the drawings are the emojii avatars
My First Drawing: A kitten playing with a thread ball
DRAWING RESULTS:
OPTIONAL CREDITS:
After gathering the drawings , I decided to replicate such game in the physical space
COLLABORATIVE RECONTEXTUALISATION OF COMMON OBJECTS IN URBAN SPACES:
For the next step of my research and experimentation, I decided to step out of the digital as well as the paper drawing and readapted the idea of this ‘narrativeupcycling’ into the physical space. In order to do this properly, I loaned a GoPro with backpack-like wearable straps for holding the camera. One can wear this while having the GoPro attached to their body and thus hands can be in focus, documenting peoples’ making processes.
I was thinking a lot about the correct prompt / assignment outline to address the volunteers with and ended up going with “go to a public space, find something and recreate or repurpose it while capturing the process and outcome on the camera. Then leave it there for others.” Many volunteers would ask me to define the objects I’m interested in capturing and so I needed to assure them I got nothing specific in my mind by “use whatever you interpret as a common or public object”. While this process being al part of my experimentation and research, the results of the gathered videos were way above my expectation. None of the volunteers were stylising neither the scene or the setup and coming back to me with results which included creative sculpture making (very artepovera), effortlessly sophisticated public design interventions or gestures for others.
My hypothesis before this experiment was that people will have greater trouble finding objects, free of ownership or available to use for their repurposing. However, this was not meeting my expectation. Since being present, observing some of the volunteers, I was able to notice patterns in peoples’ choice of objects. These represented either trashed objects, rusty metal stands or those yellow cones from roads. Exceptions were mostly due to specific location choice such as construction site. Yet, assigning each object a specific type of location would not be possible due to the low amount of fottage gathered. This could however be a a fascinating concept to look at in the future, possibly offering signature objects considered to be ‘common’ for a specific are of urban space, defining its nature and its way of use.
COLLECTIVE CREATIVITY IN DIGITAL FORMS:
Since the beginning of my project I was hesitant about the choice of the digital medium of accessibility and thus I wanted to challenge myself and explore the options of creating my own space.
Firstly, I will be looking at the variety of interfaces as well as the technical posibilities that will help me to achieve the result of the digital collaborative/“multiplayer” “platform” that I have previously proposed to be creating. Due to my intentions of starting with an experimental approach in order to provide some insight into creative and collaborative behaviours of people working with analogue tools/setups and digital tools/setups, my aim at the very ebginning is to distinguish the diversity of the non-linear narrative developement between these two setups. The tools that I could possibly use for the drawing ‘game’ experiment within the digital setup are many. Such as Miro, possibly Google Docs or Apple’s Freeform.
Marie Foulston
Party in a Shared Google Doc
🪩 🍾 🪅 💃🏻
Since the beginning of my project I was hesitant to choose the medium of accesibility and thus I wanted to challenge myself and explore the options of a server-based platform in the form of a website. However, since this could bring too many obstacles at this stage of the project, I decided to firstly exlpore the capabilities of Freeform, Docs and Miro. As I was experimenting with the Google Docs drawing tools, I found them very user unfriendly for this specific activity. Miro is a platform where multiple users can collaborate while drawing is one of the more integrated part of the toolbar. Yet it does require subscription in order to invite viewers that would be permitted to draw and add content. However, it is still possible to share the link with others to collaborate with them when invited as team members. Furthermore, Freeform is fun to use since the option of drawing on the smartphone device that automatically mirrors on the shared board. However, it is only availiable for iOS users and thus that would be a limiting option to use.
Google docs does not propose an intuitive way of uploading the sketch into the existing page. Furthermore, it is not so quick and easy to position the sketch within existing textand thus might result in confusion of the “visualisation” of the continuous narrative developement.
Miro seemed to be working the best for most people
🙃️ 🐩️
Miro board access here
The Form: Because of my intention of potentially host the exported Miro frame after the end of this experiment in order to showcase the process, I decided to use the format of the website width and long height. The height will be extended depending on the space and density of the posts. This will further allow me to create the web-based long scroll showcasing the narrative developement.
The Drawing process on desktop: Drawing with a mouse or a trackpad is not a very easy and intuitive and so since the beginning it seemed quite obvious that people will be likely using images and photographs on the provided canvas.
EXPERIMENTATION WITH CUSTOM WEBSITE AND SERVERS
Creating a local server:
12.1 Introduction to Node -The Coding Train
socket: real-time connection between two applications that can send data back and forth.
node.js: a platform for writing server programms. Allows to host the files with the sketch as well as the socket connection.
STEP1: create a folder containing all basic necessary p5.js files: .html, .css(not needed), .js
STEP2: TERMINAL- Change directory ‘cd’ and drag and drop the folder into the terminal window.
STEP3: EDITOR- create a new .js file called server.js containing any text such as console.log(”My server is running”);
STEP4: TERMINAL- ‘node server.js’
OUTPUT: TERMINAL- My server is runingg
12.2 Using Express with Node - WebSockets and p5.js
Express: minimalist web app framework for hosting files and queries
npm: node package manager
STEP5: TERMINAL- ‘npm init’ - this sets up npm to install express and sets up the configuration file entry point - server.js
- this creates a new file ‘package.json’
STEP6: TERMINAL- ‘npm install express --save’ This set up my dependencies on express on 4.18.2
STEP7: EDITOR, server.js, line1 :
var express = require(’express’); - imports the module that I’m using
line3: var app = express();
server = app.listen(300);
STEP8: TERMINAL- ‘node server.js’
BROWSER- ‘localhost:3000’
STEP9: Go to your directory and create a folder ‘public’ and put .html, sketch.js in it
12.3: Connecting Client to Server with Socket.io
STEP10: TERMINAL- clear
‘npm install socket.io --save’
- this assigns the “socket.io:^^4.7.2” in package.json
STEP11: EDITOR, server.js:
var socket = require(’socket.io’);
var io = socket(server);
io.sockets.on(’connection’, newConnection);
function newConnection(socket) {
console.log(’newConnection’ + socket.io);
STEP12: Run socket.io also on the client
-> https://socket.io/docs/v4/client-installation/
- FROM A CND copy the html script and EDITOR- paste after libraries in index.html
STEP13: EDITOR- sketch.js:
var socket;
IN SETUP- socket= io.connect(’http://localhost:3000/’)
12.4: Shared DrawingCanvas
sending messages to server
STEP14: EDITOR- sketch.js:
function mouseDragged(){
console.log(”Sending:” +mouseX + ‘ ‘ +mouseY);
- copy drawing lines and paste into the mouseDragged {} instead
in mouseDragged() {
line12: var dataDrawing = {
x: mouseX,
y mouseY, };
socket.emit(”mouse”, dataDrawing);
STEP15: EDITOR- server.js:
in func. newConnection(), line18:
socket.on(’mouse, mouseMsg);
line20: function mouseMsg(dataDrawing) {
console.log(dataDrawing);
STEP16: TERMINAL- Restart server:
‘^C’ then ‘clear’ and then ‘node server.js’
STEP17: EDITOR- server.js:
line before console.log(dataDrawing) add: socket.broadcast.emit(’mouse, dataDrawing);
- when a message comes in via function newConnection(socket), I;m calling the mouseMsg(dataDrawing) func. to send the exact same msg out.
STEP18: EDITOR- sketch.js: in setup after socket add:
socket.on(’mouse’, newDrawing);
in setup create: function newDrawing(dataDrawing){
noStroke();
fill(200);
ellipse(dataDrawing.x, dataDrawing.y, 36, 36);
}
The final result:
In both tabs I was able to draw into the same drawing while displayed in opposite colours
Reflection:
After working on these experiments and practicing working with servers, throughout my Coding Train journey, I came across Daniel Shiffman mentioning the Firebase Realtime Database as an alternative to the server. Hence, I delved into its documentation and coding tutorials to explore its capabilities. Due to its’ easier integration and possibilities of data retrieval for further creative purposes I could build on to of, I decided to work on the DaS basis instead of using servers. Thus, the rest of the web-based collaborative drawing process is possible to find in my Development section, mapping the progress from beginnings of its integration until the Work in Progress show.
After the Work in Progress Show:
GENERATING MESH IN UNITY - PRACTICE
Step 1: Create an empty game object
Step2: Add component New Script
Step 3: Generate Mesh by:
step4: Add trangles and verteces by:
step5: Recalculate all normals and bounds in void Start();
by: Mesh.RecalculateNormals();
Mesh.RecalculateBounds();
//Bounds: boundering box which contains all vertices within the cube
//Normals: Vectors on sides of the vertices used by the rendering engine to calculate light reflections
step6: Add Mesh renderer component and select material
step7: add 4 more faces of the cube by:
ANIMATING THE CUBE:
Step7: in public class:
public float UpDownFactor = 0.1f;
public float UpDownSpeed = 6f;
Step8: in void update():
Mesh.vertices = GenerateVerts(Mathf.Sin(Time.realtimeSinceStartup * UpDownSpeed) * UpDownFactor);
- the value of GenerateVerts() in this case can vary depending on animation
Step9: set default of: private Vector3[ ] GenerateVerts(float up = 0f)
Step10: add: ’ + up ‘ to every top vertex value of Vector3 ( in this case add after every value 2 so: new Vector3(-1, 2 + up, 1),)...
Result:
DRAWING THE STORED x and y points in UNITY:
I asked the Gemini as a new product integrated in the Firebase and free until 11. May 2024 to help me with some basic idea of the realtime database integration into unity
script 1 suggestion:
using Firebase.Database;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class FirebaseDataHandler : MonoBehaviour
{
private DatabaseReference _databaseReference;
private void Start()
{
// Get a reference to the database
_databaseReference = FirebaseDatabase.DefaultInstance.RootReference;
// Listen for changes to the database
_databaseReference.Child("points").ValueChanged += HandleValueChanged;
}
private void HandleValueChanged(object sender, ValueChangedEventArgs args)
{
// Get the new data
DataSnapshot snapshot = args.Snapshot;
// Clear the existing points
// ...
// Add the new points
foreach (DataSnapshot childSnapshot in snapshot.Children)
{
// Get the x and y positions
float x = childSnapshot.Child("x").Value();
float y = childSnapshot.Child("y").Value();
// Create a new point
// ...
}
}
}
script 2 suggestion:
// Create a new point
GameObject point = GameObject.CreatePrimitive(PrimitiveType.Sphere);
point.transform.position = new Vector3(x, y, 0);
At this point I stopped experimenting with this as I came up with my final outcome idea. -- view in Documentation section.