Category: Spring 2023 – Shiloh

For this assignment, we had to use loops for and while to create or create an artwork. As I did not have any specific artwork that I wanted to make and go for, I experimented with three different shapes (circles, rectangles, and lines) in order to get more comfortable with how to construct them and what to expect. Therefore, I randomized which shape would be printed, and in what size and in what color in order to get different compositions each time the mouse was clicked.

I really enjoyed the making process of the piece, as I realized I was not so sure what would come out in the end either due to my unfamiliarity up to this point. So, I was able to play around with some parameters to see what kind of output I would receive by tinkering with them. After printing more and more patterns after altering another parameter and another, the pattern I was seeing was reminding the cubism form that marks Picasso’s art style. Since I enjoyed connecting it to reality like that, I decided to keep the artwork as it is.

The biggest challenge for me, in this case, was not what to print but how to print. I was struggling on figuring out how to achieve multiple patterns. In the draw function, the patterns would move very fast that it was staggering. On the other hand, the setup would have to be run repeatedly. Therefore I have finally decided to incorporate the mouse-clicked function to loop the pattern code that resides under the draw function. This way I was able to receive multiple patterns in a way more accessible manner.

Link to p5js:

https://editor.p5js.org/iremnaz/sketches/BLhDgFAOm

In this assignment, I tried to incorporate the basic shapes we covered in the first week of the classes. One of the things that captured my attention in the class was how the location of the mouse was integrated into the pieces for the exercises as well as other self-portrait projects I have seen on this blog! So I knew that I really wanted to do that.

In terms of the creative incentive I knew that I didn’t want to make my self-portrait not too human but also not so little. A highlighted experience for me while making this portrait was the fog that would cloud my effort and mind, most of the time, and would require serious and conscious effort to pass that over. Therefore I have made cloud shapes with a combination of multiple ellipses that hovers around the head in the darkness and move to the side when the mouse hovers into the middle.

The biggest challenge for me here was actually finding an idea. I felt that it was hard to choose an idea but also after finding it, it was hard to implement. I could feel while drawing the ellipses that I was uncomfortable with producing the desired shapes with shape functions that were available and for me, it was a big struggle to make the lines meet, and align each time.

The integration of the location of the mouse to the brightening of the background and dispersing of the clouds was a creative choice and compared to the actual drawing of the shapes was not that complicated. I feel that after experiencing these initial struggles with p5js I will be comfortable with creating the art pieces I desire.

Link to p5js:

https://editor.p5js.org/iremnaz/sketches/oxRGnv701

Concept

Whenever I’m traveling to someplace new, driving around my hometown, or even walking down a new street, I am always intrigued by that one small, cozy cafe sitting at the corner of the street. The ones with soft, lo-fi music playing in the background with fairy lights hanging all around. For my midterm, I thought of replicating that thought and creating a similar experience but with one important addition: Interaction. I decided to sway away from making games for once and to try something new that i would enjoy just as much. So I came to the conclusion of making a small but interactive cafe experience in p5.

The whole concept behind my idea is to let the user explore the artwork on their own and immerse themselves in the calm environment of the cafe. The way I would make this work is to add small interactable elements in the cafe like books that the user can read, a menu that they can view, or a jukebox that they can use to change the music. All of these elements will be subtle but noticeable enough to make the user want to interact with them. This way, the user will be able to experience something new in every corner.

Design

For this project, I’ve decided to keep the design simple but intuitive. The color scheme would be soft and pastel-like and the overall design of the objects in the canvas would replicate SVG images. I want my cafe to have a calm and relaxing feel to it with soothing music and close-to-real-life sound effects, such as the sound of opening a door when it is clicked, the sound of flipping a page when the user decides to interact with the book and turn its pages, and the familiar sound of brewing coffee in the background.

In order to visualize my design and concept, I started to draw the relevant wireframes on my iPad. These are very minimalistic for now but they give an idea of what the design and feel of the experience would be like.

Frightening / Challenging Aspects

• Switching the user perspective from scene-to-scene. For example, displaying the outside of the cafe at first, and then changing the perspective to view the inside of the cafe when the user clicks on the cafe’s entrance.
• Drawing! All the structures and objects, however big or small, will have to drawn using shapes in p5, this is a very time consuming task.
• Implementing buttons / Highlighted objects on mouse hover: For instance, the cafe’s door would be highlighted in a darker color when the user hovers over it since it stores an interaction. Implementing the different interactable shapes on the canvas as buttons is challenging as well.

Risk Prevention

