Author: Ruslan Bashokov

Exercise 1:

let circleX;

function setup() {
    createCanvas(500, 500);
    noFill();
}

function draw() {
    background('white');
    if (!serialActive) {
        console.log('ARDUINO IS NOT CONNECTED'); //output to check if Arduino connected or not
    }
  
    if (serialActive) {
        fill('violet')
        ellipse(map(circleX, 0, 1023, 0, width), height / 2, 100, 100); // using map to make the circle move
        console.log(circleX) //output position to check
    }
}

function keyPressed() {
    if (key == " ")
        setUpSerial();
}

function readSerial(data) {
    if (data != null) //
        circleX = int(data);
}            
 


// ARDUINO CODE

/* 


void setup() {
    Serial.begin(9600);
    pinMode(A0, INPUT);
}

void loop() {
    Serial.println(analogRead(A0));
    delay(5);
}
 
*/

 

Exercise 2:

let brightnessLVL = 0;

function setup() {
    createCanvas(500, 500);
}

function draw() {
    if (!serialActive) {
        console.log('ARDUINO IS NOT CONNECTED')
    }
  
    if (keyIsDown(UP_ARROW)) { 
      brightnessLVL += 1; 
    } 
    
    else if (keyIsDown(DOWN_ARROW) && brightnessLVL > 0) {
      brightnessLVL -= 1;
    }
    
    console.log(brightnessLVL)
}

function keyPressed() {
    if (key == " ")
        setUpSerial(); // Start the serial connection
}

function readSerial(data) {
    writeSerial(brightnessLVL);
}
 

// ARDUINO CODE

/*
 
void setup() {
    Serial.begin(9600);
    pinMode(10, OUTPUT);
}

void loop() {
    analogWrite(10, Serial.parseInt());
    Serial.println();
    delay(1);
}
 
*/

 

Exercise 3:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let checkBounce;
let outputBounce;

function setup() {
  createCanvas(640, 360);
  noFill();
  position = createVector(width/2, 0);
  velocity = createVector(0,0);
  acceleration = createVector(0,0);
  gravity = createVector(0, 0.5*mass);
  wind = createVector(0,0);
}

function draw() {
  background(255);
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  ellipse(position.x,position.y,mass,mass);
    
  if (!serialActive) {
        console.log('ARDUINO IS NOT CONNECTED')
        fill('red')
    }
  
  if (serialActive) {
    textAlign(CENTER, TOP);
    textSize(24); 
    fill('green'); 
    text('ARDUINO IS CONNECTED', width / 2, 10);
}
  
  if (position.y > height-mass/2) {
      checkBounce = 1;
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
      }
  else {
      checkBounce = 0;
  }
}

