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:
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
p5.js/JavaScript Examples:
Example of p5.js (“Soft Body”) node: https://p5js.org/examples/simulate-soft-body.html Example of writing text on canvas: http://jsfiddle.net/amaan/WxmQR/1/
Example of createImage(): https://p5js.org/examples/image-create-image.html
Example of createGraphics(): https://p5js.org/examples/structure-create-graphics.html Example of drawTarget(): https://p5js.org/examples/structure-functions.html
Example of p5.js Objects: https://p5js.org/examples/objects-objects.html (see jitter folder) Example of p5.js Interactivity: https://p5js.org/examples/hello-p5-interactivity-1.html
p5.js List of Examples: https://p5js.org/examples/
Example of Array of Objects: https://p5js.org/examples/objects-array-of-objects.html, https://p5js.org/examples/arrays-array-objects.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:
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