MFR Documentation

Apr 7, 2025

Introduction

What is mortal.fr? Mortal.fr is the second portion of my hybrid capstone project. It is designed to complement and go hand in hand with the essay ‘Encoded Bias’ which you can read here.

Mortal.fr is a generative art HTML CSS and JavaScript based spirogram generator inspired after the look from the hit tv show, Severance. Designed with the idea of hacker-y aesthetics, Mortal.fr is positioned at the intersection of critical design. It is there to help you question everything and anything about the world of algorithms, art, UI and UX.

I am attempting to bring awareness to the fact that bias, racism, and other assumptions may be encoded in everything we use from something as mundane as a chair, and doorknob, to an advanced policing algorithm and social feed. Everything is built with intention in some way or another, with malice or without, subconsciously or consciously, it matters not. What matters is the fact that it is there, and Mortal.fr is a mirror of itself.

Initial Concept

Initially Mortal.fr was going to be a minimalistic, modern, and ‘clan’ spirogram generator using facial recognition technology as can be seen here.

Gallery UI Idea

Screen #1

Screen #2

Facial Recognition Screen

This was the idea for the visual signage that would represent the different coloured spirograms, and other UI elements.

I also had the idea for a bunch of different logos which can be seen here.

I eventually settled on the Mother and Child logo designed to represent the creator of the program and its creation, reflecting its own bias into itself, the same way that I am reflecting my own ideas, opinions and biases into Mortal.fr.

This later evolved into this UI modeled after the look of many Apple terminal applications. Simple white and 'clean'.

While this looked nice, it didn't feel honest. I was tackling the idea of dishonesty, and the abstraction of friendly UI and making one myself felt wrong so I went for a complete 180.

The look of Severance inspired the new UX.

Here is the final look.

Detailed Code Analysis of mfr.HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Mortal.fr</title>
  <style>
    /* Basic page styling - dark theme with neon green text */
    body {
      margin

This sets the theme of the page. The margin and padding are set to 0. The font is set to Courier New because it's on every device. Originally I was going to use IBM Plex Mono but I found that some Mac and Linux devices didn't have it preinstalled. The text alignment is set to center so that its all in the middle. The background colour with the accent colour are set. (I wish HTML would let me say 'colour' rather than 'color'.)

    /* Fake Loading Screen - Deceptive*/
    #loadingScreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #0f0f0f;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 1s ease-in-out;
      z-index: 9999;
    }
    /* Loading screen image styling*/

    #loadingScreen img {
      width: 150px;
      height: auto;
      margin-bottom: 20px;
    }

    /* Loading Screen text styling*/

    #loadingText {
      font-size: 18px;
      font-weight: bold;
    }

    /* Hide the loading screen after fade */
    .hide {
      opacity: 0;
      pointer-events: none;
    }

In an effort to create a level of friction and unease the user is presented with a fake loading screen. I wanted something that would show off the logo and trick the user that the website needs time to load in a world that almost never loads. This gave them a sense of security. "Oh wow this needs to load so it must be detailed and a big file"

The LoadingScreen function sets out the main look of the UI. Setting the colour again, with the accent, and the way alignment works.

The LoadingScreen img sets the look of the SVG of the Mother figure.

The rest are just supplemental.

    /* Header styling infomration*/
    header {
      font-size: 24px;
      font-weight: bold;
      padding: 15px;
      background-color: #00ff99;
      color: #0f0f0f;
      margin-bottom: 20px;
    }

This sets the styling for the header, with the font size, font colour, and margins and padding.

    /* Main UI container */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
      max-width: 600px;
      margin: auto;
    }

Here I set the main UI container and it's size to the max of 600 pixels. The padding is set to 20 pixels.

    /* Character Matrix Grid - Numbers and letters and such */
    .matrix {
      display: grid;
      grid-template-columns: repeat(15, 30px);
      gap: 2px;
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #00ff99;
    }

    .cell {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #00ff99;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
    }

    .cell.selected {
      background-color: #00ff99;
      color: #0f0f0f;
    }

    .bold {
      font-weight: 900;
    }

    .italic {
      font-style: italic;
      font-weight: 500;
    }

Here we generate the matrix like board of letters and numbers. This bit decides which will be bold, and italics as well. If a cell is selected its look changes slightly. Just basic styling is set in here.

    /* UI Buttons like clear, about etc. */
    #generate, #clear, #aboutButton {
      background-color: #00ff99;
      color: #0f0f0f;
      font-size: 16px;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      margin: 5px;
      width: 150px;
    }

    /* Canvas for spirographs */
    canvas {
      margin-top: 20px;
      background: #0f0f0f;
      border: 1px solid #00ff99;
    }
  </style>
