1. Finaler Titel
Essentials carried
https://essentials-carried.webflow.io/
2. Kurzbeschreibung / Abstract
Jedes Jahr werden rund 25 Millionen Menschen aus ihrer Heimat vertrieben. Ohne Zeit für Vorbereitungen, fliehen sie häufig nur mit dem Nötigsten. Oft mangelt es in der Gesellschaft an Verständnis für das Leiden und den Verlust von geflüchteten Menschen. Viele sprechen sich gegen ihre Anwesenheit aus, ohne zu erkennen, dass die Menschen für die Flucht ihre gesamte Existenz aufgeben mussten.
Essentials carried - ein Remixprojekt von »What they took with them« von Jenifer Toksvig und »The most important thing« von Brian Sokol - beschäftigt sich mit den Gegenständen die auf die Flucht mitgenommen werden. In Form einer Storytelling-Webseite wird der/die User:in von Jenifer Toskvigs Gedicht, zu den darin genannten Gegenständen und den realen Geschichten hinter Brian Sokols Fotografien geführt. Am Ende kann der/die User:in in einer interaktiven Besucherumfrage die Frage »What would you take with you?« für sich beantworten.
Das Projekt zielt darauf ab, denen eine Stimme zu geben die sonst keine bekommen und das Bewusstsein für das Leid und den Verlust von Vertriebenen zu schärfen. Es soll uns daran erinnern, dass jeder geflüchtete Mensch Respekt und Verständnis auf seinem Weg in eine bessere Zukunft verdient.
3. Filmische Dokumentation
Präsentationsvideo:
Werkschauvideo:
Screencast Webseite:
Screencast Collage »What would you take with you?«
4. Projektbilder
5. Pitch Deck
6. Userjourney / Userflow
7. Designprozess
KW28 - Finalisierung Webflow & Lasercuttern
Meine Webflow-Seite ist nun soweit fertig. Ich habe noch einen anderen Cursor eingebaut, Detailkorrektur gemacht und die Bilder von den Stories hinterlegt. Hier ein kleiner Einblick in meine Struktur.
Ansonsten habe ich noch die Illustratordatei für die iPad-Hülle fertig gemacht und war dann mit Celina (vielen Dank an sie!) beim Lasercutten. Bin sehr zufrieden mit dem Ergebnis.
KW27 - Finalisierung Collage und Bilder Stories, Skizze Koffer für iPad, Webflow
Die Collagenbilder wurden fertig generiert und in p5js eingefügt. Nun kommen auf Klick eines Buttons immer fünf verschiedene Bilder.
Damit die Benutzeroberfläche nicht mit scrollt, wenn man über den Touchscreen streicht, habe ich in p5js in JavaScript Zeilen bei der setup-Funktion eingefügt:
// Disable touch scroll and zoom
let canvas = document.querySelector('canvas');
canvas.style.touchAction = 'none';
canvas.style.msTouchAction = 'none';
Die Bilder für die Stories wurde fertiggestellt. Sie werden dann in Flourish bei der Darstellung eingefügt. ©Brian Sokol, UNHCR wurde auf den Bildern ergänzt.
Für das ipad wollte ich eine Hülle in Form eines Koffers bauen. Hier habe ich in Illustrator mal erste Skizzen mit Abmessungen gemacht.
In Webflow habe ich auch weitergearbeitet und bin fast fertig.
https://essentials-carried.webflow.io/
KW26 - Finalisierung Gedicht, Animationen, Weitere Verfremdung, Email Fotograf
Das Gedicht wurde finalisiert. Ich habe die Audiodateien zusammengeschnitten und Audio und Bilder in Flourish eingefügt. Danach wurde das Ganze in Flourish getimed.
Ich habe drei Animationen gebaut und über Lottie oder als Video in Webflow eingebettet. Die Verlaufswellen deshalb, wegen der Flucht übers Meer.
Ich habe mal noch getestet, wie man die Fotografien noch mehr verfremden könnte. Da eine Google-Bilder-Rückwärts-Suche das Originalbild erkannt hat.
Aufgrund der rechtlichen Thematik bezüglich der Bilder habe ich versucht den Fotografen zu kontaktieren. Leider habe ich keine offizielle Emailadresse gefunden. Weshalb ich ihn eine Chat-Anfrage auf Instagram senden musste. Zusätzlich habe ich bei der Medienabteilung der UNHCR nachgefragt, ob sie Kontakt zum Fotografen herstellen können.
Solange es keine Rückmeldung gibt, haben wir beschlossen, mit den Bildern wie ursprünglich geplant (Rastereffekt) weiterzuarbeiten.
KW25 - Prototyp Figma, Bildrechte, KI-Stimmen und Bilder
Diese Woche habe ich den Prototypen in Figma skizziert und vor allem wieder KI-Stimmen für das Gedicht und die Geschichten und KI-Bilder generiert. Ich habe jetzt alles. Darüber hinaus war ich mit Regina im Kontakt, wegen der Problematik mit den Bildrechten.
KW24 - weitereführende Recherche, KI-Bilder und KI-Stimmen generieren, Filter Bilder, Karte Datawrapper
Tatsächlich habe ich in dieser Woche noch einmal sehr viele Fotografien von Brian Sokol zu weiteren Personen mit anderen Gegenständen gefunden. Viele Gegenstände stimmen mit dem Gedicht überein. Ich habe alles gesammelt und die Texte umformuliert (aus Ich-Perspektive). Die Geschichten von den Personen sollen dann auf Klick mit KI-Stimmen abgespielt werden. Genauso wie das Gedicht. Dafür habe ich in ElevenLabs zahlreiche Audios generiert. Darüber hinaus habe ich begonnen, die KI-Bilder von den im Gedicht genannten Gegenstände mit Firefly zu generieren. Einige Fotografien von Brian Sokol habe ich schon mit dem Rasterfilter verfremdet, in Figma ein Layout angelegt und als Test in Flourish hinterlegt.
Darüber hinaus habe ich eine Karte in Datawrapper gebaut, die dann anschließend in Webflow eingebettet wird. Diese soll den User:innen Zahlen von Vertriebenen aufzeigen.
KW23 - Collage p5js, Typo Wörterbad Animation, KI generierte Stimmen, Moodboard, Verfremdung Bilder
Collage p5js
Michael hat mir einen p5js Sketch geschickt. Die Collage sollte auch dort gut funktionieren.
Ich habe mit den Code weitergearbeitet und ein paar Dinge geändert.
Die in der Collage aufploppenden Gegenstände können mit Adobe Firefly wie folgt in schwarzweiß generiert generiert werden.
Typo Wörterbad Animation + KI generierte Stimmen
Ich habe mit dem Typo Wörterbad weitergemacht. Hierfür habe ich nun verschiedene KI Stimmen in elevenlabs generiert und danach die Audiodateien in Audacity zusammengeschnitten. Die Typo Animation wurde dann in Flourish dementsprechend getimed/angepasst. Ich habe bisher leider nur einen kleinen Teil des Gedichts fertig, da dies sehr aufwendig ist.
Moodboard
Ansonsten habe ich noch ein kleines Moodbard mit zwei verschiedenen Typo-Varianten erstellt, in welche Richtung es visuell gehen könnte. Da ich es nicht ganz dunkel haben wollte, dachte ich mir, dass man noch hellere, positivere Farben in Form eines Verlauf einbauen könnte. Die Farben lassen sich wie folgt ableiten: Das Blau steht für Wasser - viele Menschen flüchten übers Meer. Und das Gelb steht für den Himmel, die Sonne, einen neuen, hoffnungsvollen Lebensabschnitt.
Die Fotografien von Brian Sokol werden in Photoshop verfremdet, wobei der Gegenstand in schwarzweiß bleibt - genauso wie die KI generierten Bilder von den Gegenständen.
Verfremdung Bilder
Ich habe mich jetzt für eine Körnung und einen Rasterungseffekt in Photoshop entschieden. Der jeweilige Gegenstand kann noch eingefärbt werden.
Körnung: Intensität 100, Kontrast 0, Körnungsart Sprenkel
Rasterungseffekt: Größe 1, Kontrast 0, Musterart Punkt.
KW22 - Verfremdung Bilder, Collage, KI generierte Bilder, Teaser Animation, embed Webflow
Verfremdung Bilder
für die Verfremdung der Bilder habe ich mal einen Stencil-Filter, einen Farbfilter und den Dither Effekt ausprobiert.
Collage
am Ende von meinen Projekt möchte ich gerne die Personen fragen „what would you take with you?“. Hier war die Idee etwas zu programmieren. Auf Klick eines Buttons sollen unterschiedliche KI-generierte Bilder rausploppen und insgesamt eine Art Collage ergeben. Auf Drag soll die Collage neu gemischt werden können. Hier habe ich mithilfe von ChatGPT einen ersten Code erstellt. Bisher funktioniert aber immer nur dasselbe Bild bei einem Button.
KI generierte Bilder
für die Collage wurden erste Bilder mit Tensor Art für Wasser, Pass, Handy und Bilder generiert.
Teaser Animation und embed Webflow
Als Teaser könnte ich mir eine Counter-Animation auf Scroll gut vorstellen. Hier hatte ich bisher nur ein Problem mit den Dezimalstellen.
Ansonsten habe ich die Animation und die Flourish Visualisierungen mal in Webflow eingebettet.
KW20 - Tests Flourish, KI generierte Stimmen & Zusammenfassung Module
Ich habe in Flourish mit meinen Daten experimentiert. In den Datensätzen wurden die im Gedicht genannten Gegenstände, deren Anzahl, deren Kategorie, deren Überlebensnotwendigkeit und Testbilder hinterlegt. Flourish ist ein sehr starkes Tool.
- Ich konnte ein Wortbad mit Audio erstellen -> hier ist ggf. geplant, das Gedicht mit KI generierten Stimmen generieren zu lassen. Die Audiodatei läuft ab und es erscheinen die einzelnen Gegenstände als Komposition.
- Ansonsten kann man die Datensätze noch Kategorisieren lassen.
- Es gibt einen Counter, der ggf. als Einstieg in der Webseite verwendet werden kann für eine Sideinformation.
- Cards können für die Storys verwendet werden. Auch hier wurde eine Geschichte mit KI generiert. Auf Klick von der Geschichte wird das Audio abgespielt.
KW19 - Pitch (alte Version)
KW18 - Erste Skizzen
KW17 - Weitere Recherche innerhalb Konzeptideen
Diese Idee würde auf ein bestehendes Projekt der UNHCR aufbauen. Im nächsten Schritt wurde das Gedicht „what they took with them“ von Jenifer Toksvig analysiert. Genannte Gegenstände wurden gezählt, gruppiert und in einem Diagramm veranschaulicht. Das Gedicht beruht ua. auf die Fotografien und Erzählungen aus dem Photoprojekt „the most important thing“ von Brian Sokol. Fotografien und die dazugehörigen Geschichten wurden herausgesucht.
Bei dieser Idee wurden mögliche Vorfälle für das Spielskript herausgesucht.
KW16 - Konkrete Konzeptideen
KW15 - Recherche und erste Ideen
KW13 - Themenvorschläge
8. Links
Webflow
Webseite:
https://essentials-carried.webflow.io/
Figma
Research:
Research Fotografien + Stories:
Quellen:
Prototyp Webseite:
Bilder Stories:
KI-Bilder Collage:
KI-Bilder Gedicht:
P5js
Collage - Fullscreen:
https://editor.p5js.org/sloecker/full/uDZK6AvyU
Sketch.js:
let mass = 40,
radius = 50,
strength = 100000,
bubbleSize = 90; // Fixed size for all bubbles
let perticle_num = 0; // Initial particle number is 0
let random_values = []
let bg_images = [] // Array to store background images
let mask;
let physics, anchor;
let buttonClickCounts = [] // Array to store click counts for each button
function preload() {
for (let i = 0; i < 50; i++) {
let imgPath = „image“ + (i + 1) + „.png“; // Update path if necessary
bg_images[i] = loadImage(imgPath,
() => console.log(„Loaded “ + imgPath), // Success callback
() => console.error(„Failed to load “ + imgPath) // Error callback
);
}
}
function setup() {
createCanvas(windowWidth, windowHeight);
// Disable touch scroll and zoom
let canvas = document.querySelector('canvas');
canvas.style.touchAction = 'none';
canvas.style.msTouchAction = 'none';
physics = new Physics();
anchor = physics.makeParticle(mass, width / 2, height / 2);
anchor.makeFixed();
physics.play();
// create mask
mask = createGraphics(512, 512);
mask.fill(0);
mask.ellipse(mask.width / 2, mask.height / 2, 512);
for (let i = 0; i < bg_images.length; i++) {
if (bg_images[i]) { // Check if the image is loaded
bg_images[i].mask(mask);
}
}
imageMode(CENTER);
// Create 10 buttons with different names and initialize click counts
createButtons();
}
function draw() {
drawGradientBackground();
if (mouseIsPressed) {
anchor.position.x = mouseX;
anchor.position.y = mouseY;
}
physics.update();
checkCollision();
fill(100);
ellipse(anchor.position.x, anchor.position.y, radius);
noFill();
for (let i = 1; i < physics.particles.length; i++) {
let px = physics.particles[i].position.x;
let py = physics.particles[i].position.y;
let img = physics.particles[i].image;
let aspectRatio = img.width / img.height;
let drawWidth, drawHeight;
if (aspectRatio > 1) {
drawWidth = bubbleSize;
drawHeight = bubbleSize / aspectRatio;
} else {
drawWidth = bubbleSize * aspectRatio;
drawHeight = bubbleSize;
}
tint(255); // Ensure the tint is set to normal
image(img, px, py, drawWidth, drawHeight); // Draw with correct aspect ratio
ellipse(px, py, bubbleSize); // Draw bubble border
}
}
// Function to draw a vertical gradient background
function drawGradientBackground() {
let color1 = color(232, 189, 138); // Orange
let color2 = color(46, 76, 255); // Blue
for (let y = 0; y < height; y++) {
let inter = map(y, 0, height, 0, 1);
let c = lerpColor(color1, color2, inter);
stroke(c);
line(0, y, width, y);
}
}
// https://jonobr1.com/Physics
function checkCollision() {
for (let i = 0, l = physics.particles.length; i < l; i++) {
// iterate through each other particle
for (let j = i + 1; j < l; j++) {
let a = physics.particles[i]
let b = physics.particles[j]
let d = a.distanceTo(b);
// Collision for same mass particles
// http://en.wikipedia.org/wiki/Elastic_collision
let diameter = bubbleSize; // Use fixed size
if (d let v = a.velocity.clone();
a.velocity.copy(b.velocity).multiplyScalar(0.75);
b.velocity.copy(v).multiplyScalar(0.75);
if (d < diameter) {
// Force particles to be tangential.
// i.e: No sphere is ever within another sphere.
let makeup = (diameter - d) / 2;
let angle = Math.atan2(
b.position.y - a.position.y,
b.position.x - a.position.x
);
b.position.x += makeup * Math.cos(angle);
b.position.y += makeup * Math.sin(angle);
angle += Math.PI;
if (i > 0) {
a.position.x += makeup * Math.cos(angle);
a.position.y += makeup * Math.sin(angle);
}
}
}
}
}
}
function createButtons() {
let buttonNames = ['water', 'money', 'passport', 'phone', 'laptop',
'food', 'pills', 'cigarettes', 'clothes', 'toothbrush']
let buttonWidth = 100;
let buttonHeight = 30;
let horizontalSpacing = 20;
let verticalSpacing = 10;
let totalWidth = 5 * buttonWidth + 4 * horizontalSpacing;
let startX = (windowWidth - totalWidth) / 2;
let startY = 20;
for (let i = 0; i < 10; i++) {
buttonClickCounts[i] = 0; // Initialize click counts
let button = createButton(buttonNames[i] + ': ' + buttonClickCounts[i]);
let x = startX + (i % 5) * (buttonWidth + horizontalSpacing);
let y = startY + Math.floor(i / 5) * (buttonHeight + verticalSpacing);
button.position(x, y);
button.size(buttonWidth, buttonHeight);
// Apply CSS-like styling directly in JavaScript
button.style('background-color', '#000'); // Set background color to black
button.style('color', '#fff'); // Set text color to white
button.style('border-radius', '10px'); // Set border-radius for rounded corners
button.style('font-family', 'Source Sans Pro, sans-serif');
button.style('font-weight', '200'); // Extralight
button.style('text-align', 'center');
button.mousePressed(() => displayBubble(i, button));
}
}
function displayBubble(index, button) {
let x = random(0, width);
let y = random(0, height);
let particle = physics.makeParticle(mass, x, y);
random_values.push(bubbleSize);
physics.particles.push(particle);
// Calculate the image index based on click count
let imageIndex = (index * 5) + (buttonClickCounts[index] % 5);
particle.image = bg_images[imageIndex] // Assign the image corresponding to the button and click count
particle.size = bubbleSize;
physics.makeAttraction(anchor, particle, strength, width);
// Update click count and button label
buttonClickCounts[index]++;
button.html(button.html().split(':')[0] + ': ' + buttonClickCounts[index]);
}
