Author: Darmen Aussarbekov

Don Norman’s ‘The Design of Everyday Things’ touches very important aspect of proper design that is both convenient and understandable to the user. He talks about engineer making clever decisions, but they don’t properly communicate how to use what they have developed and blames all of it on bad design. I fully agree that good design should have signifiers and have a simple conceptual model, so that in user’s head everything connects easily.

What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?
I suppose most of it is done purposefully, but I hate how some website pop-ups hide the dismiss button. It is either tiny, camouflaged, or doesn’t exist. I do usually press top right corner and try to guess it’s location, and sometimes it works, but most of the time I’m redirected to a random website. I believe that such websites prioritize business over user needs, and they are not following the principles of human-centered design. The design intentionally hides the way to escape, and it is a false affordance, and in simple words a trap. Solution is quite simple, but again I don’t think companies want to respect user rights: 1. Create a clear and easy-to-click ‘X’ or ‘Close’ button. 2. Respect user’s initial goal, giving full access to the content they came for, and offer in a smaller window their additional services.

How can you apply some of the author’s principles of design to interactive media?
My friend lent me a book by William Lidwell ‘The Universal Principles of Design’, and I like how author there talks about very specific concepts, and some of the topic from there overlap with Don Norman’s ideas of simple user interface. I think for my future p5js sketches if I’m using preload() function I will be using loading indicator of a spinner to provide a feedback to the user that system is working. Also, when hovering over the button, it will change color slightly also a form of feedback, meaning that the button can be clicked. Overall, I want to create genuine and very simple system that will not confuse the user and at the core of it will be human-centered design.

Concept
As always I just kept on with the concept of doing my assignment related to Dexter. He is part of Miami Metro Homicide division. So, I thought maybe text displaying randomly through .csv file would be a nice integration. A bit delusional, but Dexter would make a report of his killings of other bad people in a Miami Metro Case Files. It would consist of Observation, Target, Method, Justification, and Disposal rows.

Highlight of the code

// Get Observation: Go to the first row (OBSERVATION_ROW), split it, and pick one random part.  

  let observationOptions = split(strings[OBSERVATION_ROW], ',');
  let observation = random(observationOptions);

  let targetOptions = split(strings[TARGET_ROW], ',');
  let target = random(targetOptions);

  let methodOptions = split(strings[METHOD_ROW], ',');
  let method = random(methodOptions);

  let justificationOptions = split(strings[JUSTIFICATION_ROW], ',');
  let justification = random(justificationOptions);

  let disposalOptions = split(strings[DISPOSAL_ROW], ',');
  let disposal = random(disposalOptions);

Assigning each row to values from 0 to 4, using preload() function and this part of the code is the main functionality of the sketch. The code above is essential in order to split and then randomly pick a word from each row in .csv. After, by calling text() function I can easily display the randomly picked words inside the draw() function. One of the things I learnt during the class and implement is noLoop() and inside the mouseClicked() function loop() so that only when clicking the words would shuffle.

Sketch

Reflection
I like that my works are very conceptual in a sense that they follow the same storyline and are logically connected. For example, this one – it is about Dexter Morgan’s life as a blood spatter analyst at Miami Metro PD, so he has to fill out some reports on case files. Randomizing his victims, his way of killing them, justifications is a funny way to learn new concept and at the same time be interested in the work I’m doing. In the future, even though maybe not very connected to this one, I would love to learn how to do something similar to wavy patterns of blood using sin or cos functions, representing the world of Dexter Morgan. I think such patterns could be like an intro animation to the Dexter TV series with beautiful red patterns over white background.

Concept – Inspiration
I want to keep my portfolio for this class associated with Dexter series as long as possible because assignments are not very specific and require some kind of inspiration to make. I thought while I’m passionate about this TV show, why not save myself time and just pursue doing this assignment inspired by it. For this assignment I used OOP, classes, and different mouse functions as I mentioned in my previous post. My inspiration were blood stains on white walls. Dexter was a blood spatter analyst, and he had pictures of some in his office. So, by holding left-click and dragging across the screen user would draw thinner blood lines along the cursor, while when pressing the key, user would draw big chunk of blood in form a circle where cursor is located. Also, by scrolling mouseWheel user would be able to clean the wall from blood using pop().