• In order to tackle the “switching from scene-to-scene” challenge, I started creating layers to keep a track of the different scenes in the experience and to display them at the correct times. Boolean variables would dynamically keep a track of which scene the user is currently in and the relevant objects would be displayed to the user under that layer. For example, if the user is at the first scene, or layer1, the outside of the cafe would be displayed along with the sky and other background objects, but as soon as the user clicks on the cafe’s door, the first layer would be erased (or not be displayed) and the interior of the cafe (the second layer) would be displayed.
• One of the most time-consuming parts of this project would be to design all the individual objects from scratch using basic shapes and lines. Although this seems daunting, I have started to work on different objects simultaneously on different canvases so that I can get them done faster, and also so that I don’t have to scroll endlessly just to find a particular object. In the end, I would combine the different canvases into one project, which would be easier since I’m designing all the layers separately.
• Implementing different objects in the canvas as buttons is also a bit daunting since I would have to compare the mousePos with every single interactable object to see if it is inside the object. Since the objects are made up of different shapes, making the interactions and mouse hovers seem natural would consume a lot of time so I’ve given myself a head-start for working on those interactions as well.

PROJECT PROPOSAL

A 2-player maze chase game built on p5.js. Players are each assigned a role, the hunter and the prey. The maze is set in the nighttime, meaning that neither the prey nor the target can see the full maze. Each player is equipped with a flashlight, which spotlights them and allows them to see some surroundings. Prey’s goal is to escape the maze before the hunter chases them. Hunter’s goal is to catch the prey before they escape from the maze. Prey’s flashlight is stronger and hence allows us to see more of the maze because I feel like their goal may be more challenging to fulfill.

BIGGEST CHALLENGE

I identify my biggest challenge for this project as the building of the maze itself. I have the hardest time understanding the logic behind the building of anything that uses grids. Besides that, I have minimal knowledge of algorithms that allow for maze generation. To help myself with that, I will refer to the multi-part youtube tutorial by The Coding Train, in which they create a maze generator using a depth-first search algorithm with recursive backtracking. I have also found this page useful in introducing myself to the pros and cons of different maze-building algorithms.

IMPLEMENTATION

I decided to start by addressing my biggest concern for this project, which is adding a self-generating maze. The tutorial that I have referred to uses a randomized depth-first search. After looking through other possible algorithms, I have settled on Kruskal’s algorithm, which generates more dead ends in the maze. So far, the code that I have generates a maze with one player and one maze exit. The player can move around the maze using WASD for controls. The maze exit doesn’t do anything yet.

THINGS TO WORK ON

Basically everything else (e.g. sound, player sprites, spotlight, intro window, player interaction, etc). As for the maze, I need to add another player to it, and possibly control the position of the maze exit so that it is closer to the “prey” than to the hunter. For now, it is pretty easy to get from the start to the end of the maze even with all of the dead ends. However, I think that the difficulty of the game won’t be a question once I have the spotlight feature implemented.

 

Concept & Design

For this Midterm Project I would like to create a game using everything I have learned so far in class. The game will be called “The Martian” and the objective of the game is to guide the Mars Rover through the treacherous terrain of Mars, collecting valuable resources and avoiding hostile alien spaceships and rocks on the surface. The player will have to navigate using keyboard and mouse as they progress through the game. In “The Martian” the player will experience the thrill of driving a Mars Rover on the surface of the red planet. With challenging terrain, hostile aliens, and valuable resources to collect, the game will offer hours of exciting gameplay. The use of p5.js will enable the creation of a visually stunning and engaging game.

Potential Design Elements

Complex part of midterm project

For me personally the most frightening  or complex part of this midterm project is to implement a collision detection algorithm. The idea is to detect the collision between Mars Rover and other objects like valuable resources and hostile alien spaceships or rocks. I also have to somehow come up with an algorithm to distinguish between these various collisions with different objects. Because if the Mars Rover collides with valuable resources the Score should increase and if it collides with the rock or alien spaceship it should end the game and display the restart button. Also because I didn’t have any previous background in using sound and animation libraries I would have to test them out.

Implementation & Reducing the risk

Here I wrote some code for the collision algorithm between Mars Rover and Rock:

if(ufo$.isTouching(rover)||stone.isTouching(rover)) {
            console.log("end");
            state="end";
            ufo$.destroyEach();
            stone.x=width+400;
            stone.velocityX=0;
            rover.visible=false;

            gmov.play();
               
            textSize(30);
            textFont(font);
            fill("black");
            text("The End",width/2,height/2);
        }

        if(mousePressedOver(switchBtn)) {
            sd=1;
            click.play();
        }
        if(sd==1) {
            state="pause";
        }

I also tried to implement the spawn of Alien Spaceships:

function spawnEnemy() {
    ufo=createSprite(width+50,Math.round(random(xp-100,xp+20)),80,80);
    ufo.velocityX=-5;
    ufo.addAnimation("ufo",ufo_);
    ufo.scale=0.2;
    ufo.lifetime=Math.round(width/3)+15;

    //ufo.debug=true;

    ufo.setCollider("circle",0,0,200);

    ufo$.add(ufo);
    console.log(xp);
    cx-=4;
}

 