function applyForce(force){
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

function keyPressed(){
  if (key==' '){
    mass=random(15,80);
    position.y=-mass;
    velocity.mult(0);
  }
    
  if (key == "h") {
    setUpSerial();
  }
}

function readSerial(data) {
    if (data != null) {
        wind.x = map(int(data), 0, 1023, -2, 2);
        
        let sendToArduino = checkBounce + '\n';
        writeSerial(sendToArduino);
    }
}

// ARDUINO CODE

/* 

 
const int LED_PIN = 10;
const int POT_PIN = A0;

void setup() {
    Serial.begin(9600);
    pinMode(LED_PIN, OUTPUT);
    pinMode(POT_PIN, INPUT);

    while (Serial.available() <= 0) {
        Serial.println("0");
        delay(300);
    }
}

void loop() {
    while (Serial.available()) {
        int LEDtrigger = Serial.parseInt();
        
        if (Serial.read() == '\n') {
            digitalWrite(LED_PIN, LEDtrigger);
            Serial.println(analogRead(POT_PIN));
        }
    }
}
 
*/

 

As technologies rapidly develop in our world, more and more disabilities can be treated to help each disabled person live a normal life without limitations. However, those technologies are often treated by disabled people as “embarrassing” because they explicitly state the disability and show it to society. Disabled people are often treated differently in society. They are treated as “sick” people and are often shown compassion and willingness to help, which is good and ethically right, but some of them do not wish to be treated that way. Some of them do not want to be pitied. This is exactly why I found “Design meets disability” a very interesting reading and enjoyed looking at the author’s perspective on this matter. I really liked the description of how glasses transformed into a stylish accessory from the plain medical device. It is a quite remarkable achievement – transformation into the essential object of fashion, and of course, for other devices created for people with disabilities it would be ideal to do the same. However, I think that it is still hard to achieve.

First of all, the glasses is a small object that can does not substitute the human body but rather complements it. This is why it can be called an accessory – it is something people add on as an extra element of their outfit. Sunglasses, for example, are worn even by people who have a perfect vision, simply because to looks good on them. The optimal goal for other devices should be exactly the same – to look more as a complementary object and less as an artificial substitute. The scientific progress pushes forward this idea, and the artificial arms and legs are now looking more and more “human”, which positively contributes to the perception by other people. Yes, the idea of embracing these artificial devices by plugging them into the fashion described by author (e.g. Aimee Mullins) contributes positively as well, but I believe that this is a temporary step to treat people with disabilities equally and decrease their level of feeling uncomfortable in the society rather than the ideal solution. The ideal solution would be to build the artificial arm to look the same as the normal arm. Giving an example, let’s refer to the Star Wars movies:

The first prosthesis belongs to Luke Skywalker and reflects the technological advancements for the period between the prequel movies and the original trilogy. The second prosthesis belongs to Luke’s father, Anakin Skywalker. Obviously, the first looks much better than the second one. (By the way, Anakin wore the glove to cover his mechanical arm).

Overall, the technological inventions in the field of protheses are very important to make the people with disabilities all around the world feel included and equal to other members of society. As of now, while we are waiting for future advancements, it is a great idea to try to use them as elements of fashion just like the author suggested.

Concept 

In this assignment, I collaborated with @Nelson and we both love Christmas. The famous song Jingle Bells brings memories of the the times. So we explored various possibilities and decided to come up with speed variation of the Jingle Bells melody with respect to distance.

Here is the demonstration Video:

Schematic 

Here is the Schematic  for our Arduino connections:

Code:

In the implementation of our our idea, we searched for possible combinations of the notes and durations to match the Jingle Bells melody and stored them in an array. We then implemented the code mapping distance with durations. The variations in durations for each note make it seem playing faster or slower. Here is the code:

#include "pitches.h"
#define ARRAY_LENGTH(array) (sizeof(array) / sizeof(array[0]))

// Notes and Durations to match the Jingle Bells 
int JingleBells[] = 
{
  NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_G4,
  NOTE_C4, NOTE_D4, NOTE_E4, NOTE_F4, NOTE_F4, NOTE_F4, NOTE_F4, NOTE_F4,
  NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_D4, NOTE_D4, NOTE_E4,
  NOTE_D4, NOTE_G4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_G4,
  NOTE_C4, NOTE_D4, NOTE_E4, NOTE_F4, NOTE_F4, NOTE_F4, NOTE_F4, NOTE_F4,
  NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_E4, NOTE_D4, NOTE_D4, NOTE_E4,
  NOTE_D4, NOTE_G4,
};

int JingleBellsDurations[] = {
  4, 4, 4, 4, 4, 4, 4, 4,
  4, 4, 4, 4, 4, 4, 4, 4,
  4, 4, 4, 4, 4, 4, 4, 4,
  4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
  4, 4, 4, 4, 4, 4, 4, 4,
  4, 4, 4, 4, 4, 4, 4, 4,
  4, 4
};

const int echoPin = 7;
const int trigPin = 8;;
const int Speaker1 = 2;
const int Speaker2 = 3;
int volume;

void setup() 
{
// Initialize serial communication:
  Serial.begin(9600);
  pinMode(echoPin, INPUT);
  pinMode(trigPin, OUTPUT);
  pinMode(Speaker1,OUTPUT);
}

void loop() 
{
  long duration,Distance;
  
// Distance Sensor reading
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(5);
  digitalWrite(trigPin, LOW);
  duration = pulseIn(echoPin, HIGH);
  Distance = microsecondsToCentimeters(duration);

// Map Distance to volume range (0 to 255)
  volume = map(Distance, 0, 100, 0, 255);  
  volume = constrain(volume, 0, 255); 

// Play melody with adjusted volume


 playMelody(Speaker1 , JingleBells, JingleBellsDurations, ARRAY_LENGTH(JingleBells), volume);
  
// Debug output to Serial Monitor
  Serial.print("Distance: ");
  Serial.print(Distance);
  Serial.print("    Volume: ");
  Serial.print(volume);
  Serial.println();
}
// Get Centimeters from microseconds of Sensor
long microsecondsToCentimeters(long microseconds) 
{
  return microseconds / 29 / 2;
}
// PlayMelody function to accept volume and adjust note duration
void playMelody(int pin, int notes[], int durations[], int length, int volume) 
{
  for (int i = 0; i < length; i++) 
  {
// Adjust the note Duration based on the volume
    int noteDuration = (1000 / durations[i]) * (volume / 255.0);  

// Play the note with adjusted Durations
    tone(pin, notes[i], noteDuration);
// Delay to separate the notes
    delay(noteDuration * 1.3);  
    noTone(pin); 
  }
}

Reflection

This week’s assignment was especially interesting because we had a chance to collaborate on the project and combine our imagination and skills to create something original. I really enjoyed working with @Nelson. We worked great as a team by first coming up with an idea and then adjusting the concept to choose the ideal balance between randomness and something ordinary to achieve the final result.

I believe that this project has a lot of potential for future improvements, and perhaps I will use some parts of this week’s assignment for my future ideas and projects. Looking forward to the next weeks of the course!

I really enjoyed reading this article and the Q&A based on it. Watching the video from Microsoft, reminded me of watching the Iron Man movie when I was a kid. The moments of Tony Stark working on armor using super advanced 3D technologies always impressed me, and I imagined how, perhaps, I could do the same when I grew up. It is quite common to see widely published fiction movies, books, articles, etc. as an inspiration for future technologies. The other day I was watching the video of how some things depicted by authors or artists in the previous centuries were actually implemented in real life. Moreover, many of them are used every single day – take a plane, for example. At the same time, other products of our predecessors’ imagination have not yet been feasible. Time machines, teleports, and other stuff that we often consider out of our current range of scientific skills. I made this long introductory statement to come to the idea that not all the things that we foresee and, in many cases, ‘make up’ based on our perception of what could happen in the future, actually become true.

Going back to the video from Microsoft and the article by Bret Victor on it, I, personally, mostly agree with the main statements made by the author. First, while I would be highly impressed if one showed me this video when I was 10 years old, watching from the current perspective of the experienced technology user, I can surely say I would not like to live in such a world. I feel that it is incredibly over-interactive. Excess of a technology can often hurt the technology, and this is exactly the case. As Bret Victor mentioned, we already spend too much time using electronic devices (btw his article was published in 2011, and now we use gadgets much much more). If we create the whole world around us based on augmented reality, it will mess up our initial perception of life, as how I see it. I am currently kind of skeptical about augmented reality as a whole, but who knows, maybe in 20 years I will change my mind. Anyway, I resonate with the author on the part that the future described in the video is pretty far from ideal. We should not abandon our core activities and ‘natural’ interactions. Otherwise, it will not only distort our lifestyle but also, as scientifically proven, will make our brains less developed.

The only remark I would make is that as of now, I feel like neither voice control nor, as I have mentioned above, augmented reality can be perceived as an adequate substitute for the fingers and mouse control. Yes, thinking about the future of interactive technologies being solely dependent on our finger clicking and primitive hand movements is quite sad, but I guess we got so used to them that any quick transition would be extremely difficult and inconvenient. At the same time, innovations are happening extremely fast, and who knows, maybe a couple of decades from now we will adopt another method and will be using it every 5-10 minutes of our lives as we do with our phones.

Physical Computing’s Greatest Hits (and misses)

I really liked the idea that you should not give up on your idea, even if it was already implemented. Instead, if you actually have thoughts on how this particular idea can be improved, it is definitely worth trying to implement it. We are all different in our own ways, so one can come up with something new that the other people did not even think about. There is always room for uniqueness, and if we will stop thinking about something that was done by other people, and rather focus on our imagination and unconventional perspective, we can achieve extraordinary things. This applies not only to the art field but also to life in general.

Other than the author’s idea, I quite enjoyed reading about the examples that he gave. I have seen or at least thought of many of the devices that are mentioned, but I am 100% sure that each of them can be enhanced in one way or another. Looking through some of them in particular, I noticed how people’s imagination can turn into something interesting and original. Some of the works that I liked the most are Troll Mirror and Hourglass Mirror by Daniel Rozin.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

I fully agree with the author’s ideas in this reading. First of all, I really liked the line drawn between interactive artwork and ‘conventional’ art like sculpture and painting. It brings me back to the previous readings about interactivity and what is important to keep in mind while designing it. A user should be able to intuitively catch the idea of what to do without explanations needed. Secondly, I liked the comparison between the director and the artists. You do not want to ‘label’ your interactive artwork by imposing/prompting your idea to the people. They need to reflect on your artwork from their own perspective, which can potentially bring deeper understanding and open unique angles of interpretation of the idea, helping you to work on future improvements of the artwork.

I now understand why the professor did not allow us to describe or explain our midterm projects during the showcase. It was actually quite useful to see and hear (shut up and listen) authentic reactions and feedback from my classmates. It helped me understand which sides of my work I would need to improve in the future to ease the interaction and perception.

For this assignment, I decided to release an update for the Antiprocrastination Iphone Case as I promised in my last week blogpost.

Concept

The shortage of the conductive fabric (could not find it in the IM Lab where it was supposed to be) made me find a new way to track the presense of the phone on the surface. This time, I used the conductive tape, which was not that convenient to use, but I experimented with a normal tape to attach it to the phone case and put together the wires.

For my analog input, I decided to use the potentiometer that the professor showed us in class, but use it in an unusual way – track the movements in front of the tracking surface to enhance the phone protection. Whenever an object (hand in our case) is trying to touch the phone, the red led light turns on to signal the extraneous movements. Using the coding, I set the value of the potentiometer under which the led light would turn on. Moreover, I also added the analog output using the map() function that I used multiple times in p5.js to project the range of values of one object to another. Thus, the closer the hand to the phone, the brighter the red led light is. To achieve such an effect I needed to play with the values inside the map() function (as described in the comments for my code), and switch the order of the values for the led light.

Code

// pin definitions
const int potentiometerPin = A3;     // potentiometer
const int ledPin = 3;      // LED connected to analog-reading capable pin number 3

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  
  // initialize 
  pinMode(ledPin, OUTPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin
  int sensorValue = analogRead(potPin);
  
  // setting up the mapping so that would work as intended - 
  // the closer the hand, the brighter the led. Putting the values 0 and 255 vice-versa for this
  // and limiting the values of the sensor from 500 to 825 (I put 825 intentionally, so that red led would be bright if the phone is removed from the wires)
  int ledBrightness = map(sensorValue, 500, 825, 255, 0);

  // print out the values we read to give more intuition: 1st for potentiometer and 2nd for led
  Serial.print("Potentiometer: ");
  Serial.print(sensorValue);
  Serial.print("   LED: ");
  Serial.println(ledBrightness);
  
  // setting the LED brightness
  analogWrite(ledPin, ledBrightness);
  
  delay(1);  // delay in between reads for stability
}

Schematic

Video

Reflection

For my first assignment, I did not use any code. Here, I needed to figure out the syntax and commands required to make things work. So far I find it pretty challenging to think in both dimensions – physical and digital, but it is also extremely interesting. Although I did not yet implement the sound effects as I wanted to when the phone was removed from the surface, I am happy with the result that I achieved, especially with how fast I managed to find the substitute for the conductive fabric.

I am looking forward to next week’s classes and assignments to further enhance my Arduino skills.

 

For this assignment, I decided to create something that would make sense rather than just something funny. Many people, especially students, are known to have trouble concentrating on their work. Thanks to our phones and social media, YouTube, Netflix, and other stuff inside, the focus span of a young person is deteriorating. The idea behind my device is specifically targeting people who lack self-discipline and cannot spend even a little time without looking at the screens of their phones – this can be adults, teenagers, or even kids. I decided to call it the Antiprocrastination iPhone Case.

Concept

The concept is simple – the tracking device, which can be attached to any surface, and the case itself.

1) You can put the tracking device on your desk if you are using it for yourself. However, for people like parents or teachers who want to use the device to not allow their children or students to look at their phones, it is recommended to put the device in the common area.