</head>

Here we set the buttons and how they look. This is for the clear, generate and about buttons. They all look the same and their dimensions are identical.

 <div id="loadingScreen">
  <img src="logo.svg" alt="Mortal.fr Logo">
  <div id="loadingText">Loading...</div>
</div>

This bit sets the loading screen logo to the svg included in the file folder. This sets the mood of the overall project

<header>
  Mortal.fr will use the webcam as colour input. No data is stored, shared or otherwise used.
</header>

This is the header that shows the disclaimer of camera usage. It will be present to inform the end use that MFR is using webcam input to determine the colour of the end spirograms.

<div class="container">
  <video id="video" width="200" height="150" autoplay style="display: none;"></video>

I was inspired by Severance and the last few episodes to include a visible webcam preview of the user, however this was scarped and this is just some leftover code. It's a hidden camera container.

  <button id="generate">GENERATE</button>
  <button id="clear">CLEAR</button>
  <button id="aboutButton" onclick="window.location.href='https://nikola.nyc/mortal'">ABOUT</button>

These are the buttons without their styling as that was done above.

  <canvas id="spiroCanvas" width="400" height="400"></canvas>
</div>

This is the square canvas where the actual spirograph is drawn in. The size of it is fixed and centered to maintain symmetry.

Due to the fact that I wanted everything to be within one file, the JavaScript continuities within the HTML. As the code was not that long this felt optimal, even though it should've been a separate file with it's own name.

setTimeout(() => {
  let loadingScreen = document.getElementById('loadingScreen');
  loadingScreen.classList.add('hide');

  setTimeout(() => {
    loadingScreen.remove();
  }, 1000);
}, 2000);

This JS code sets the time for how long the loading screen stays present. Right now its set to 2 seconds long. This helps to build anticipation.

const video = document.getElementById('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let detectedColor = "#00ff99";

This is the JS code that reads the webcam data for colour detection. I've included a failsafe colour to make sure that in case the camera fails there is still a colour to create the end result.

navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
  video.srcObject = stream;
}).catch(error => {
  console.error("Camera access denied:", error);
});

I've had several errors with the webcam input so this allows me to both deny and accept the webcam from the browser. It also lets me know in the console if the webcam is working or not using Chrome's inspect element.

function extractColor() {
  if (!video.videoWidth || !video.videoHeight) return;

  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  let pixels = imageData.data;

  let r = 0, g = 0, b = 0, count = 0;
  for (let i = 0; i < pixels.length; i += 4 * 100) {
    r += pixels[i];
    g += pixels[i + 1];
    b += pixels[i + 2];
    count++;
  }

  r = Math.floor(r / count);
  g = Math.floor(g / count);
  b = Math.floor(b / count);

  detectedColor = `rgb(${r}, ${g}, ${b})`;
}

setInterval(extractColor, 500);

This function extracts the dominant colour from a frame of the webcam. I was inspired by these conversations on the internet to get my colour detection working:

https://stackoverflow.com/questions/15603483/calculate-the-number-of-pixels-inside-a-shape-drawn-on-html5-canvas

https://www.php.net/manual/en/function.imagecolorat.php

https://processing.org/tutorials/pixels

https://gist.github.com/taf2/5788459858fb9226a513ac1fedaf6d63

const grid = document.getElementById('grid');
const chars = '123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const styles = ['normal', 'bold', 'italic'];

for (let i = 0; i < 150; i++) {
  const cell = document.createElement('div');
  cell.classList.add('cell');
  cell.textContent = chars.charAt(Math.floor(Math.random() * chars.length));

  let style = styles[Math.floor(Math.random() * styles.length)];
  if (style !== 'normal') cell.classList.add(style);

  cell.addEventListener('mouseenter', () => {
    cell.style.transform = 'translateY(-5px)';
    cell.style.transition = 'transform 0.2s ease-out';
  });

  cell.addEventListener('mouseleave', () => {
    cell.style.transform = 'translateY(0)';
  });

  cell.addEventListener('click', () => cell.classList.toggle('selected'));

  grid.appendChild(cell);
}

This JS Event builds a grid of 150 character cells and randomly assigns styling. We get new variables, grid, chars and styles, designed to help me maintain track of what character is selected where and how. Using some random math the cells are created. This also adds a nice little animation. On MouseEnter the cells are transformed, moved, up by 5 pixels, to show a hover effect. On MouseLeave they return back to their original position. When a cell is clicked then it is selected.

