humane demo

[In]Humane (2025) Levi Villarreal

Website demo

Source code

What is violence?

“Is it not violent for a child to go to bed hungry in the richest country in the world? I think that is violent. But that type of violence is so institutionalized that it becomes a part of our way of life…”

Kwame Ture

Is it violent to eat a chicken parm sandwich? Is it violent to cut off a chickens beaks and throw baby male chicks into a grinder? Is it violent to wear the skin of a once living being who lived a brtual life and died an awful death? Is it violence even though you’re not in the room where this violence is happening?

I have seen a prevailing sense of nihilism amongst my peers, espeically well educated left leaning ones, when talking about animal abuse. Everything we consume either directly or passively involves exploitation of some kind, so why sweat it? This has always frustrated me, as especially college educated American citizens are not powerless. It is up to us who have the power of choice (whether it be voting, activism, or simply consumer choice) to pave the way for others who don’t have that privilege. And while of course there is “no eithical consumption under capitalism”, is there any ecomomic or political system that would kill sentient, highly intelligent animals at a fraction of their lifespans for our own temporary sensory pleasure?

These are the themes I wanted to explore in my second project for Creative Coding: Opposites.

Choose a pair of words with opposite meanings,

Bonus: Incorporate images and/or video in your sketch in an interesting way. Can you manipulate pixels on the screen to form images of opposite meanings, or create a short “choose your own adventure” narrative?

I chose the words humane/Inhumane. I wanted to show a progression of ‘innner corruption/turmoil’ that happens when we make seemingly innocuous choices in a society that normalizes violence against animals.

Devlopment

I started with a sketch that I had made over a year before when I had first learned p5.js. This sketch used noise to generate a random, spiky blob.

blob

The sketch I made in 2024 as part of a creative coding workshop at ITP Camp

I liked the structured but chaotic nature of this sketch, and also the foundation that it gave me to build on. I then got to work adding camera capture through createCapture(), and looping through each frame to turn the video into a series of blobs that could be variably spiky.

capture.loadPixels();

for (let col = 0; col < IMAGE_WIDTH; col += 10) {
  for (let row = 0; row < IMAGE_HEIGHT; row += 10) {
    const i = 4 * (row * IMAGE_WIDTH + col);
    const r = capture.pixels[i] * agitation;
    const g = capture.pixels[i + 1];
    const b = capture.pixels[i + 2];
    const a = capture.pixels[i + 3];

    fill(r, g, b, a);
    noStroke();

    drawBlob(col, row, 20);
  }
}

This ended up being a pretty unperformant solution when there was a higher number of blobs in the sketch. This made sense, as this was an O(m * n * o) solution run on each frame (60fps) where:

  • m - Image Width / blob width (400 / 10)
  • n - Image height / blob height (250 / 10)
  • o - Number of vertices in each blob (23)

Not to mention all of the canvas drawing operations to render the blobs. I’m sure there must be a better way to do this (probably a shader), but I couldn’t find an easy one! Luckly, by adjusting these 3 parameters I was able to get a good looking solution that was still passably performant.

camera demo

Demo video I took on a plane. I don’t remember what I was doing with my arms

I then worked on getting this into a format that I could put online. I’ve been using Svelte for the past few years for personal projects and was happy to find a package that lets you add p5 to any project easily. Turns it was made my one of my coworkers who was working on Figma Buzz video export! I installed it and it worked well, and I got to work building the quiz interface. It’s little more than HTML inputs and buttons that pull the questions from an easily configurable json file with the questions, answers, and explanations.

I spent too much time here polishing the p5 sketch, ensuring the blobs overlapped in a random way, that everything fit the bounds of the container nicely, etc. That meant it was the night before the project was due and I still didn’t have the questions written out. I wanted the quiz to be a slow realization of what was affecting the users image, and add educational explanations so the player would learn about the torture that goes into everyday animal products.

Eventually I called it a night and submitted the project - a simple 9 question multiple choice quiz where your answers affected multiple aspects of the site:

  • Your self-portraits jaggedness, speed, and red tint
  • The tab favicon from an angel to a devil
  • The [in] in front of Humane to fade in

good

An example of the intial state, no ‘bad’ options chosen

evil

An example of a later state, with some ‘badness’ been selected throughout the quiz

Reception

One of the most valuable parts of grad school for me has been that professors and other students will engage deeply with your work and provide critical feedback. I took this project to multiple classmates and instructors and these were some of the common themes:

  • I should have started by developing the questions. That narrative was central to the emotional impact of the piece, and my time would have been better spent getting that set in stone. A lot of problems stem from that - some people throught the site was absurdist, some by chance only chose the ‘good’ optoins and saw no change until prompted.
  • It would have been more statisfying if it had an end screen, something to bookend the interactive quiz.
  • The direct comparison with humans to animals could be more evocative and distracting than helpful.
  • People actually wanted to read more than what I included about factory farming practices.

All of this was really helpful. I realized that for a piece like this, what I think of it matters very little, and I should be focused entirely on how the audience will receive it. While I think I’m done with this project for now, I’ll take these learnings and apply them to my future work!