2) Put the iPhone case on. It is equipped with a special electrified silk on the backside that transfers the signal to the green LED lamp whenever it is lying on the surface of the tracking device. Thus, if you see the green light, it means that everything is good and the phone is connected to the tracking device.

3) As soon as the phone leaves the surface of the tracking device, the lamp turns off, indicating that the person is trying to use the phone.

Refer to the video below to check how it works:
P.S. don’t mind my tired voice, it’s been a pretty packed weekend haha

 

Reflection

The idea was simple to implement – I used the same logic that the professor showed us during the class. What I did differently was the usage of electrified silk that would be cut into 3 pieces. 2 would lie on the table with wires connected to them and with a short distance between them, so the chain would not be closed until the third bigger piece of silk would cover both of the smaller ones from the top. I attached the bigger piece to the iPhone case, and whenever it lies on the smaller pieces, the chain gets closed, and electricity circles and flows as intended, which allows the LED light to turn on.

It is the Antiprocrastination iPhone Case 1.0 as it does not include advanced features. For example, I could add the sound effect whenever the iPhone is removed to warn a user. I could also make the vice-versa LED light effect by, for instance, putting on the red LED light and turning it on whenever the iPhone is removed from the surface.

Anyway, I enjoyed my first experience with Arduino and I am extremely excited to learn more in the upcoming classes to start building more advanced things.

