Author: Lujain Elmallah

Concept

An Unusual Case is a horror mystery game, inspired by escape rooms, where there are scattered clues around the game in each room, and the user will have to identify them to move on to the next room and solve the mystery. Else, they are forever trapped in the room. The concept aims for the user to both have an engaging and entertaining experience while thinking through the clues and pushing them to think outside the box. Focusing on the player’s problem-solving and creative skills. Clues never give away the answer directly, rather they push the player to apply critical thinking and pattern recognition.

To make the game even more engaging, the themes of the game visual design are darkness and the melancholy which tie in well with the color palette consisting of deep shadows and muted tones. The mood is further curated by the sound effects that go from very quiet background noises to loud and sudden jumpscares, a mix that is intentional to keep players on edge and engaged. This horror aspect is not just for the sake of enticing fear but also to pull the players into the emotional tension of the situation, thus making every choice and revelation feel more powerful. In the end, An Unusual Case has the ambition to be a combination of mental challenge, appealing story, and spooky atmosphere, giving players a very deep and engaging experience.

Code Snippet

draw() {
    // Perspective scaling for hallway
    let scaleFactor = 200 / wallDist;
    let w = wallSize * scaleFactor;
    let h = wallSize * scaleFactor;

    let cx = width / 2;
    let cy = height / 2;
    let left = cx - w / 2, right = cx + w / 2, top = cy - h / 2, bottom = cy + h / 2;

    // Draw hallway walls
    fill(20, 0, 0); noStroke();
    quad(0, 0, left, top, left, bottom, 0, height);
    quad(width, 0, right, top, right, bottom, width, height);

    // Fog effect
    this.fogAlpha = 40 + 20 * sin(millis() * 0.005);
    fill(0, 0, 0, this.fogAlpha);
    rect(width / 2, height / 2, width, height);

    // Door setup and glow animation
    let doorWfull = w / 3, doorH = h / 1.5;
    let doorX = cx, doorY = bottom - doorH / 2;
    doorBounds = { x: doorX, y: doorY, w: doorWfull, h: doorH };

    if (!doorOpen) {
        let elapsed = millis() - this.lastGlow;
        if (elapsed < 3000) this.glowAlpha = 60 + 40 * sin((elapsed / 3000) * TWO_PI);
        for (let i = 1; i <= 3; i++) {
            fill(255, 0, 0, this.glowAlpha / (i * 1.5));
            rect(doorX, doorY, doorWfull + i * 12, doorH + i * 12, 8);
        }
    }

    // Door animation and jumpscare trigger
    if (doorAnim > 0.01 && !this.jumpscareTriggered && doorAnim > 0.4) this.triggerJumpscare();

    // Player movement and sound
    let moved = false;
    if (moveForward) { wallDist = max(50, wallDist - 2); moved = true; }
    if (moveBackward) { wallDist = min(800, wallDist + 2); moved = true; }
    if (moved && !footsteps.isPlaying()) footsteps.loop();
    else if (!moved) footsteps.stop();
}

Embedded Sketch 

Game Design
The game is designed in such a way that the main elements are separated into classes where the game and the environment are organized at the same time. The Hallway class is the one in charge of rendering a perspective corridor for the main exploration area and controlling the movements of the players. Animations of the doors, glowing effects, jumpscare triggers, and other events are all part of the Hallway class’s responsibilities.

Concept

For my midterm project I have decided to create an adventure mystery game where the user is taken through an interactive journey where they make decisions based on clues provided to them. The game has different paths with different possible endings, giving the user control over the narrative of the story. With the starting point being in a long hallway where they will receive their first clue before entering the room, with the use of signifiers and feedback to lead the user where they need to be. Once the door is opened they are in the first room where they are supposed to make the first choice that decides which path they will be taking. Through this project I hope to bring together everything we’ve learnt so far technically and conceptually to bring the project to life and make it as engaging and interesting as possible.

Code Design

Character.js:
Represents a simple character with a body and head that can be drawn anywhere.

