Cyber-Selves Searching for Love

Cyber-Selves Searching for Love Images and Video: 

Dissertation + Exhibition Piece

My final project, Cyber-Selves Searching for Love, is heavily connected to my dissertation piece. Essentially, I aim to create a program that opens up a discussion about the research I have been conducting over the year. These ellipses feature the conversations I received from some of my willing participants, as well as some of my own experiences from online dating apps. This piece is meant to supplement my research through, what I argued to be, the most intimate forms of our “multiple-selves”; the self we are when using online dating apps.

The “multiple-selves” is a theory that each individual embodies multiple versions of themselves. There is a self that exists is cyberspace or the internet, which I refer to as our “cyber-self.” In contrast, there is a self that exists in the physical world, which I refer to as our “physical-self.” Without always being conscious of it, these selves differ from each other. This difference can either be immense or fairly minute. Granted, there are situations where this difference is completely conscious and deliberate, however, most of the time, most people are unaware of the fact that they have different versions of themselves to display to the public.

Cyber-Selves Searching for Love sheds light on the most intimate version of our cyber-self through visualizations and audio. Each screen shows a series of messages either sent or received by the participant. A pair of messages continuously remain static at a random location on the screen. Users can double tap the Trackpad to enable the audio functions of the program. If they do not care to read or hear more about the conversation, they can swipe left to filter in a new set of messages from a different conversation and a different pair of online dating app users. If they are interested in knowing more about the conversation on the screen, they can swipe right and a new set of static messages will be placed at a random location on the screen.

Although I am exemplifying only one aspect of our multiple-selves, it is the version of the self that helped me understand the multiple-selves and how our cyber-self differs from our physical-self. Whilst being fundamental to my research and my dissertation, my piece aims to create an immersive environment that is conceptually driven and allows users to reflect on the idea of the multiple-selves and how they are reading the most intimate version of someone else’s cyber-self.

Cyber-Selves Searching for Love Instruction Video: 

Cyber-Selves Searching for Love References: 

hammerjs/jquery.hammer.js: hammerjs/touchemulator: thebird/Swipe:
colinbdclark/osc.js: genekogan/p5js-osc:

Has a bunch of Examples:

Hammer.js Examples:
Example of Hammer.js swipe: (but this one uses document.body which means swiping is enabled anywhere on the screen)
Example of Hammer.js swipe: (only moves box)
Example of Hammer.js gestures:
Example of Hammer.js swipe velocity: Example of Hammer.js swipe image: Example of Hammer.js gesture detection:

Example of Hammer.js swipe single box:
Example of Hammer.js swipe one in a line:,,

Example of Hammer.js swipe and drag: Example of Hammer.js touch:
Example of Hammer.js select and move:

p5.js/JavaScript Examples:
Example of p5.js (“Soft Body”) node: Example of writing text on canvas:
Example of createImage():
Example of createGraphics(): Example of drawTarget():
Example of p5.js Objects: (see jitter folder) Example of p5.js Interactivity:
p5.js List of Examples:
Example of Array of Objects:,

Example of Array Number Count:,
Example of Objects:
oninput Example:

onchange Examples:,

Example of selecting an item and manipulating it:

Reference Pages:
Processing Strings and Drawing Text:

Daniel Shiffman “Programming from A to Z”:
OSC Simple Guide:

p5.js Reference Pages:
p5.js Reference Page:
p5.js Overview: Beyond the Canvas (pointers, createCanvas, createElement, etc.):
Convert Text to Images with JavaScript:,

JavaScript Basics: Processing to p5.js:

Hammer.js Reference Pages:,,,,

DOM Reference Pages:
Intro to DOM manipulation and events:
p5.dom: Touch Events:

p5.Speech Reference Pages:

Specific Reference Pages:
JSON Specific Reference Pages:


DOM Specific Reference Pages:
DOM Style Left:

Node Specific Reference Pages:

CSS Specific Reference Pages:
CSS Text:
Pointer Events: user-select:

HTML Specific Reference Pages:
HTML5 Canvas: HTML <ul>: HTMLElements:,
HTML <div> Tag:
HTML Event Attributes: HTML Global Attributes: HTML Class Attribute:
HTML id Attribute:
HTML DOM Style Object:
Style clip Property:
Style animationFillMode Property:
Style animation Property: Style position Property: document.getElementById():

US/docs/Web/API/Document/getElementById document.querySelectorAll():

US/docs/Web/API/Document/querySelectorAll document.getElementsByClassName(): KeyboardEvent keyCode Property:

HTML DOM Events:
Making and Moving Selectable Shapes on and HTML5 Canvas: A Simple Example:

p5.js/JavaScript Specific Reference Pages:
Instance Container (document.body):
Positioning your canvas: .offSet():
JavaScript HTML DOM Elements:
p5.js changing data types:
int(): Math.floor(): Logical Operators:
Operator Precedence: JavaScript Arrays:

JavaScript umber toString() Method:

parseInt(): US&redirectslug=JavaScript/Reference/Global_Objects/Array/map

Array.from(): US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

findIndex(): indexOf(): Array.prototype.some():

oninput Event:
onchange Event:

How TO – JavaScript HTML Animations:




Hammer.js Specific Reference Pages:
Hammer Positions: Hammer.Manager: Hammer.Swipe(options): Touch-Action:,
Touch Emulator: Hammer.Tap(options): Hammer.Press(options): Emulate touch on desktop: Recognizer:

jQuery Specific Reference Pages:

Event object: event.currentTarget:

Processing Specific Reference Pages:

Hammer.js Forums:

How to use Hammer to swipe: hammer-to-swipe

Hammer.js get DOM object where event was attached: attached

How to return X and Y coordinates when using jquery.hammer.js: jquery-hammer-js & y same as element .left/.top in Hammer.js 2.0?: jquery-hammer-js

Is there a deltaX/deltaY of last event fire?:

Selecting select option triggers swipeleft event with mouse:

Delegating Hammer.js events with jQuery:

Why is Hammer executed when ‘touchstart’ was stopped:

Does hammer.js handle touchmove?: hammer-js-handle-touchmove

Selecting select option triggers swipeleft event with mouse:

HTML/CSS Forums:

Calling CSS in JavaScript:

How to create a <style> tag with JavaScript: create-a-style-tag-with-javascript

Is there anyway that I can give a div a function in p5.js:

p5.js/JavaScript Forums:
What’s the best way to generate image from text using JavaScript and HTML5 APIs?: html5-apis-cik6k8rbj01izxy53619llzzp

How can I generate an image based on text and CSS?:

Equivalent of pTouchX/Y for objects in ‘touches[]’: Array of Images p5.js:

What’s the best way to convert a number to a string in JavaScript?: in-javascript

JavaScript get number from String: number-from-string

How to find a number in a string using JavaScript:

How to extract number from a string in JavaScript:

Regex using JavaScript to return just numbers:

VBA. How to find position of first digit in string: how-to-find-position-of-first-digit-in-string

How to convert all elements in an array to integer in JavaScript: javascript

How to convert a string of numbers to an array of numbers?: numbers

How do I convert a string into an integer in JavaScript?:

Converting string to integer C: integer-c

How to find the array index with a value?: find-the-array-index-with-a-value

Get the index of the object inside an array, matching a condition: a-condition

Loop through an array in JavaScript: an-array-in-javascript

Objects move position automatically when trying to select all on mousedown (Fabric.js): select-all-on-mousedown-fabr

How to select and move an object to mouse position?: select-and-move-an-object-to-mouse-position-javascript.134116/

JavaScript iterate object:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s