From c293006ba43944ffeb4dcab17b2256f3a5491a36 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:10:19 +0100 Subject: build cloud --- site/assets/js/app/face.js | 68 ++++++++++++++++++++++++---------------------- 1 file changed, 36 insertions(+), 32 deletions(-) (limited to 'site/assets/js') diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index f3f1f2bf..1818e9aa 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -1,4 +1,5 @@ -var face = (function(){ +/* eslint-disable */ +var faceInit = function () { var container = document.querySelector("#face_container") var camera, controls, scene, renderer var mouse = new THREE.Vector2(0.5, 0.5) @@ -16,6 +17,7 @@ var face = (function(){ return a })() var last_t = 0, start_t = 0 + var bgColor = 0x000000 // 0x191919 var colors = [ 0xff3333, 0xff8833, @@ -32,32 +34,33 @@ var face = (function(){ function init() { fetch("/assets/data/3dlm_0_10.json") - .then(req => req.json()) - .then(data => { - face_names = Object.keys(data) - faces = face_names.map(name => recenter(data[name])) - setup() - build(faces[0]) - updateFace(faces[0]) - setCurrentFace(face_names[0]) - swapTo = faces[0] - animate() - }) + .then(req => req.json()) + .then(data => { + face_names = Object.keys(data) + faces = face_names.map(name => recenter(data[name])) + setup() + build(faces[0]) + updateFace(faces[0]) + setCurrentFace(face_names[0]) + swapTo = faces[0] + animate() + }) } function setup() { - var w = window.innerWidth / 2 + var w = window.innerWidth * 2/3 var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7) camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000) camera.position.x = 0 camera.position.y = 0 - camera.position.z = 250 + camera.position.z = 200 scene = new THREE.Scene() - scene.background = new THREE.Color(0x191919) + // scene.background = new THREE.Color(bgColor) - renderer = new THREE.WebGLRenderer({ antialias: true }) + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(w, h) + renderer.setClearColor(0x000000, 0); container.appendChild(renderer.domElement) document.body.addEventListener('mousemove', onMouseMove) // renderer.domElement.addEventListener('mousedown', swap) @@ -75,7 +78,7 @@ var face = (function(){ // console.log("done") // } // }) - setInterval(swap, 5000) + swap() } function build(points) { var matrix = new THREE.Matrix4() @@ -125,27 +128,28 @@ var face = (function(){ return (b-a) * n + a } function swap(){ - if (swapping) return - start_t = last_t - swapping = true swap_count = (swap_count + 1) % faces.length - swapFrom = swapTo + swapFrom = swapTo || faces[0] swapTo = faces[swap_count] setCurrentFace(face_names[swap_count]) + oktween.add({ + from: { n: 0 }, + to: { n: 1 }, + duration: 1000, + easing: oktween.easing.quad_in_out, + update: function(obj){ + lerpPoints(obj.n, swapFrom, swapTo, faceBuffer) + updateFace(faceBuffer) + }, + finished: function(){ + setTimeout(swap, 2000) + } + }) } function setCurrentFace(name) { name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ') currentFace.innerHTML = name } - function update_swap(t){ - var n = (t - start_t) / SWAP_TIME - if (n > 1) { - swapping = false - n = 1 - } - lerpPoints(n, swapFrom, swapTo, faceBuffer) - updateFace(faceBuffer) - } function updateFace(points) { updateCubeGeometry(points) updateLineGeometry(points) @@ -214,7 +218,6 @@ var face = (function(){ } function animate(t) { requestAnimationFrame(animate) - if (swapping) update_swap(t) renderer.render(scene, camera) // scene.rotation.y += 0.01 * Math.PI mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1 @@ -224,4 +227,5 @@ var face = (function(){ // scene.rotation.y += 0.01 last_t = t } -})() +} +faceInit() \ No newline at end of file -- cgit v1.2.3-70-g09d2 From cacd7cc5a9296a192171e8046e12f62c7165f2e9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:52:15 +0100 Subject: build --- client/faceSearch/faceSearch.query.js | 2 +- client/nameSearch/nameSearch.query.js | 2 +- site/assets/css/css.css | 8 +++++--- site/assets/js/app/face.js | 21 +++++++++++++++++++++ site/public/index.html | 26 +++++++++++++++++++------- site/templates/home.html | 26 +++++++++++++++++++------- 6 files changed, 66 insertions(+), 19 deletions(-) (limited to 'site/assets/js') diff --git a/client/faceSearch/faceSearch.query.js b/client/faceSearch/faceSearch.query.js index 2d140813..de7e47b6 100644 --- a/client/faceSearch/faceSearch.query.js +++ b/client/faceSearch/faceSearch.query.js @@ -47,7 +47,7 @@ class FaceSearchQuery extends Component {

Search by Image

-

Searching {13456} images

+

Searching {13233} images

{'Use facial recognition to reverse search into the LFW dataset '} {'and see if it contains your photos.'} diff --git a/client/nameSearch/nameSearch.query.js b/client/nameSearch/nameSearch.query.js index 99c1da84..c0798c58 100644 --- a/client/nameSearch/nameSearch.query.js +++ b/client/nameSearch/nameSearch.query.js @@ -20,7 +20,7 @@ class NameSearchQuery extends Component { return (

Search by Name

-

Searching {13456} identities

+

Searching {13233} identities

{'Enter your name to see if you were included in this dataset..'}

diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 18959c12..4689f67b 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -394,11 +394,11 @@ section.fullwidth .image { #face_container { pointer-events: none; position: absolute; - width: 50vw; + width: 66vw; height: 50vw; max-height: 70vh; top: 0; - right: 0; + right: -16vw; z-index: 0; text-align: center; } @@ -460,7 +460,9 @@ section.fullwidth .image { .dataset-intro h2 { margin-top: 40px; } - +.content .dataset-intro .first_paragraph { + margin-top: 10px; +} /* intro - list of datasets */ .dataset-list { diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index 1818e9aa..ab3d950f 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -16,6 +16,7 @@ var faceInit = function () { } return a })() + var lastSprite var last_t = 0, start_t = 0 var bgColor = 0x000000 // 0x191919 var colors = [ @@ -149,6 +150,26 @@ var faceInit = function () { function setCurrentFace(name) { name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ') currentFace.innerHTML = name + // if (lastSprite) { + // scene.remove(lastSprite) + // } + // var sprite = new THREE.TextSprite({ + // textSize: 12, + // redrawInterval: 1000, + // material: { + // color: 0xcccccc, + // }, + // texture: { + // text: name, + // fontFamily: '"Roboto", "Helvetica", sans-serif', + // }, + // }); + // sprite.position + // .setX(0) + // .setY(0) + // .setZ(0) + // scene.add(sprite); + // lastSprite = sprite } function updateFace(points) { updateCubeGeometry(points) diff --git a/site/public/index.html b/site/public/index.html index a9f16f30..df5121a8 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -38,7 +38,7 @@
- +
@@ -64,15 +64,24 @@
-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

+ MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth. +

+

+ Through a mix of case studies, visualizations, and interactive tools, Megapixels will use facial recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of facial recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part. +

+

+ Facial recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate. +

+

+ During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using facial recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. +

-
+

Dataset Portraits

- We have prepared detailed studies of some of the more noteworthy datasets. + We have prepared detailed case studies of some of the more noteworthy datasets, including tools to help you learn what is contained in these datasets, and even whether your own face has been used to train these algorithms.

@@ -110,7 +119,10 @@ - + + + + diff --git a/site/templates/home.html b/site/templates/home.html index 03a61af2..a8695b4e 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -12,7 +12,7 @@
- +
@@ -38,15 +38,24 @@ -

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

+ MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth. +

+

+ Through a mix of case studies, visualizations, and interactive tools, Megapixels will use facial recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of facial recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part. +

+

+ Facial recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate. +

+

+ During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using facial recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. +

-
+

Dataset Portraits

- We have prepared detailed studies of some of the more noteworthy datasets. + We have prepared detailed case studies of some of the more noteworthy datasets, including tools to help you learn what is contained in these datasets, and even whether your own face has been used to train these algorithms.

@@ -63,7 +72,10 @@ {% endblock %} {% block scripts %} - + + + + -- cgit v1.2.3-70-g09d2 From 0bbcee858eebc5d659c490f30fb94a9e3c79312f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 16:03:05 +0100 Subject: text rotation --- site/assets/css/applets.css | 3 +++ site/assets/css/css.css | 3 +++ site/assets/js/app/face.js | 1 + 3 files changed, 7 insertions(+) (limited to 'site/assets/js') diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index 1b4bd7d2..1e57578e 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -57,6 +57,9 @@ .results > div:nth-child(3n+1) { margin-left: 0; } +.applet h2 { + font-size: 20pt; +} .query h2 { margin-top: 0; padding-top: 0; } diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 4689f67b..8b99f740 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -401,6 +401,8 @@ section.fullwidth .image { right: -16vw; z-index: 0; text-align: center; + perspective: 500px; + perspective-origin: 50% 80%; } .currentFace { position: absolute; @@ -408,6 +410,7 @@ section.fullwidth .image { width: 100%; left: 0; text-align: center; + font-size: 26px; } .intro { max-width: 640px; diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index ab3d950f..0d3ce232 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -245,6 +245,7 @@ var faceInit = function () { mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1 scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2 scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI + currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)" // scene.rotation.y += 0.01 last_t = t } -- cgit v1.2.3-70-g09d2 From f85178189b2675edd967bb4c80acd7be3194fe80 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 16:07:57 +0100 Subject: better css --- site/assets/css/css.css | 1 + site/assets/js/app/face.js | 1 + 2 files changed, 2 insertions(+) (limited to 'site/assets/js') diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 8b99f740..50958427 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -6,6 +6,7 @@ html, body { min-height: 100%; font-family: 'Roboto', sans-serif; color: #b8b8b8; + overflow-x: hidden; } html { background: #191919; diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index 0d3ce232..0a87d2b2 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -9,6 +9,7 @@ var faceInit = function () { var SWAP_TIME = 500 var cubes = [], meshes = [] var currentFace = document.querySelector('.currentFace') + var introEl = document.querySelector('.intro') var faceBuffer = (function () { var a = new Array(FACE_POINT_COUNT) for (let i = 0; i < FACE_POINT_COUNT; i++) { -- cgit v1.2.3-70-g09d2