Concept

For the midterm, I want to develop a simple game “Survive the semester”. In this game, a player should catch different items to continue playing until time is over. In case time reaches 0, the player won. For now, my plan is to make game over in cases when player’s health or joy levels reaches 0. I intend to include 2 progress bars reflecting student’s health and joy. Different items will have different effects on the bars, e.g. catching sleep will increase player’s health. Though, the game logic is not yet finalized. I may do it the way that if student fails to catch something, health/joy is deducted.

Design

I chose the NYUAD night picture as a background image. I am a kind of student who does a lot of study-related work at nights, so this choice was a bit relevant to me to reflect the game theme on studying.

Implementation

For me, the most frightening part was to get an idea of what game I want to develop. I would not describe myself as creative, and creating original game takes a lot of effort and time to me. I was also concerned on the progress bars and updates to them. I did not finish their implementation now, but I got the idea on how to work on them and I believe I should be able to finish it well before submitting my work.

I have also implemented the main mechanical part of game – involving falling ball and catching figure. I will  change the image of falling objects and catching rectangle to adjust to my game design objectives. I kept it simple for now to test if it works as it should first.

Future Steps:

I got a lot of ideas on my mind and I am excited to see on what I will end up implemented for this game!

Yet, what I would definitely need to add to my implementation:

• Sounds. Should be fun experience to select those =)
• More images. Especially, for falling objects. Falling ball is irrelevant to my game now.
• OOP. It should not be a problem.
• Better visuals involving text. Now it is basic, I may need to make the visual part of game provide better UI and UX to the player
• More enhanced game logic and progress bars!

Link to the sketch: https://editor.p5js.org/ds6058/sketches/1lbHkjJpV

 

 

 

My idea for my midterm project is to develop a variation of the classic brick breaker game. Instead of breaking bricks, the objective of the game is to prevent the ball from dropping from the bottom of the screen. The game will feature various items that the ball can hit that the player must navigate to keep the ball in play.

One of the unique features of the game is that hitting an obstacle can affect the gameplay in various ways. For example, if the ball hits a “sizing” obstacle, the size of the bar at the bottom of the screen may increase or decrease. Another obstacle could change the speed of the ball, making it either faster or slower. Some obstacles may be stationary, while others may move back and forth, making it more challenging to keep the ball in play.

The game will have different levels, and as the player progresses through the levels, the game’s difficulty will increase, requiring the player to react quickly and adapt to the changing gameplay.

I will get a better understanding of the complexity of the game once I start coding it but some of the challenge I believe I could possibly run into are the following:

– One of the most crucial aspects of the game is the collision detection between the ball and the obstacles. I will need to create an algorithm that can detect when the ball hits an obstacle and determine the correct response, such as changing the bar size or ball speed.
– Integrating a continuous scrolling background in the game to add a dynamic and immersive element to the gameplay experience. I have looked into some code examples that I could use for this.
– Finding the right balance between challenging and enjoyable gameplay. For this I will need to playtest the game extensively to ensure that it provides enough challenge to keep the player engaged, but not too much to become frustrating.

Introduction

Pong is a classic two-player game that simulates table tennis. The players use paddles to hit a ball back and forth across the screen. The objective of the game is to score points by getting the ball past the opponent’s paddle.

Project Concept and Design

The goal of this project is to create a basic Pong game that can be played by two players. The game will have two paddles, one for each player, and a ball that bounces around the screen. The players will use their paddles to hit the ball back and forth, with the objective of getting the ball past the opponent’s paddle. The game will have a scoring system that keeps track of each player’s score, and the first player to reach a certain number of points (e.g., 10) will be declared the winner. The game will also have sound effects to enhance the gameplay experience.

The Most Frightening Part (Implemented)

Initially, the most frightening part of this project was not knowing how the game would pan out with the collisions and movement of the ball and paddles. It was essential to get that part of the game right to ensure that the game could be implemented. To reduce this risk, I decided not to leave the implementation of the game to the end but started implementing the project slowly with one feature at a time. This approach allowed me to test each feature as I implemented it and make adjustments as needed to ensure that the game was working as expected. There sure are more improvements that can be added to this system, but a decent amount of work has already been done.

The paddles now move with the UP and DOWN arrows, and the “W” and “S” keys.

Future Enhancements

• Adding a picture background in the play area.
• Adding an instruction screen(with text) in the beginning.
• Adding sound effects.
• Adding a game termination check and a “Game Over” screen.
• Adding a restart button in the “Game Over” screen that restarts the game.

Link: https://editor.p5js.org/swostikpati/full/ShPga9v6_