Hallway.js:
Draws the hallway, handles wall scaling, door animation, and hallway character.

Room.js:
Draws the rooms (intro, basement, office) and manages buttons and room characters.

Sketch.js:
Main controller that sets up p5.js, loads assets, switches between hallway and rooms, and handles input.

Current Progress

I have created an outline of the starting path of the game, particular the hallway and introductory room where the user makes their first choice. As well as a rough outline of what the first two rooms will be like. For the hallway I have integrated sound effects and a little walking and door opening animation to create an environment that draws the user in as soon as they start the game.

Challenges

Reflections

Working on the rough outline of what I want my project to look like and creating a skeleton for my code was very beneficial in learning what is the right way to approach this project. I now have a cleared idea of the path I’d like to take with this work and what I want to focus on. My first next step would be focusing on the narrative and the different storytelling elements that I will be integrating to guide the user. I feel like I need to focus on creating a path that is easy to follow and come up with reasonable signifiers.

Our vision as people comes with a few prerequisites for creating a clear image in our mind, for example an object needs to be close enough with lighting that is sufficient for us to identify what it is. Computer vision is differentiated to our vision with the existence of a larger set of these prerequisites, the conditions need to be tuned to the abilities of the algorithm in place for accurate identification. With each system built for different purposes needing different unique conditions and pre-existing information to complete its purpose, while our vision is able to cover all ends such as motion detection and object detection without the need for different conditions. Which is why it might be a difficult task to integrate computer vision into interactive media, it is not only about picking the right system and mechanism, you need to set up the right circumstances for the system to successfully bring your vision to life.

However, even with the complication that come with it, the use of computer vision opens up a new realm of possibilities for interactive art. It takes the ability to interact with a user to another level with the possibility of now tracking tracking the movement of the user adding another layer to the ways the art can ‘listen, think and speak’ to the participant. This is especially true due to the increased accessibility to open source code and the technologies needed to navigate the world of computer vision, it is now easier than ever to utilize such technologies to explore themes more in depth. Though, this does raise the question that many of the works mentioned in the article tackle, which is surveillance. These technologies provide interactive art pieces with eyes, they are now partaking in the observing and tracking process of the work. This is more of a concern when it comes to those works installed in public spaces where the technology is used to detect the movement of people who did not choose to be part of the work. Which is why it is important to approach the use of such technologies with care to make the most of them in stepping up the level of interactivity in art works.

Intuition guides our everyday lives, most applications and devices that we run into in different situations are ones we are not familiar with, yet we are able to interact with them and intuitively figure out how to utilize them. This can be attributed to unspoken rules that we have gotten used to over the years a button is to be pushed, and a knob is to be turned. These are affordances derived from our intuition and guided by signifiers and feedback to design devices usable by everyone. An interaction that I would say drives me crazy, due to it’s lack of all that is aforementioned would be trying to find my way around in the public transportation of some locations, especially underground trains where there are not enough signs signifying which train is coming or which platform to take. Often the maps are even cluttered or outdated making it even harder to wayfind my way around. This lack of clear signifiers and feedback makes it difficult to form a reliable mental model of the system, making it impossible to wayfind intuitively without searching things up or asking someone else around you.

When it comes to interactive media, this did open my eyes to the lack of intuition or clear instructions and signifiers to how to use my system and navigate my work so far. Most of the them depend on the user having previously provided knowledge through reading the concept or speaking to me. For example, this week my project has an interaction where the user can switch a book through clicking it, which can only be found by chance by clicking the books if not having read the concept. However, the switching of the book could count as feedback clarifying that the action of clicking does make a change. Moving forward I’d like to make my work more intuitive to interact with where the user is able to identify the purpose and the next move upon coming across a piece of mine. I’m looking to explore the possibility of strong signifiers through visual cues or micro-interactions that lead the user naturally without their having to be told beforehand. Such cues would create a seamless and engaging experience for users where they are able to independently go out and play and interact with the system. At the end of the day, the works we are creating are very user-focused most of the time and keeping their perspective in mind might be more important than in most other art forms.