document.getElementById('generate').addEventListener('click', () => {
  const selected = document.querySelectorAll('.cell.selected');
  if (selected.length === 0) return;

  let boldCount = 0, italicCount = 0;
  selected.forEach(cell => {
    if (cell.classList.contains('bold')) boldCount++;
    if (cell.classList.contains('italic')) italicCount++;
  });

  const spiroCanvas = document.getElementById('spiroCanvas');
  const spiroCtx = spiroCanvas.getContext('2d');
  spiroCtx.clearRect(0, 0, spiroCanvas.width, spiroCanvas.height);
  spiroCtx.resetTransform();
  spiroCtx.translate(200, 200);
  spiroCtx.strokeStyle = detectedColor;
  spiroCtx.lineWidth = 1 + boldCount;

  const R = 100 + selected.length;
  const r = 30 + Math.floor(selected.length / 2);
  const l = 0.7 + italicCount * 0.2;

  spiroCtx.beginPath();
  for (let t = 0; t < Math.PI * 2 * 10; t += 0.02) {
    const x = (R - r) * Math.cos(t) + l * r * Math.cos(((R - r) / r) * t);
    const y = (R - r) * Math.sin(t) - l * r * Math.sin(((R - r) / r) * t);
    spiroCtx.lineTo(x, y);
  }
  spiroCtx.stroke();
});

Now, the spirogram generation. I had used some simple spirogram examples I found on GitHub to guide me in the creation of this code. I ended up using PI to draw the circles as this proved to be most efficient and easiest. These are spirograms based in circles rather than any other shape which lowered the complexity of the code. I did attempt to make triangular spirograms but that did not work well. The same went for 3D based ones too.

boldCount = width of the lines of the artwork

italicCount = looping complexity and number of interlacing lines

selected.lenght = shape size of the general design

https://github.com/Khongchai/web-spirograph

document.getElementById('clear').addEventListener('click', () => {
  const canvas = document.getElementById('spiroCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#0f0f0f';
  ctx.resetTransform();
  ctx.fillRect(0, 0, canvas.width, canvas.height);
});

This simply clears the canvas by drawing over it with another rectangle. It doesn't really 'clear' it but only fills it in.

const audio = document.getElementById("backgroundMusic");
audio.volume = 0.5;

function tryPlayMusic() {
  audio.play().then(() => {
    console.log("Background music playing.");
  }).catch(() => {
    console.log("User interaction required for music.");
    document.body.addEventListener("click", () => {
      audio.play();
    }, { once: true });
  });
}
tryPlayMusic();

Lastly the music and its interaction. I've added several lines to let me know if there are errors in the code. This would spit it out in the console informing me if the music is or isn't working. The browser will attempt to autoplay the sounds. If the browser blocks autoplay for music, then it will wait for the user to click on the webpage.

What I Would Do Differently?

This code was rushed. It doesn't reflect the best practices of organization and its buggy. If I were to make MFR v2.0 I would ensure it is organized in individual files rather than all inside of one. I would add the ability to generate different kinds of spirograms as well. I would attempt to code an algorithm that could sense emotions to a degree as well, in an effort to poke fun at the biases. I'm thinking that I'd intentionally flip the results of these readings to be false exposing fails. I scrapped the addition of coloured cells. This proved to be too much to manage with the bolded and italics as I'd need to create so many new variables to maintain track of each and every single new cells. Adding 1 extra coloured cell would double the variables which would lead to exponential growth. I'm sure there is a way to make this simpler but I couldn't think of it.

Technical References

“CSS: Cascading Style Sheets.” MDN Web Docs, Mozilla, https://developer.mozilla.org/en-US/docs/Web/CSS. Accessed 22 Mar. 2025.

Google Fonts. Google, https://fonts.google.com. Accessed 22 Mar. 2025.

“HTML: HyperText Markup Language.” MDN Web Docs, Mozilla, https://developer.mozilla.org/en-US/docs/Web/HTML. Accessed 22 Mar. 2025.

iam-robin. Severance Interface. GitHub, 2022, https://github.com/iam-robin/severance-interface. Accessed 22 Mar. 2025.

ivelasq. Severance. GitHub, 2022, https://github.com/ivelasq/severance. Accessed 22 Mar. 2025.

“JavaScript.” MDN Web Docs, Mozilla, https://developer.mozilla.org/en-US/docs/Web/JavaScript. Accessed 22 Mar. 2025.

P5.js Reference. Processing Foundation, https://p5js.org/reference. Accessed 22 Mar. 2025.

Pole11. Spirograph. GitHub, 2023, https://github.com/Pole11/spirograph. Accessed 22 Mar. 2025.

rspt. Processing Spirograph. GitHub, 2017, https://github.com/rspt/processing-spirograph. Accessed 22 Mar. 2025.