Attractive things work better

The idea of the reading is simple – if you want to achieve great results in your product development, good design and usefulness should go hand in hand. However, most people forget about it and mess up one of the parts. I saw many ideas that were great but lacked design and attractiveness. As an example, I can take the startup competition. The team with a great idea but a bad slide deck design and pitch can easily lose to the team with a great slide deck and pitch, even though the latter might have an idea that is technically worse for implementation.

I would also like to mention that design can play a crucial role in marketing. As I have learned from one great professional, marketing is a systematic creation and capture of value. While value can be perceived straightforwardly as a utility and purpose, it can also mean something aesthetically pleasing or something that is very well differentiated from other ideas or products. It is important to remember that we are, after all, human beings, and our emotions and feelings can sometimes play a crucial role in deciding what is worth purchasing, using, wearing, etc. Thus, a great design can be a decisive factor for a customer to buy your product while encountering your advertisement.

Her Code Got Humans on the Moon

I was impressed by what I learned from reading this article. Margaret Hamilton basically saved the Apollo mission and also opened the door to the world of computer engineering. I am sure that many people still do not know about this fact, and this is true that the role of women in the STEM field was underrepresented throughout the 20th century and before, not to mention that educational opportunities became available for women much later than for men. Nowadays, this is being changed and many women have a chance to contribute to the development of science. Talking from my personal experience, I know a lot of women in science, particularly in space development and exploration fields in my country, Russia. Even in the 20th century, there were female astronauts, physicians, and mathematicians. Although their role and contribution might not be as significant as the one of Margaret Hamilton, they all also played a role in empowering women in STEM in my country.

 

 

