Cyber-Selves Searching for Love

Cyber-Selves Searching for Love Images and Video:

Equipment

Apple Magic Touchpad housing

Image of the room with the lights on

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:

GitHub:
hammer.js/Hammer.js: https://github.com/hammerjs/hammer.js/tree/master/tests/manual,

https://github.com/hammerjs/hammer.js/wiki
hammerjs/jquery.hammer.js: https://github.com/hammerjs/jquery.hammer.js hammerjs/touchemulator: https://github.com/hammerjs/touchemulator thebird/Swipe: https://github.com/thebird/Swipe
colinbdclark/osc.js: https://github.com/colinbdclark/osc.js/ genekogan/p5js-osc: https://github.com/genekogan/p5js-osc
Move.js: https://visionmedia.github.io/move.js/

Examples:
Has a bunch of Examples: http://codeforartists.com

Hammer.js Examples:
Example of Hammer.js swipe: http://alpha.editor.p5js.org/yining/sketches/HyoEADcgx (but this one uses document.body which means swiping is enabled anywhere on the screen)
Example of Hammer.js swipe: http://jsfiddle.net/6jxbv/119/ (only moves box)
Example of Hammer.js gestures: https://codepen.io/runspired/full/ZQBGWd
Example of Hammer.js swipe velocity: http://alpha.editor.p5js.org/projects/rkOj4bueg Example of Hammer.js swipe image: http://alpha.editor.p5js.org/yining/sketches/H1qyGcYex Example of Hammer.js gesture detection: http://alpha.editor.p5js.org/projects/HyEDRsPel

Example of Hammer.js swipe single box: http://jsfiddle.net/6jxbv/119/
Example of Hammer.js swipe one in a line: http://www.webdevbreak.com/episodes/touch-gestures-hammerjs/demo, http://www.webdevbreak.com/episodes/touch-gestures-hammerjs, http://www.webdevbreak.com/episodes/touch-gestures-hammerjs-2

Example of Hammer.js swipe and drag: http://jsfiddle.net/gilbertolenzi/uZjCB/208/ Example of Hammer.js touch: https://codepen.io/berkin/pen/HKgnF
Example of Hammer.js select and move: http://cdn.rawgit.com/hammerjs/touchemulator/master/tests/manual/hammer.html

Example of Array Number Count: http://jsfiddle.net/AbpBu/, https://jsfiddle.net/h1d69exj/2/
Example of Objects: https://p5js.org/examples/objects-objects.html
oninput Example: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oninput_dom

onchange Examples: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange_addeventlistener, https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange_dom

Example of selecting an item and manipulating it: http://plnkr.co/edit/5FN5HYWNjU5I3sZO9ixI?p=preview

Reference Pages:
Processing Strings and Drawing Text: https://processing.org/tutorials/text/

Daniel Shiffman “Programming from A to Z”: http://shiffman.net/a2z/intro/
OSC Simple Guide: https://www.jroehm.com/2015/10/a-simple-guide-to-use-osc-in-the-browser/

p5.js Reference Pages:
p5.js Reference Page: https://p5js.org/reference/
p5.js Overview: https://github.com/processing/p5.js/wiki/p5.js-overview Beyond the Canvas (pointers, createCanvas, createElement, etc.): https://github.com/processing/p5.js/wiki/Beyond-the-canvas
Convert Text to Images with JavaScript: https://www.shift8web.ca/blog/convert-text-image-javascript-html5/, https://ctrlq.org/code/20056-convert-text-to-images-with-javascript

JavaScript Basics: https://github.com/processing/p5.js/wiki/JavaScript-basics#adding-properties Processing to p5.js: https://github.com/processing/p5.js/wiki/Processing-transition

Hammer.js Reference Pages: http://hammerjs.github.io/api/, https://github.com/hammerjs/hammer.js/issues/241,
http://hammerjs.github.io/tips/, https://github.com/hammerjs/hammer.js/wiki/Getting-Started, https://github.com/hammerjs/hammer.js/tree/master/ https://github.com/hammerjs/hammer.js/wiki/Tips-&-Tricks#horizontal-swipe-and-drag

DOM Reference Pages:
Intro to DOM manipulation and events: https://github.com/processing/p5.js/wiki/Intro-to-DOM-manipulation-and-events
p5.dom: https://p5js.org/reference/#/libraries/p5.dom Touch Events: https://www.w3.org/TR/touch-events/

p5.Speech Reference Pages: http://ability.nyu.edu/p5.js-speech/

Specific Reference Pages:
JSON Specific Reference Pages:

JSON: https://www.w3schools.com/js/js_json_html.asp

DOM Specific Reference Pages:
DOM Style Left: https://www.w3schools.com/jsref/prop_style_left.asp

Node Specific Reference Pages:
Node.js: https://www.w3schools.com/nodejs/nodejs_intro.asp

CSS Specific Reference Pages:
CSS Text: https://www.w3schools.com/css/css_text.asp
Pointer Events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events user-select: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

