Author: Darmen

Concept
I am continuing the story of Dexter. I tried to incorporate as many things as we learned this week, including for loops, width/2, the mouseIsPressed function, and oscillations using the random function. What the audience sees is unstable because the varying sizes of circles are constantly changing, representing chaos when Dexter Morgan is not himself but is controlled by his inner devil, which he calls the Dark Passenger. The blood slide at the top represents him in this state, showing that he is currently in Bay Harbor Butcher mode. The frameRate is set higher to emphasize how stressed and uncontrollable he is at this point.

By pressing the button, the audience sees calm Dexter Morgan, an ordinary husband with golden wings that symbolize how kind and loving he actually is in real life when the Dark Passenger is absent. He appears more stable, with the random function set to produce smaller differences in circle sizes, and the frameRate is lower to represent that. White represents his good nature, while red represents his killings and dark side..

Highlight of the code I am proud of

if (mouseIsPressed) {
      frameRate(5);
      if(mouseX <= width/2){
      textSize(32);
      fill('rgb(255,255,255)');
      stroke(0);
      text('Dexter Morgan', mouseX, mouseY);
    }
      for (let x = 0; x <= width-460; x += 50) {
        for (let y = 100; y <= height-100; y += 50) {
      fill ('gold');
      randomNumber = random(30, 40);
      rect(x, y, randomNumber);

else {
    frameRate(30);
    if(mouseX <= width/2){
      textSize(32);
      fill('red');
      stroke(0);
      text('Bay Harbor Butcher', mouseX, mouseY);
    }
  // blood
    fill(255, 255, 255, 90);
    rect(225,10,150,80);
    fill('#AC153A');
    circle(300,50,50);
    
    for (let x = 120; x <= width-120; x += 50) {
      for (let y = 350; y <= height; y += 50) {
    fill ('red');
    randomNumber = random(40, 80);
    circle(x, y, randomNumber);}}

I would say I made good use of if and else statements. I wanted the user to press a button to see Dexter’s good side, and when not pressing anything, they would see his dark side. By adding an if (mouseIsPressed) statement along with an else, I was able to make my concept work. Otherwise, I didn’t use else statement, initially, and only had if mouseIsPressed. So, those to visualizations of white & gold overlapped with red.

Sketch

Reflection
I believe Dexter’s unstable character could be developed further. For example, I’d like to incorporate another mouseIsPressed command into his evil character, so that when pressing more, the circles’ oscillations would become faster and grow larger and larger. However, to achieve this, I need to make sure that two mouseIsPressed commands don’t overlap, so I need to come up with a creative solution.

Introduction to the Portrait

Last summer, I watched Dexter (the TV series), which has multiple seasons and sequels. I really enjoyed it, and it inspired me to create a portrait of the main character. I opened a picture of Dexter on my computer and worked on the portrait in p5.js on my MacBook while I was in the library. Since I already have some background in HTML, CSS, and JavaScript, I didn’t struggle much while making it.

A quick introduction to the character: he is a serial killer who targets other serial killers, following his own moral code. His ritual involves keeping trophies from his victims, specifically by collecting blood slides after cutting their faces. In my portrait, the rotating element around him represents those blood slides, one of his signature trophies.

Code that I liked

fill(255, 255, 255, 90)
translate(300,300)
let angle = frameCount * 0.01;
rotate(angle);
noStroke()
rect(225,10,150,80)

fill('#AC153A')
circle(300,50,50)

I really like how I managed to create certain details. For example, when I wanted arcs for the eyebrows or around the ears, I achieved them by covering parts of ellipses with skin coloured shapes. I used the same method for the mouth, ears, and eyebrows. That I think involves a lot of logic. More importantly, I applied some techniques I learned from a tutorial to make the blood slides rotate around Dexter, which I thought was a great touch. So, the code above showcases rotation of the blood sample based on the frameCount. By increasing the constant, the blood sample would rotate even faster.

Reflection

For improvements: I’d like to add more interactivity and animation in the future. For example, animating blood actually dripping down his face would be a really cool effect. I could also add knife animations circling around him. Since I’m so invested in the show, I like to think of this piece almost as a self-portrait of my interests and feelings at the moment of doing this assignment. It feels very personal and entertaining to me, even if that sounds a bit delusional. For future projects, I definitely want to experiment with WEBGL to explore a 3D space. That way, I could even create a full 3D knife kit for Dexter, or add other extra details.