Highlight of the code

function mouseDragged() {
  if (mouseButton === LEFT) {
    marks.push(new BloodCluster(mouseX, mouseY)); // one cluster per drag
  }
}

function keyPressed() {
  marks.push(new Tomato(mouseX, mouseY));
}

function mouseWheel() {
  if (marks.length > 0) {
    marks.pop(); // remove last (cluster or tomato)
  }
}

(Do not give too much attention to class called ‘Tomato’ it is just for me to navigate throughout the code better). Apart from that, I think this part of the code the crucial rule. it helps with drawing blood lines and bigger blood drops on the wall and cleaning it using mouseWheel(). Generally, I think also using arrays to store blood stains and then applying .pop() was the part of the code that helped a lot to perform next actions. Of course, in order to understand how those functions work, I looked through p5js reference page for keyPressed() and mouseDragged().

Sketch
Initially, I had some issue with class Tomato drawing oscillating circles as blood marks and troubles with cleaning the wall from blood marks in general when using mouseWheel(). But, after storing marks inside the array, applying .pop(), and some clever code arrangement the issues were solved. To be honest, took a lot of time to figure it out.

Reflection
I’m quite fulfilled by the work I’ve done. It definitely followed my initial vision of how I wanted my final result to look like. I like how neat everything looks in code, the organization is very easy to understand. I learned new functions and wise use of arrays to store blood marks using marks = []. In the future, I want to incorporate more mouse functions in my projects to enhance the interactivity of the project like mouseReleased() would also draw some different kind of blood. Also, I would want to make specific type of blood pattern when pressing the key, so blood marks would be kind of the same – more like in real life.

What do you consider to be the characteristics of a strongly interactive system?
After reading Chris Crawford’s chapter on Interactivity, I would strongly agree with what he has to say. It is definitely when both parties (actors as he says) are listening, thinking, and speaking. Otherwise, in more computer terms providing input, processing, and producing output. How would we measure the strength of interactivity of each system? To be honest, as long as it has those three components, I would consider the system interactive. However, whether it is super interactive or less interactive I think depends on person’s perception of what’s is enough interactivity for artwork and what’s not. For example, for me any type solo video-game like ‘Jedi Fallen Order’ is already a peak of interactivity because you control the character, you listen what the game instructs you to do, you think, and game also challenges you too. I feel like making the user think critically and act is an excellent characteristic for strong interactive system.

What ideas do you have for improving the degree of user interaction in your p5 sketches?
The one thing that comes to my mind is how we use mouseX and mouseY commands to make something move along our cursor. Also, new commands introduced by the end of the class using mousePressed, scroll, mouseReleased are too a way to interact in p5js. I would love to incorporate more of such functions in my future sketches to express my feelings and interests.

How are you planning to incorporate random elements into your work?
I think Casey Reas’s presentation of how randomness and control are somehow interconnected in computer generated art is quite on point. There is always an underlying algorithm that has some kind of order it follows in order to generate ‘random’. I remember he quoted Gerhard Richter: “Above all, it’s never blind chance: it’s a chance that is always planned, but also always surprising”. From the works I saw, I really liked the ‘Tissue Work’ because it seems to have lot of order and at the same time a little bit of imprecision, which makes those tiny vehicles draw very intricate lines along their path. I would want to incorporate the same idea of leaving a trace after a movement of certain objects, and have them follow a certain type of order as in the ‘Tissue Work’.

Where do you feel is the optimum balance between total randomness and complete control?
Casey showed us some example of Lia’s works, I want to talk about that. The first one with perfect ordered grid, when it starts to deviate somewhere there is definitely a thin line between pure random and complete control. I believe that finding such optimum balance is hard. I would say Fractal Invaders when you add a bit of symmetry to the randomness is an example of how I can create a balance between the randomness and control. Honestly, I think balance is always something audience likes in the artwork, which makes it more appealing and understandable to them. The perfect balance for me is when on one hand elements start to seemingly move randomly, but at the same time when you add more of such elements they form some kind of a pattern like in the ‘Tissue Work’. Otherwise, as I mentioned before, applying a bit of symmetry to the coin flip based randomness of black and white (referring to Lia’s Fractal Invaders) is also a perfect balance between randomness and control.

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.