Week4_Artwork

Concept

My inspiration for this piece came from the Joker. I wanted to take a twist from his personality, that mix of humor and fear where you never know what he’s going to do next, and put it into an artwork. At first I wanted to draw him and have his iconic HAHA laugh be the center of the piece. Then I changed my mind and turned it into a question-and-answer mystery. The piece looks calm and professional at first, with a clean box that says “ASK ME ANYTHING… if you dare.” The moment you ask something, the input disappears, the screen flickers, and a creepy grin with glowing red eyes takes over, laughing that it’s not answering anything. I wanted it to catch people by surprise, because they expect an answer and instead get laughed at, which is exactly the kind of trick the Joker would pull.

Code I am proud of

let t = frameCount - start;
  if (t < 70) drawAsk("Hmm... let me think...");
  else if (t < 100) random() < 0.4 ? background(0) : drawAsk("..."); 
    // flicker
  else drawScary(t);

When the user asks a question, I save the frame it happened on. By subtracting that from the current frame, I always know how long it’s been. First it pretends to think, then it glitches between the box and a black screen, and then the scary face takes over. It’s only a few lines, but it builds the whole suspense of the piece. I also like that the input box hides itself with input.hide(). The user can’t type anymore, which makes it feel like the program has taken control away from them.

How this was made

I made this in the p5.js web editor using JavaScript, and the sketch is split into a few functions that each do one job. In setup(), I create the canvas and build the text box and ASK button with createInput() and createButton(). I styled both with .style() so they match the black and red theme. The ask() function runs when the user presses Enter or clicks ASK. It checks that the box isn’t empty, saves the current frameCount as the start time, switches the mode from “ask” to “scary”, and hides the input and button so the user can’t type anymore.

The draw() function uses that saved start time to move through the stages. For the first 70 frames it shows “Hmm… let me think…”, then it flickers randomly between the box and a black screen, and after that it switches to the scary scene. After a few seconds it resets and shows the input again. The drawAsk() function draws the title and the rectangle and makes the message type out letter by letter. It does this by increasing a counter each frame and using substring() to show only part of the text. Finally, drawScary() draws the glowing red eyes with ellipse() and the jagged grin with a loop of vertices using sin() to curve it. It also shakes the whole screen with translate() and random values and fades everything in by raising the transparency over time.

Reflection

This project connected a lot to the Don Norman reading. I used signifiers on purpose, like the placeholder “Type your question…” and the ASK button, so the user knows exactly what to do. Then I broke the feedback they expect, because instead of an answer, they get laughed at. It made me realize that knowing the rules of good design also lets you break them on purpose to create a feeling, in this case fear and surprise. If I had more time, I would add sound, like an actual laugh playing when the face appears, and make the grin animate so it slowly stretches wider. I’d also like the face to react differently depending on what the user typed, so the piece feels more alive and personal.

Leave a Reply