Author: Begad Elfackrany

This week I made progress on my midterm project, which is an interactive webcam artwork inspired by Euphoria’s psychedelic aesthetics. The concept is to let users take a live video feed of themselves and transform it into surreal, hallucination-like visuals. By pressing different keys, the user can switch between effects like color-swapping, glowing “UV tears,” and trippy, pulsating backgrounds.

Concept

The idea is to create a personal, immersive experience where the viewer sees themselves transformed under digital hallucinations. The interactivity allows them to “step into” a psychedelic portrait that reacts to their input.

Design & User Interaction

• The webcam is the canvas: it captures the user in real-time.

• Pressing different keys (1–4) switches between effects.

• Each effect is designed to distort colors, overlay glowing shapes, or alter the background to give a hallucinatory vibe.

Sketch

Code Design

I structured the code into separate functions (psychedelicColors(), uvTears(), hallucinationBackground()) so each effect is modular. The keyPressed() function makes it easy to navigate between modes, and the modular design means I can keep adding effects without breaking old ones.

Risk / Challenge

The most intimidating part of this project is achieving truly psychedelic visuals that feel organic rather than random. Messing with pixel arrays and shaders can be complex. To reduce this risk, I started small: I tested pixel manipulation with basic color channel swaps and added some randomized “tear” overlays. Now that the structure works, I can safely experiment with shaders and sound reactivity in later iterations.

Next Steps

• Experiment with custom GLSL shaders for more advanced visuals.

• Add sound reactivity so the effects pulse with music.

• Enhance backgrounds with layered fractals or noise-based distortio

Post Response: The Psychopathology of Everyday Things

One thing that drives me crazy, which wasn’t directly mentioned in Norman’s reading, is the “close door” button on elevators. It feels like a control I should have, but in most modern elevators, pressing it does absolutely nothing for ordinary passengers. The button is just there to give the illusion of control, which is frustrating when you actually want the doors to close faster. A simple improvement would be to either remove the button entirely or make it functional for real—perhaps by allowing it to slightly shorten the automatic door timer, while still respecting safety regulations. This would reduce the cognitive dissonance between what the interface suggests and what it actually does.

Another example is the volume slider on phones. While it looks linear, the actual increase in volume is logarithmic to match human perception. This hidden design is clever, but it highlights how designers are constantly manipulating reality to feel “natural.” I find it fascinating—and slightly maddening—how often interfaces are designed to trick our senses into thinking things are more intuitive than they are.

Applying Norman’s principles to interactive media, these insights are extremely valuable. For example, in a music app or video game, sliders for volume, brightness, or character speed should be perceptually adjusted so that changes feel smooth and intuitive. Similarly, buttons or controls should give honest feedback: if an action can’t actually happen (like the elevator door closing instantly), the interface should indicate that limitation rather than pretend otherwise. This reduces user frustration and improves overall satisfaction.

In general, understanding the psychopathology of everyday things encourages designers to consider the gap between perception and reality. By designing interactions that match how humans perceive the world, we can make digital interfaces feel more natural and enjoyable.

Concept

My artwork “Can You Understand Me?” explores human connectedness through language and the barriers that can arise when communication breaks down. The phrase “Can you understand me?” is a simple but powerful question, expressing both the desire for connection and the frustration of being misunderstood. By placing this phrase in multiple world languages on the screen, I wanted to highlight the diversity of expression and the universality of the human need to be heard.

The floating words and question marks represent the fluid, sometimes chaotic nature of communication. They drift, interact, and repel—mirroring how language can bring people closer or push them apart, depending on understanding.

Code Highlight (what I’m most proud of)

One feature I’m especially proud of is the repelling effect from the mouse. I designed this so that when the mouse gets too close, the words push away. It represents the tension we sometimes feel in conversation—when misunderstanding or pressure creates distance, even when connection is desired.

Repel from mouse let mouse = createVector(mouseX, mouseY);
let d = dist(this.pos.x, this.pos.y, mouse.x, mouse.y);
if (d < 200) {
let force = p5.Vector.sub(this.pos, mouse);
force.setMag(8 / max(d, 1));
this.vel.add(force);
}

This snippet calculates the distance between each word and the mouse, then generates a force pushing the word away when the mouse is within 200 pixels. It’s a small detail but adds a lot of dynamic personality to the sketch.

Embedded Sketch

Reflection

Working on this project taught me how much movement and interaction can symbolize deeper human experiences. The floating words show how languages circulate and intermingle globally, while the mouse repulsion adds an element of friction, symbolizing the challenges of cross-cultural communication.

Reference

• Perlin Noise in p5.js: https://p5js.org/reference/#/p5/noise

Title: Does the Power of Lover overcome the Love of Power

This is an interactive generative artwork that explores the dynamic struggle between two opposing forces: Power of Love and Love of Power. Using color, motion, and shape, the piece visualizes how these forces interact, dominate, and fade.

Users can interact with the artwork using the keyboard: pressing X strengthens the Power of Love, Z increases Love of Power, and R resets the canvas. As one force grows, it overwhelms the other, creating a constantly shifting visual narrative of dominance, balance, and fragility.

Highlight of Code I’m Proud Of:

One part I’m particularly proud of is the heart shape formula used in the Heart class. Creating a convincing pulsing heart shape took a bit of trial and error—adjusting the sine and cosine coefficients to get the proportions and curves right. When I looked it up to check my work, I was pleasantly surprised to realize that I had remembered the formula almost perfectly! The code also incorporates time-based pulsing and subtle distortions influenced by the interaction of the two forces:

class Heart {
  constructor(battle) {
    this.battle = battle;
  }

  display() {
    let { t, loveStrength, powerStrength } = this.battle;

    let heartOpacity = map(loveStrength, 0, 1, 10, 90);
    let heartPulse = map(loveStrength, 0, 1, 0.4, 2.5);

    stroke(340, 80, 100, heartOpacity);
    strokeWeight(2 * heartPulse);

    for (let i = 0; i < 3; i++) {
      let s = 100 + sin(t * 2 + i) * 50 * heartPulse; // pulsing size
      beginShape();
      for (let a = 0; a < TWO_PI; a += 0.1) {
        // classic heart shape formula
        let x = s * 16 * pow(sin(a), 3) / 10 + sin(t + i) * 30 * powerStrength;
        let y = -s * (13 * cos(a) - 5 * cos(2 * a) - 2 * cos(3 * a) - cos(4 * a)) / 10
                + cos(t + i) * 30 * powerStrength;
        vertex(x, y);
      }
      endShape(CLOSE);
    }
  }
}

This section highlights the combination of mathematical formula, animation, and interaction to make the heart both accurate and dynamic.

This is a self-portrait created with p5.js, inspired by Picasso’s cubist style. I focused on abstracting key features such as the hair, glasses, beard, and mustache into bold geometric forms and playful colors to emphasize expression over realism.