Concept

Through this work I wanted to create a virtual library where a dataset of books is visualized in a dynamic way. I explored the possible datasets in search of one that includes the genre of every book, then integrated that into the visualization with every genre having it’s respective color that represents them to have a more effective format that reveals more about a book. To accomodate a larger number of books in the dimensions of the work, it is interactive with the user pressing each book switches it out to another book, converting the title, author and color to convey the details of the new selected book. The screen displays nine books at a time not to overwhelm the use with too many books and not to have too few to not exclude too many books. The main plan here is to create an interactive and engaging visualization of a dataset of books to help a user explore the dataset for recommendations or to discover the range of books available.

Highlight Code

wrapText(txt, cx, cy, maxW, maxH) {
  let words = txt.split(" "); //split text into words
  let lines = [""]; //initialize lines array

  //build lines until they exceed width
  for (let w of words) {
    let test = lines[lines.length - 1] + (lines[lines.length - 1] ? " " : "") + w; //add word to current line
    if (textWidth(test) <= maxW) lines[lines.length - 1] = test; //fits line, add it
    else lines.push(w); //doesn't fit, start new line
  }

  //limit lines to available height
  let lineH = textAscent() + textDescent(); //line height
  let maxLines = floor(maxH / lineH); //max number of lines
  if (lines.length > maxLines) {
    lines = lines.slice(0, maxLines); 
    lines[maxLines - 1] += "..."; //truncate last line with ellipsis
  }

  //draw centered vertically
  let startY = cy - ((lines.length - 1) * lineH) / 2; //calculate starting y position
  for (let i = 0; i < lines.length; i++) {
    text(lines[i], cx, startY + i * lineH); //draw each line
  }
}

I’m most proud of the wrapText function within the book class, due to it’s ability solve a formatting problem that I faced with the lengthy book titles not fitting into the small allocated space on the book. It tokenizes the input string, by separating each word detected with a space between them then builds lines that respect the maximum width. For the titles that were too long to fit into the book I tried to using smaller font at the start but it was too difficult to read the lines in that case. So I decided to replace words that do not fit with an ellipsis if it exceeds the height to avoid having to use a smaller unreadable font size. This helped me ensure that all the titles fit into the book cover and are visually coherent and uniform.

Embedded Sketch 

Reflection 

Through this assignment I’d say I learnt a lot on data visualization and how to accommodate a large amount of data that comes in with it’s own attributes, like different lengths and format of sentences in the book titles. This taught me how to alter code to accommodate rather than smaller set of data determined by me to a larger more diverse set. Which also taught me the importance of dynamic code that is able to adapt to different inputs. For further assignments and projects I’d like to take lessons I learnt from completing this assignment and integrating them with more interactivity and storytelling so there is a more dynamic path to take rather than the current one where there is only one aspect that could be changed by the user interacting with it.

For a long time creating art was a linear process, with a clear beginning and end points, they were made to be viewed and attract reactions from their target audience. This was until we introduced interactivity into works, since then many have adopted a more ‘cyclic’ approach where the beginning is set in stone and the journey to end is more adaptive and influenced by the viewer. But what is that interactivity that is capable of affecting the path of a work that much? Crawford defines true interactivity as not merely participation or response but as an endless, two-way cycle of listening, thinking, and speaking by both the user and the system. Both sides must look, process, and respond, influencing each other in some manner. Without this exchange, even if there is a significant input from the audience, the experience remains linear at its very core.

Now that I look back, I realize that creating interactive art is not just having buttons, choices, or answers, I realized that it’s about creating a system where it can actually respond to the user and have the user’s actions change the experience. The challenge is to do that two-way effect without breaking the cohesiveness of the story or the aesthetic, similar to the challenge that was discussed last reading about randomness.  Balancing things such as interactivity and randomness while maintaining a logical flow that the user can follow is quiet a difficult task. To me, this idea holds possibility for my own work, the user is not anymore a passive receiver but an active participant whose decisions and actions construct a unique experience each time. After reading the text, in my future works I’d like to now create a conversation between the user and the works where they both respond to each other’s cues creating a work that it truly interactive.