As I have mentioned in my Midterm Progress Report, my goal was to create not just a game, but rather an interactive environment for which I took inspiration from the game I played a long time ago with my friends.

It was a long journey from the beginning to the end of my work that included not much but, still, some challenging parts that I will describe later in this blogpost.

Concept

Initially, I wanted to create an interactive game related to Christmas Eve, and simply work on good-quality visuals and add certain interactions, e.g. opening the gifts. However, after getting feedback from the professor and thinking about other potential ideas, I realized that it would not be enough for me to be fully satisfied with the results. That is why I decided to add the game that would also include good-quality animations and sprites, and would incorporate the collision detection and OOP principles.

As it needed to also be related to Christmas, I decided to make the Santa the main character of the game. Initially, I wanted to do something with the landscape orientation as my game is pretty wide. However, I decided to reject that idea because of the potential problems with the screen movement control. (For my laptop, for example, as it has a small screen, the game exceeds the boundaries of the monitor, so I need to scroll through the screen).

I decided to implement the game with the basic concept of ‘something falling from the sky, and you either need to dodge it or catch it’. Nothing special, but I strived to make it as fun as possible. In my game, the background poster inside the house tells that there is a shortage of gifts. The goal of the user is to help Santa to catch the gifts while dodging the icicles falling from the sky. The user can control the character by using the arrow keys.

