Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
data_collection
p5
socket
README.md
SET UP A FIREBASE DATABASE.md
socket.zip

README.md

Aesthetic Responsibility, Self-Design and Coding

Indeed, design—including self-design—is primarily a mechanism for inducing suspicion. The contemporary world of total design is often described as a world of total seduction from which the unpleasantness of reality has disappeared. But I would argue, rather, that the world of total design is a world of total suspicion, a world of latent danger lurking behind designed surfaces. The main goal of self-design then becomes one of neutralizing the suspicion of a possible spectator, of creating the sincerity effect that provokes trust in the spectator’s soul. In today’s world, the production of sincerity and trust has become everyone’s occupation—and yet it was, and still is, the main occupation of art throughout the whole history of modernity: the modern artist has always positioned himself or herself as the only honest person in a world of hypocrisy and corruption.

Boris Groys - Self-Design and Aesthetic Responsibility

Learning Outputs

  • Critical thinking toward self-design using creative coding as a tool
  • Making the invisible daily generated data visible through creative coding

Schedule

24.09 Hello C[omputer]V[ision]!

In this first class we will look at computer vision software and how it is used for facial recognition. How can we fool such algorithms in a way that they can't recognize faces anymore? We will look at the examples of Adam Harvey and his CV Dazzle and we will test the limits of such algorithm by trying different makeup techniques. On the other hand we will also try to fool the algorithm by drawing faces by hand (to be decided yet).

Inputs/Links

Dependencies

01.10 / 08.10 Hello p5.js!

This second part of the course will be concentrated in developing the basic skills of coding using p5.js. This JavaScript library builds on Processing a coding framework for generative design.

JavaScript is the most used scripting language for the web. By learning this tool you will be able to design simple interactive websites.

Dependencies a.k.a. what you need to download

Mac Users:

Windows users:

Tutorials

01.10:

In this first lesson I will introduce p5.js and how to use it to draw on HTML5 canvas

GETTING HELP

To get any help while learning programming the best resource is the internet.

You can usually find help by typing the programming language you need help for and than adding the problem you are trying to solve (type the following in google)

javascript how to get the text content of a div

Answer

Really helpful are the MDN [mozilla foundation] references for JavaScript, HTML and css

DEBUGGING 🐞

1) On average, a developer creates 70 bugs per 1000 lines of code

2) 15 bugs per 1,000 lines of code find their way to the customers

3) Fixing a bug takes 30 times longer than writing a line of code

4) 75% of a developer’s time is spent on debugging (1500 hours a year!)

WELCOME TO PROGRAMMING!

Luckily there is a nice console on every browser that helps us debug our code.

To open the console:

  • in Chrome: cmd + alt + j for windows ctrl + shift + j
  • in Firefox: cmd + alt + k for windows ctrl + shift + k
  • in Safari: safari is an ass 🍑.
    1. open safari
    2. go to preferences cmd + ,
    3. go to advanced
    4. at the bottom of the menu check
      • "Show Develop menu in menu bar"
    5. now you can type cmd + c to show the console
  • in Edge press F12 or right-click and select "Inspect Element"

console.log(message || object || anything else) will be your best friend.

ERROR EXAMPLES

sketch.js:8 Uncaught ReferenceError: color is not defined at sketch.js:8
// this means that there is an error in line 8 of the file sketch.js

Uncaught Error: [object Arguments]is not a valid color representation.
    at d.Color._parseInputs (p5.min.js:7)
    at new d.Color (p5.min.js:6)
    at e.d.color (p5.min.js:6)
    at d.Renderer2D.background (p5.min.js:8)
    at e.d.background (p5.min.js:7)
    at setup (sketch.js:15) // <== here is our error in line 15 of sketch.js
    at e.<anonymous> (p5.min.js:7)
    at e.<anonymous> (p5.min.js:7)
    at new e (p5.min.js:7)
    at e (p5.min.js:7)

THE FOLDER 📂 STRUCTURE:

my-website
|--/index.html
|--/style.css
|--/js
   |--/sketch.js
   |--/libraries
      |--/p5.js
      |--/other-libraries-you-may-need.js

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>my-website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- load the styling -->
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <!-- load the js files -->
    <script src="js/libraries/p5.js"></script>
    <script src="js/sketch.js"></script>
</head>
<body>
    <div id="p5Sketch">
    <!-- we leave it empty -->
    </div>
</body>
</html>

style.css:

#p5Sketch{
    position: fixed; /* or relative or whatever you decide */
    width: /* you define it! */;
    height: /* you define it! */;
    /* i usually do full screen */
}

sketch.js:

let cnv;
function setup(){
    // setting up the sketch before to start drawing
    cnv = createCanvas(400, 400); // or (innerWidth, innerHeight) [full screen]
    cnv.parent('p5Sketch');// here we tell p5 in wich div should the sketch be placed
}

function draw(){
    // here the drawing happens
    // drawing a rectangle
    rect(x, y, width, height);
    // drawing circle
    ellipse(x, y, width, height);
    // drawing a free form defining the single vertices
    beginShape();
    vertex(x, y); // you can add as many vertices as you like
    endShape(x, y);
    
    // loops!
    for(start, end, increment){
        // repeat something
    }
    
    // if statement
    if(statement == true){
        // do something
    }else{
        // do something else
    }
}

/* VERY IMPORTANT FEATURE TO RESIZE THE CANVAS*/

function windowResized(){
    resizeCanvas(innerWidth, innerHeight);
}

08.10:

What is the DOM

In this lesson we will look at interaction between DOM elements and javascript, here a complete list of the many event listener you can attach to DOM elements

let element = document.getElementById('id-name')
element.addEventListener('onclick', doSomething);

function doSomething(){
    // something happens
}

// get id ov hoovered element in webpage
// thanks to stackoverflow
let lastID = null;

let handleMouseover = function (e) {
    var target = e.target || e.srcElement;
    lastID = target.id;
};

if (document.addEventListener) {
    document.addEventListener('mouseover', handleMouseover, false);
}
else {
    document.attachEvent('onmouseover', handleMouseover);
}

Objects?

let myObj = {
    x_pos: 100,
    y_pos: 300,
    DOM_element: document.getElementById('id-name')
}
// let's turn it into a readable JSON file
let json = JSON.stringify(myObj);

Arrays?

let myArray = [];
myArray = [1, 45, 66, 3, 67, 30];
myArray.push(45);
// myArray: [1, 45, 66, 3, 67, 30, 45]
// you can fill it with strings or objects and more...

EXERCISE:

Build two button in HTML

<button id="trigger">
    TRIGGER
</button>
<button id="release">
    RELEASE
</button>
<!-- you can additionally style the buttons in the css file -->

Then attach event listener to the buttons

const trigger = document.getElementById('trigger');
trigger.attachEventListener('mouseover', triggerFunction);
triggerFunction(){
    // execute some stuff
    // maybe collecting mouse data
}

const release = document.getElementById('release');
release.attachEventListener('mouseover', releaseFunction);
releaseFunction(){
    // visualize the collected data    
}

BONUS:

execute functions at a specific interval

setInterval(functionToExecute, 1000); // the second attribute defines the interval in milliseconds => 1000 = 1 second || 60 * 1000 = 1 minute etc. 

function functionToExecute(){
    // some actions to be executed
    // for example sending data to the server
}

15.10 Hello Device Data!

input:

  • Mobile Websites Can Tap Into Your Phone's Sensors Without Asking

  • The Dark Side of 'Replay Sessions' That Record Your Every Move Online

  • Keystroke Dynamics (wiki), here a paper 📝 about the topic

    there are two types of biometrics physiological and behavioral:

    physiological: physical measurement of human body like fingerprints, face geometry etc. behavioral: relate to specific human behaviors while performing a task, signature writing, voice keystroke and mouse dynamics etc.

    keystroke dynamics Keystroke dynamics can be captured via several different features extracted from the typing rhythm of the user including: latency between consecutive keystrokes, flight time, dwell time, based on the key down/press/up events, overall typing speed, frequency of errors (use of backspace) and control keys (use of left/right shift).

    mouse dynamics The study defines four different mouse actions as follows: mouse movement, drag and drop, point and click and silence. Several different features were defined, such as the interpolation between the movement speed and the traveled distance, which estimates the average speed a user will travel for a certain distance. In addition, several histograms were used to capture different working statistics of the user such as the average travelling speed in eight direction zones or the relative occurrence of each one action.

User data