Concept & Inspiration

When I first started working on this project, the Wi-Fi didn’t work and I was welcomed with the familiar Google Dinosaur game on my screen that appears when there is no connection. That simple little dinosaur planted the idea in my mind for a playful take, a prisoner committing an escape through a pixelated desert. The prisoner is guided by the player as he jumps over cacti with rolling tumbleweeds in the background adding to the atmosphere as he attempts to outrun the inevitable collision that make the game end. I aimed to add some gamification to the work, so it is interactive in a way that directly affects the narrative, the user decides whether the prisoner escapes or not. The desert is dramatized with gradient skies giving it depth and atmosphere without breaking up gameplay. To make the character interesting and match the aesthetic of the original game, I added a pixelated body, clothing, and even simple facial features, so every dodge and every jump feels dynamic and personal. In retrospect on the project, I enjoyed taking a fundamental, well-known mechanic and making it something more story-based and visual. My objective was to make the user more in control of the narrative compared to my previous work, making each playthrough a lighthearted and engaging choice-based experience.

Code that I am Proud of

display() {
    rectMode(CENTER);
    noStroke();

    //Legs
    fill(255, 120, 0);
    rect(this.x - 10, this.y - this.legHeight / 2, this.legWidth, this.legHeight); //left leg
    rect(this.x + 10, this.y - this.legHeight / 2, this.legWidth, this.legHeight); //right leg

    //Feet
    fill(0);
    rect(this.x - 10, this.y, this.legWidth + 2, 5); //left foot
    rect(this.x + 10, this.y, this.legWidth + 2, 5); //right foot

    //Body (torso)
    fill(255, 120, 0);
    rect(this.x, this.y - this.legHeight - this.bodyHeight / 2, this.bodyWidth, this.bodyHeight); //torso

    //Arms
    fill(255, 120, 0);
    rect(this.x - this.bodyWidth / 2 - this.armWidth / 2, this.y - this.legHeight - this.bodyHeight / 2, this.armWidth, this.armHeight); //left arm
    rect(this.x + this.bodyWidth / 2 + this.armWidth / 2, this.y - this.legHeight - this.bodyHeight / 2, this.armWidth, this.armHeight); //right arm

    //Head
    fill(255, 220, 180);
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 15, 20, 20); //pixel head

    //Prisoner beanie
    fill(255, 140, 0);
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 25, 20, 8);//beanie band
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 30, 16, 5);//top of beanie

    //Facial features
    fill(0); //eyes
    rect(this.x - 5, this.y - this.legHeight - this.bodyHeight - 20, 3, 3); //left eye
    rect(this.x + 5, this.y - this.legHeight - this.bodyHeight - 20, 3, 3); //right eye

    fill(150, 0, 0); //mouth
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 10, 6, 2); //simple mouth
  }
}

With a goal of focusing more on the artistic and creative aspects of this assignment, I’d say I am most proud of the design of the prisoner for the game. I wanted to go for a more pixilated look to match the aesthetic of the original game and gave the design of the prisoner a lot of focus. I am proud of this code merging visual creativity with functional interactivity, the arms, legs, beanie, facial features were all carefully positioned to give personality, while integrating the goal look of the character. Through this code I learnt the importance of the visuals in determining the feel of the game.

Embedded Sketch

Reflection

The main challenge I ran into while creating this game I’d say was balancing the focus on visual design as well as on the functional side of the work. For example, designing the prisoner to be pixelated yet still have recognizable features required careful positioning. So I had to constantly test and adjust the sizes so that the character didn’t interfere with collision detection. However, at the same time it was a learning experience where I went more in depth into the possibilities that come with this program. Next time I’d like to focus more on creating a more detailed visual world where more elements are integrated to create an immersive work.