Talking about the broader picture outside of the mini-game that I just described, my game consists of two main stages, outside the house (serves mainly aesthetic purposes with very nice background music that I received multiple compliments about haha), and inside the house (platform for interactions and ‘entrance’ to the mini-game).

PLAY THE GAME IN THE FULLSCREEN (PRESS ‘F’ FOR THE FULL FULLSCREEN)

Problems and Solutions

Although there were not too many problems, there were enough difficulties and struggles that it will not be possible to fit here, so I will focus mainly on those that I’m actually proud of resolving.

1) By my mistake, the biggest struggle was to connect the games together. Yes, you read it right. Connect the games.

For some reason, I was naive enough to think that p5.js has a function that can magically embed one sketch into another. Don’t get me wrong, p5.js is an amazing platform with many functionality and features to offer, but I expected such a concept of unification to exist. Exactly why, I decided, to make things easier and write the code for my mini-game in the separate file. It was to my big surprise to realize, after an hour of trying, that it is impossible to just straight up integrate the mini-game into my main file. So I needed to put a lot of work and precision into the transfer of the code, and, at some points, to hardcode, to plug the mini-game into the screen of the main game as you can see playing it now.

} else if (currentScene === 4) {
  // Game scene
  playGameSceneMusic();
  image(blurred_house_interior, 0, 0, 1800, 900);
  fill(0, 147, 255);
  rect((width - sceneGameWidth) / 2, (height - sceneGameHeight) / 2, sceneGameWidth, sceneGameHeight); 
  
  isMouseOnArrow = checkIfMouseOnArrow();
  drawArrow(); // to be able to exit back to scene 2
  
  if (!gameStarted) {
    displayRulesScreen();  // rules
  } else if (gameOver) {
    displayGameOverScreen(); //game over
  } else if (gameWon) {
    displayWinScreen(); // win
  } else {
    playGame(); // game state

2) Music and Sound effects were not behaving as intended. The main problem was the repetitiveness and infinite looping of the sounds during the interactions with the object. For example, a knock on the door would repeat itself from the start to the finish all the time while the mouse is pointing at it. I needed to fix it using the limiting boolean conditions (true/false). I hope you get what I mean by this. If you don’t, perhaps it will be easier when you’ll look into the code.

if (mouseX > doorX && mouseX < doorX + doorWidth && mouseY > doorY && mouseY < doorY + doorHeight) {
  doorTrigger = true;
  
  if (doorKnockCharged === true) { // to play sound once per mouse pointing 
    doorKnock.play(); 
    doorKnockCharged = false;
  }
} else {
  doorTrigger = false; 
  doorKnockCharged = true; 
}

3) Screen scrolling with the arrow keys did not allow to make the experience of playing the mini-game enjoyable. The Santa movements are bonded to the Left Arrow and Right Arrow. At the same time, as I have mentioned above, my screen, as I expect to be for most users as well, was too short, so the picture of the game is scrollable in the fullscreen mode. In p5.js, arrow keys trigger the screen scrolling, which interrupted the mini-game flow as the screen waas constantly moving left and right with the key clicks. I even posted the question in the discord channel, but after the internet research I found the solution.

// blocking arrow key default behavior using window event listener
window.addEventListener("keydown", function(event) {
  if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight") {
    event.preventDefault();  // Prevent default scrolling behavior
  }
});

 