HTML Specific Reference Pages:
HTML5 Canvas: https://www.w3schools.com/html/html5_canvas.asp HTML <ul>: https://www.w3schools.com/tags/tag_ul.asp HTMLElements: https://www.w3schools.com/html/html_elements.asp,

https://developer.mozilla.org/en/docs/Web/API/HTMLElement
HTML <div> Tag: https://www.w3schools.com/tags/tag_div.asp
HTML Event Attributes: https://www.w3schools.com/tags/ref_eventattributes.asp HTML Global Attributes: https://www.w3schools.com/tags/ref_standardattributes.asp HTML Class Attribute: https://www.w3schools.com/html/html_classes.asp
HTML id Attribute: https://www.w3schools.com/tags/att_global_id.asp
HTML DOM Style Object: https://www.w3schools.com/jsref/dom_obj_style.asp
Style clip Property: https://www.w3schools.com/jsref/prop_style_clip.asp
Style animationFillMode Property:

https://www.w3schools.com/jsref/prop_style_animationfillmode.asp
Style animation Property: https://www.w3schools.com/jsref/prop_style_animation.asp Style position Property: https://www.w3schools.com/jsref/prop_style_position.asp document.getElementById(): https://developer.mozilla.org/en-

US/docs/Web/API/Document/getElementById document.querySelectorAll(): https://developer.mozilla.org/en-

US/docs/Web/API/Document/querySelectorAll document.getElementsByClassName(): https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName KeyboardEvent keyCode Property: https://www.w3schools.com/jsref/event_key_keycode.asp

Hammer.Press(options): http://hammerjs.github.io/recognizer-press/
HTML DOM Events: https://www.w3schools.com/jsref/dom_obj_event.asp
Making and Moving Selectable Shapes on and HTML5 Canvas: A Simple Example: https://simonsarris.com/canvas-moving-selectable-shapes/

p5.js/JavaScript Specific Reference Pages:
touchStarted(): https://p5js.org/reference/#/p5/touchStarted
select(): https://p5js.org/reference/#/p5/select
push(): https://p5js.org/reference/#/p5/push
p5.Element: https://p5js.org/reference/#/p5.Element
selectAll(): https://p5js.org/reference/#/p5/selectAll
Instance Container (document.body): https://p5js.org/examples/instance-mode-instance-container.html
createGraphics(): https://p5js.org/reference/#/p5/createGraphics
createDiv(): https://p5js.org/reference/#/p5/createDiv
createImage(): https://www.w3schools.com/jsref/prop_style_position.asp
Positioning your canvas: https://github.com/processing/p5.js/wiki/Positioning-your-canvas .offSet(): http://api.jquery.com/offset/
JavaScript HTML DOM Elements: https://www.w3schools.com/js/js_htmldom_elements.asp

event.target: https://api.jquery.com/event.target/
this.: https://github.com/processing/p5.js/wiki/JavaScript-basics#adding-properties
p5.js changing data types: https://forum.processing.org/two/discussion/18799/p5-js-changing-data-types-from-float-into-int
int(): https://p5js.org/reference/#/p5/int Math.floor(): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Math/flo0r Logical Operators: https://p5js.org/examples/control-logical-operators.html
Operator Precedence: https://p5js.org/examples/math-operator-precedence.html JavaScript Arrays: https://www.w3schools.com/js/js_arrays.asp

input(): https://p5js.org/reference/#/p5.Element/input
select(): https://p5js.org/reference/#/p5/select
JavaScript umber toString() Method: https://www.w3schools.com/jsref/jsref_tostring_number.asp

parseInt(): https://www.w3schools.com/jsref/jsref_parseint.asp