Randomness in computer art is integrating a level of unpredictability into a work, creating a piece that is ever changing and transforming. Casey Reas’ presentation on introducing randomness to creative coding pieces, opened my eyes to the value such an approach can add to a work. Coding can seem like a rigid mechanical process that is deprived of nature, however, with an added touch of randomness we can emulate the natural phenomenon of chance. One of the things that one would notice if they observed their surroundings is the existence of chance and randomness everywhere. You can never predict when you’ll bump into a childhood friends years later or when a leaf will fall off a tree as you pass by it. These uncertainties that we face in our everyday life are what define our everyday experiences, they are not mechanical and precise. Bringing that same sense of unpredictability into our code to some extent gives a piece life, where the viewer cannot tell what the work’s next move will be.

Randomness comes with  countless merits, but it does raise the question of where do we draw the line. How much randomness before we define a piece as chaos? Reas’ claim that a strong foundational code that randomness is to be built on is essential and is a factor that I do believe is important to integrate into works, though I do also believe that relying on chance to a larger extent is not creating disorder and taking away from the work’s value. Chaos and spectacle have always been an essential part of art, and an integration of randomness to the extent that it leaves the viewer confused to me is not necessarily a bad thing. It could leave the audience with an overwhelming feeling, which is a chance to explore a certain intersection of art where appreciation and discomfort come together. Digital and algorithmic art is a relatively new practice, and shying away from too much randomness in fear of chaos might hold us back from exploring this type of art to it’s full potential. In some cases foregoing the foundational code that the randomness is built on could result in intriguing work. Art is about experimentation and risk and unless we let go of order we will never reach an understanding of what that really means.

Portrait Concept

For my self-portrait, I decided to create a cartoon-esque representation of myself, with a background that evokes the feeling of entering another world in the viewer. The expanding circles in the background represent a portal, implying that the portrait is a view into another world. Aiming to give a sense of exploration, I wanted to add layers of interaction where the eyes follow the viewer’s cursor. The wandering of the eyes with the viewer are there to represent the curiosity of the character as they enter another world exploring their surroundings along with the viewer’s cursor. Combining the concept of dimensional portals, exaggerated cartoon features, and interactivity expresses my interest in making a portrait that feels alive and dynamic. The work aims to combine a static drawing with an experience where viewer becomes part of the artwork with their movement.

Code that I am Proud of  

//necklace
  fill('white');
  let necklace = [
    [210, 415], [220, 425], [230, 434], [245, 437],
    [260, 437], [275, 437], [289, 428], [294, 415]
  ];
  for (let bead of necklace) circle(bead[0], bead[1], 10);

  fill(125, mouseX, mouseY);
  let innerBeads = [
    [215, 420], [225, 430], [237, 437], [253, 437],
    [267, 437], [283, 434], [292, 423]
  ];
  for (let bead of innerBeads) circle(bead[0], bead[1], 10);

One of my priorities while coding is to keep my code clear and concise, as it ensures that later if there are any edits to be made I can easily identify the exact area that I need to modify and edit it with ease. While creating the circles for the necklace at the start I was creating one by one using the circle() function, which was taking a lot of time and was starting to look pretty repetitive, especially with all of them sharing the same size. At the start I decided to create a size variable to avoid having to change the size in every line if I wanted to change it. But then I realized that I was still repeating the circle() function, so I decided to create an array of the coordinates of each bead and creating a loop to place a circle in each of them. The resulting code was what I am particularly proud of off due to its efficiency and clarity.

Self-Portrait

Reflection

As my focus for this assignment was to get comfortable with the use of code for the purpose of drawing, I spent majority of my time experimenting with functions and made different stylistic choices without focusing too much on the concept and the story behind the work. For future assignments and projects I’d like to look into how to use the code to deliver a message or a story, which in turn would lead to me adding more interactivity and complexity to the piece as there would be a more clear path I am following while working. In particularly, I’d like to focus on adding an element of animation to a piece to give it life and create a more engaging feel to it.