const info = {

  timeOpened: new Date(),
  timezone: (new Date()).getTimezoneOffset() / 60,

  pageon() { return window.location.pathname },
  referrer() { return document.referrer },
  previousSites() { return history.length },

  browserName() { return navigator.appName },
  browserEngine() { return navigator.product },
  browserVersion1a() { return navigator.appVersion },
  browserVersion1b() { return navigator.userAgent },
  browserLanguage() { return navigator.language },
  browserOnline() { return navigator.onLine },
  browserPlatform() { return navigator.platform },
  javaEnabled() { return navigator.javaEnabled() },
  dataCookiesEnabled() { return navigator.cookieEnabled },
  dataCookies1() { return document.cookie },
  dataCookies2() { return decodeURIComponent(document.cookie.split(";")) },
  dataStorage() { return localStorage },

  sizeScreenW() { return screen.width },
  sizeScreenH() { return screen.height },
  sizeDocW() { return document.width },
  sizeDocH() { return document.height },
  sizeInW() { return innerWidth },
  sizeInH() { return innerHeight },
  sizeAvailW() { return screen.availWidth },
  sizeAvailH() { return screen.availHeight },
  scrColorDepth() { return screen.colorDepth },
  scrPixelDepth() { return screen.pixelDepth },


  latitude() { return position.coords.latitude },
  longitude() { return position.coords.longitude },
  accuracy() { return position.coords.accuracy },
  altitude() { return position.coords.altitude },
  altitudeAccuracy() { return position.coords.altitudeAccuracy },
  heading() { return position.coords.heading },
  speed() { return position.coords.speed },
  timestamp() { return position.timestamp },


};

console.log(
  info.timeOpened,
  info.timezone,
  info.pageon(),
  info.referrer(),
  info.previousSites(),
  info.browserName(),
  info.browserEngine(),
  info.browserVersion1a(),
  info.browserVersion1b(),
  info.browserLanguage(),
  info.browserOnline(),
  info.browserPlatform(),
  info.dataCookies2(),
  info.dataStorage()
)

Gyroscope data

/* CODE BY [TED DAVIS] */

/* PREFS */
 let easing = 0.5; // set between 0 - 1

 /* VARS */
 let rx, ry, rz, sx, sy, sz;
 rx = ry = rz = sx = sy = sz = 0;

 /* ONDEVICEMOTION */
 // https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion
 window.ondevicemotion = event => {
     /* RAW VALUES */
     rx = event.accelerationIncludingGravity.x;
     ry = event.accelerationIncludingGravity.y;
     rz = event.accelerationIncludingGravity.z;

     /* SMOOTHED VALUES */
     sx = smoothVal(rx, sx);
     sy = smoothVal(ry, sy);
     sz = smoothVal(rz, sz);
 };

 /* VALUE MAPPING */
 function mapVal(value, istart, istop, ostart, ostop) {
     return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
 }

 /* VALUE SMOOTHING */
 function smoothVal(inputVal, outputVal) {
     let tarVal = inputVal;
     let calcVal = tarVal - outputVal;
     outputVal += calcVal * easing;
     return outputVal;
 }

...and geo location?

...and the battery? here a library for this...

22.10 / 29.10 Hello NodeJS and data collection!

Dependencies:

  • node.js
  • Express $ npm install express --save
  • Socket.io $ npm install socket.io --save [Server side] and client side [download the whole package, the library sits in the dist folder 📁] or with CDN https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js

Inputs:

Initialize a node.js project

(the following commands need to be done in the terminal) 🖥 ⌨️

$ cd path/to/folder
$ npm init
	# fill out all the requested data if you don't know the answer let it empty
	entry point: (index.js) index.js # very important!!!
# installing node packages
$ npm install package-name --save

Final Exhibition 17.12.2018

Data–Tinder: matching based on your device data 👨‍👩‍👧‍👦: [cleo, finn, alex]

Data-Drawing: make a path to follow with the phone 👨‍👩‍👧‍👦: [flo, martino, vaidehi, michelle]

Face-Detection: CV 👨‍👩‍👧‍👦: [refael, tim, yana, sarah, timo]

dependencies:

Mongo DB or Firebase [a tutorial...]

Vector math, you can use vector math to compute the distance between the data of different users. Than calculate the user with shorter distance.

Open CV for Node.js [you need CMAKE], Faced [...seems to have a build error] or face-api.js

UTILS

Node.js

const exec = require('child_process').exec;

exec("Bash command", function(err, stdout, stderr) {
  if (err) {
    console.log(err);
  }
  console.log(stdout);
});
// the bash command could be a python script for example

BASH COMMANDS

$you traceroute thewebsiteyouwanttotrace.com
# this tracks down all the nodes you will pass through while reaching the website

Readings

You can’t perform that action at this time.