4) When opening the gifts and the mini-game, I needed to come up with the background to be used. As looking for new backgrounds would take too much time, I decided to make it in a similar way many games do – blur the background to make the effect of focus on the chosen item. Initially, I tried to implement it using the filter(BLUR, ...) function in p5.js. Although the effect looked nice, for some reason, my game started lagging and freezing during the scenes with using the blur (probably has something to do with the constant update of pixels on the screen). So I decided to make a little smart move – instead of blurring the picture inside the game, I blurred the picture using the blurring tool on the internet and simply plugged it into my sketch.

PLAY THE GAME IN THE FULLSCREEN (PRESS ‘F’ FOR THE FULL FULLSCREEN)

Conclusion

I am very proud of my work on this midterm project. I accomplished more than I initially planned to, and I managed to maintain a more or less high standard of gaming. I found good quality images, sounds, and sprites, I successfully handled the unexpected difficulties, and managed to build the game without significant bugs (hopefully there are no bugs at all haha). Most importantly, I achieved my initial goal of creating an art piece of nostalgia for myself, and I did it by putting in a lot of hard work and thinking processes. Of course, there are a lot of things that I could add to the game or implement in a better way, for example using less hardcoding and following a more logical and organized approach. I could make more high-level effects or create better-quality textures, etc.. Unfortunately, it was not enough time to accomplish all that I could.

Nevertheless, I am happy with how the course is going so far. I have a lot to learn and grasp, and it keeps me excited and motivated for the second half of the course. Looking forward to working with Arduino!

Thinking about my midterm idea last weekend, I realized that I wanted to create something that was related to Christmas. Being far away from home, I often think about my childhood and those cozy winter holidays that I used to spend with my family and friends, so my midterm is a representation of one of my favorite times of the year.

When deciding on the style of my project, at first I wanted to create some sort of game. However, I decided to try something new – different from the typical collision-detection or platform games that I did all the way through my Introduction to Computer Science class. I decided for it to be an interactive game that would incorporate different elements of my memories about Christmas – music, visual elements, and the overall atmosphere of the celebration because it would be both a pleasant experience for me and something more unusual. As I found out later during the week, when the professor was showing us the previous midterms, my idea about the interactive game was not so unique. The Cafe game is a great example of such, and in some way, I got some additional inspiration by looking at it, but, of course, I will do my best to make my game even better.

Designing the Idea

As I did not have much time this week, my goal was to simply outline the idea and start working on the basic fundamentals of my game. First of all, the opening screen will be full of Christmas celebration elements. One of the first concerns that I faced was to find good high-quality textures for my game, because usually, the free game images I see on the internet are not that good-looking, and for the good ones you need to pay. However, after I spent some time looking for a free PNG no-background images website, I came across a couple where I found exactly what I needed for my game. This is one of the good websites I used – CleanPNG. I also decided to add the possibility of entering the fullscreen – when you press ‘f’ inside the p5.js editor. I remember the technique the professor showed us to make the canvas and all the elements automatically adjusted based on the size of the window, so I even tried to implement it using windowResized() function, but I decided that it would add unnecessary complications further in the game in case I needed to hardcode something, so I abandoned the idea and decided to stick to the size of the canvas 1800×900.

The second stage of my game will take place inside the house. Once the user clicks the door, the inner side of the house will appear on the screen. I took some inspiration from the game called ‘Fortnite’ which I used to play in my middle school years. It had a very nice Christmas event called Winterfest, and that is what it looked like:

The idea was that you log in to the game every day and you can open one gift per day. It had some in-game outfits, weapon skins, and other customizable items, but the main reason I still remember this game is the memories of how I used to play it with my friends during the school winter break.

For my midterm project, I want to implement the idea of opening gifts. I think that it will be the biggest challenge – to think of how the animation of opening the gifts will work and what I want to put inside. I really want to make it a good-quality interaction, so I will do my best to find all the necessary resources to learn the code elements I need to implement for that. As of now, I have not chosen any specific solution, but I am sure I will use a lot of OOP in my code, as well as a lot of functions. In fact, I already started creating functions for each of the elements that are shown on the screen because I can potentially add some animations or sounds for them next week.

Conclusion

So far I really like how I am working on developing my idea. I really want to use my imagination and try to create something that I would be proud of. As I have mentioned before, this game is a good representation of my memories, and I will try to make the most out of my time to make it great.