Array.prototype.map(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?redirectlocale=en- US&redirectslug=JavaScript/Reference/Global_Objects/Array/map

Array.from(): https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

map(): https://www.w3schools.com/jsref/jsref_map.asp
findIndex(): https://www.w3schools.com/jsref/jsref_findindex.asp indexOf(): https://www.w3schools.com/jsref/jsref_indexof_array.asp Array.prototype.some(): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Object.getPrototypeOf(): https://github.com/hammerjs/hammer.js/issues/414
oninput Event: https://www.w3schools.com/jsref/event_oninput.asp
onchange Event: https://www.w3schools.com/jsref/event_onchange.asp

How TO – JavaScript HTML Animations: https://www.w3schools.com/howto/howto_js_animate.asp

Object.keys(): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

foreach: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

append(): https://p5js.org/reference/#/p5/append

Hammer.js Specific Reference Pages:
Hammer Positions: https://github.com/hammerjs/hammer.js/issues/577 Hammer.Manager: https://hammerjs.github.io/jsdoc/Manager.html Hammer.Swipe(options): http://hammerjs.github.io/recognizer-swipe/ Touch-Action: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action,

http://hammerjs.github.io/touch-action/
Touch Emulator: http://hammerjs.github.io/touch-emulator/ Hammer.Tap(options): http://hammerjs.github.io/recognizer-tap/ Hammer.Press(options): http://hammerjs.github.io/recognizer-press/ Emulate touch on desktop: http://hammerjs.github.io/touch-emulator/ Recognizer: https://hammerjs.github.io/jsdoc/Recognizer.html

jQuery Specific Reference Pages:

Event object: https://api.jquery.com/category/events/event-object/ event.currentTarget: https://api.jquery.com/event.currentTarget/ event.target: https://api.jquery.com/event.target/
offset(): https://www.w3schools.com/jquery/css_offset.asp

Processing Specific Reference Pages: https://processing.org/reference/String_charAt_.html

Forums:
Hammer.js Forums:

How to use Hammer to swipe: https://stackoverflow.com/questions/16873981/how-to-use- hammer-to-swipe

Hammer.js get DOM object where event was attached: https://stackoverflow.com/questions/29984702/hammer-js-get-dom-object-where-event-was- attached

How to return X and Y coordinates when using jquery.hammer.js: https://stackoverflow.com/questions/17391478/how-to-return-x-and-y-coordinates-when-using- jquery-hammer-js

e.center.x & y same as element .left/.top in Hammer.js 2.0?: https://stackoverflow.com/questions/17391478/how-to-return-x-and-y-coordinates-when-using- jquery-hammer-js

Is there a deltaX/deltaY of last event fire?: https://github.com/hammerjs/hammer.js/issues/414

Selecting select option triggers swipeleft event with mouse: https://github.com/hammerjs/hammer.js/issues/1091

Delegating Hammer.js events with jQuery: https://stackoverflow.com/questions/10191612/delegating-hammer-js-events-with-jquery

Why is Hammer executed when ‘touchstart’ was stopped: https://github.com/hammerjs/hammer.js/issues/318

Does hammer.js handle touchmove?: https://stackoverflow.com/questions/30218216/does- hammer-js-handle-touchmove

Selecting select option triggers swipeleft event with mouse: https://github.com/hammerjs/hammer.js/issues/1091

HTML/CSS Forums:

Calling CSS in JavaScript: https://www.sitepoint.com/community/t/calling-css-in-javascript/7199

How to create a <style> tag with JavaScript: https://stackoverflow.com/questions/524696/how-to- create-a-style-tag-with-javascript

Is there anyway that I can give a div a function in p5.js: https://github.com/processing/p5.js/wiki/Positioning-your-canvas

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

How can I generate an image based on text and CSS?: https://stackoverflow.com/questions/17618574/how-can-i-generate-an-image-based-on-text-and-css

Equivalent of pTouchX/Y for objects in ‘touches[]’: https://github.com/processing/p5.js/issues/1478 Array of Images p5.js: https://stackoverflow.com/questions/40652443/array-of-images-p5-js

What’s the best way to convert a number to a string in JavaScript?: https://stackoverflow.com/questions/5765398/whats-the-best-way-to-convert-a-number-to-a-string- in-javascript

JavaScript get number from String: https://stackoverflow.com/questions/10003683/javascript-get- number-from-string

How to find a number in a string using JavaScript: https://stackoverflow.com/questions/1623221/how-to-find-a-number-in-a-string-using-javascript

How to extract number from a string in JavaScript: https://stackoverflow.com/questions/7033334/how-to-extract-number-from-a-string-in-javascript

Regex using JavaScript to return just numbers: https://stackoverflow.com/questions/1183903/regex-using-javascript-to-return-just-numbers

VBA. How to find position of first digit in string: https://stackoverflow.com/questions/3547744/vba- how-to-find-position-of-first-digit-in-string

How to convert all elements in an array to integer in JavaScript: https://stackoverflow.com/questions/4437916/how-to-convert-all-elements-in-an-array-to-integer-in- javascript

How to convert a string of numbers to an array of numbers?: https://stackoverflow.com/questions/15677869/how-to-convert-a-string-of-numbers-to-an-array-of- numbers

How do I convert a string into an integer in JavaScript?: https://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript

Converting string to integer C: https://stackoverflow.com/questions/7021725/converting-string-to- integer-c

How to find the array index with a value?: https://stackoverflow.com/questions/7346827/how-to- find-the-array-index-with-a-value

Get the index of the object inside an array, matching a condition: https://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching- a-condition

Loop through an array in JavaScript: https://stackoverflow.com/questions/3010840/loop-through- an-array-in-javascript

Objects move position automatically when trying to select all on mousedown (Fabric.js): https://stackoverflow.com/questions/40041803/objects-move-position-automatically-when-trying-to- select-all-on-mousedown-fabr

How to select and move an object to mouse position?: https://forum.unity3d.com/threads/how-to- select-and-move-an-object-to-mouse-position-javascript.134116/

JavaScript iterate object: https://stackoverflow.com/questions/14379274/javascript-iterate-objec

Julianne Rahimi

Cyber-Selves Searching for Love

Leave a Reply Cancel reply