Uncharted

Concept:

For my midterm I made a game called Uncharted. I am a big One Piece fan, and the idea came from the thing the whole series is built on, a sea that nobody has properly mapped and a crew crossing it one island at a time. It also grew straight out of my Assignment 3 piece, which was a generative sea chart where a ship sails from island to island and draws its route behind itself. Once I had that working I kept thinking it was already most of a game that nobody was playing.

So in the game you set sail on a sea that has never existed before, because every map is generated fresh when you press play. Your ship sails from island to island on its own, and every island is guarded by a monster. When the ship reaches an island the monster rises out of the water and you have to click it to beat it before it smashes your ship. Every time it hits you, you lose a heart. Beat every monster and you reach the treasure, lose all your hearts and you are shipwrecked.

The part I like most is that the monsters are randomly generated too. One might have one big eye and horns, the next might be purple with three eyes and spikes down its back, and each one gets its own random name like “Gnash the Grumpy” or “Skullop the One Eyed”. So you never know what is waiting on an island until you get there, which is kind of the whole point of an uncharted sea.

Design:

The whole game is drawn to look like an old nautical chart. Parchment colour, faded stains on the paper, tiny dashes for open water, a compass rose in the corner and a double line border, all from my Assignment 3 piece. There are no image files in the game at all, everything you see is drawn with shapes in code, including the ship, the islands and every monster.

For the main menu I did not want a flat background, so the map is actually still running underneath it with the ship sailing, and the menu is a sheet of parchment laid over the top at 210 out of 255 alpha so you can just about see it moving. The title is drawn twice, once in dark brown 3 pixels down and to the right and once in red on top, so it looks like it is cut into the paper. I used a One Piece style font for the title only and Metamorphous for everything else, because I tried a few fonts and most display fonts fall apart at the small sizes the instructions need.

For the How to Play screen I remembered the Week 4 reading by Norman and tried to make sure the game tells you what to do without me having to explain it. The buttons go solid red when your mouse is over them so you know they can be clicked, every island that still has a monster on it has a little “?” marker over it, and the top of the screen always shows your hearts and which island you are heading to. In the fight there is a bar that fills up showing when the monster is about to strike, and the monster’s mouth opens wider the closer it gets, so you can read the danger off its face as well as the bar.

I also added an Options screen where you can pick Easy, Normal or Hard and turn the sound on or off. Under the difficulty buttons it tells you what that setting actually changes, so you are not picking blind.

For the monsters I wanted them to feel alive even though they are just ellipses and triangles. Their pupils follow your mouse, they blink every few seconds, and their tentacles wiggle. When you hit one it flashes white. When you beat one there is a little cutscene where its eyes turn into X’s, it shudders, keels over to one side and sinks while bubbles come up and rings spread across the water, and then “BEATEN” fades in with its name.

For the winning screen, every monster you beat is lined up small across the screen with X eyes, like a collection. For the losing screen it shows you the monster that sank you and which island you got to.

Highlighted Code:

this.eyes = floor(random(1, 4));  // 1, 2 or 3
this.eyeSize = random(22, 32);
if (this.eyes === 1) {
  this.eyeSize = this.eyeSize * 1.5;   // one big eye looks scarier
}
if (this.eyes === 3) {
  this.eyeSize = this.eyeSize * 0.8;   // or they dont fit
}

// 0 = nothing on top, 1 = horns, 2 = spikes
this.top = floor(random(3));
this.hornLength = random(20, 40);

this.tentacles = floor(random(3, 7));
this.teeth = floor(random(2, 6));

let title = titles[floor(random(titles.length))];
if (this.eyes === 1 && random(100) < 50) {
  title = "the One Eyed";
}

I am proud of this because it is what makes every monster different. This is in the constructor of my Monster class, so all the random choices get made once when the monster is created, and after that the object just remembers them. That is the same lesson I learned in Assignment 3 with the islands, because if the random() was in show() instead, the monster would get a new face every single frame and flicker. floor() turns the random decimal into a whole number so I get exactly 1, 2 or 3 eyes, and the same trick picks horns or spikes, how many tentacles and how many teeth. Its skin colour and eye colour get picked out of a 2D array of colours the same way. My favourite bit is the name, because a one eyed monster has a 50 percent chance of being called “the One Eyed”, so sometimes the name actually matches what it looks like.

function hitMonster() {
  if (beatenTimer === 0) {
    if (fighting.isHit(mouseX, mouseY)) {
      fighting.hp = fighting.hp - 1;
      // console.log(fighting.hp);
      fighting.flash = 8;
      playSound(hitSound);
      // a hit pushes its strike back, so fast clicking matters
      fighting.attack = fighting.attack - 0.1;
      if (fighting.attack < 0) {
        fighting.attack = 0;
      }
      if (fighting.hp <= 0) {
        fighting.defeated = true;
        fighting.attack = 0;
        beatenTimer = 170;
        playSound(sinkSound);
      }
    } else {
      splashX = mouseX;
      splashY = mouseY;
      splashTime = 20;
      playSound(splashSound);
      // missing gives it a head start on normal and hard
      fighting.attack = fighting.attack + missCostFor[difficulty];
    }
  }
}

This is the whole fight in one function and it runs every time you click. isHit() is a method on the Monster class that uses dist() to check if the click was close enough to the middle of the monster. If it was, the monster loses a health point, flashes white, the hit sound plays, and its strike bar gets pushed back a bit, which is what makes fast clicking matter. If that was its last health point it gets marked as defeated and the sinking cutscene starts. If you missed, there is a splash where you clicked, and on Normal and Hard the miss actually pushes its strike bar forward. That one line is what made the game harder, because before it you could just spam click everywhere and win.

How This Was Made?

The map: This is from my Assignment 3 piece and works the same way. Every island is a pile of about twelve overlapping ellipses at random sizes, drawn four times over in different colours to make the shallows, beach, land and forest. Islands get placed using dist() so they do not land on each other, and the whole bottom left corner is kept empty for the compass. There are 4 islands for sure and then 4 more that each have a 60 percent chance, so you get between 4 and 8.

Screens: One variable called screen holds which page you are on, “menu”, “howto”, “options”, “play”, “fight”, “win” or “lose”, and draw() checks it and calls the right function. This is the game states technique from Week 6.2. Each screen also changes what a click does inside mousePressed().

The ship stopping at islands: In Assignment 3 the ship just kept sailing forever. For the game I added a docked true or false to the Ship class. When it reaches the end of a route it stays sat on the island and docked becomes true, and draw() notices that and starts the fight with the monster for that island. When you beat it, setSail() moves it on to the next route. On the menu the ship does not stop at all, so the background keeps sailing on its own.

Monsters: This is my fourth class, Monster.js, and there is one monster made for every route when the map is made, stored in an array where monsters[0] guards the second island, monsters[1] guards the third and so on. Each one is drawn with push(), translate() and scale() so I can draw it big in the fight and small on the win screen with the same code. The tentacles are rows of circles getting smaller with a sin() wiggle, the pupils use map() to follow your mouse, and the blink uses % so it closes its eyes for 8 frames out of every 220.

The fight: The monster rises out of the water at the start, sways side to side using sin() so you have to aim, and its attack number goes from 0 to 1. When it reaches 1 you lose a heart, the screen shakes using translate() with random numbers, and the screen flashes red. The sea is drawn after the monster so it looks like it is coming out of the water, and it goes all the way to the bottom of the screen.

Death cutscene: When a monster dies it shakes for 24 frames, then rotate() tips it over to one side, which is randomly left or right, while it sinks. The bubbles are four parallel arrays, the same way the paper stains work, and they only get drawn while they are still under the surface so they look like they pop. The “BEATEN” text fades in using map() on its alpha.

Difficulty: The difficulty settings are parallel arrays, so heartsFor[difficulty] is how many hearts you get. Easy gives you 5 hearts and slower monsters, Normal gives you 3 and misses cost you, and Hard gives you 2 with faster tougher monsters. Monsters also get stronger the further you sail, because each one is made with a level number that adds to its health and speed.

Sound: There are 8 sounds, a roar when the monster rises, a hit, a splash when you miss, a crash when it hits you, bubbles when it sinks, a win and lose tune, and waves looping in the background. They all load at the same time using Promise.all from Week 6.2 inside an async function, so setup() waits for them with await before the game starts.

Fonts: Both fonts load with await loadFont() in their own async function, the same way as the sounds.

Fullscreen: Pressing F calls fullscreen() from Week 6.2. My game is drawn for a 660 by 560 canvas, so instead of resizing everything, a few lines in style.css stretch the canvas to fill the screen while keeping its shape. The game still thinks it is 660 by 560 underneath so all the clicks still line up.

Buttons: The buttons are just rect() with a mouseIsOver() function that checks if mouseX and mouseY are inside the box and returns true or false, and mousePressed() uses it to decide which button you clicked.

Problems:

The first big problem was that when you beat a monster it would sink straight through the water and come out the bottom onto the paper, because I had only drawn the sea as a band 100 pixels tall. The fix was just making the sea go all the way to the bottom of the screen, and I made it slightly see through so you can still see the dark shape sinking underneath, which ended up looking better than what I was going for in the first place.

Fullscreen did not work at first. Every time you pressed F it tried to exit fullscreen instead of going in. It turned out fullscreen() with nothing in the brackets does not give back true or false, it gives back the fullscreen element or nothing, so checking it with === false was always wrong. Changing it to a plain if and else fixed it. Then pressing F during a voyage also sent you back to the menu, because I already had any key going back to the menu, so the F check had to go first.

Clicking the sea on the map used to make a brand new map, which was fine for Assignment 3, but in a game it meant one accidental click in the middle of a voyage wiped all your progress. I took it out and left it commented out in the code.

The sea sound would not play even though there were no errors. In the version of p5.sound we use, loop() only turns looping on and does not actually start the sound, so it needs loop() and then play(). Also browsers do not let a page make noise until you click something, so the waves start on your first click.

When I was moving the code into the p5 editor I kept getting “Ship is not defined”. It was because I had uploaded the .js files with Upload File instead of making them with Create File, so they were sitting there as assets and the sketch never actually ran them. I also had a font error with “pending” in the link, which was because I had not saved the sketch after uploading the font.

The game was also way too easy at first because you could just click everywhere as fast as you could. Making misses push the monster’s strike forward, and adding the three difficulty settings, fixed that. To check the difficulties were actually different, it was tested with an automatic player that clicks about three times a second and hits about 70 percent of the time. On Easy it won with all 5 hearts left, on Normal it lost on island 6 out of 7, and on Hard it lost on island 3 out of 8.

Reflection:

Overall I am really happy with how it turned out, especially because it started as a generative art piece and ended up as an actual game you can win or lose. I am most proud of the monsters, because every one of them comes out different and they still all look like they belong in the same game. The death cutscene is my favourite part to watch.

There are a few things from my draft that I did not get to. I wanted the player to be able to make their own character and design their own flag, which would replace the little red triangle on the ship’s mast. I would also like the fights to be different for different monsters, like some that throw things at you that you have to dodge instead of all of them being clicking fights. I would also like to swap my sounds for real recorded ones.

Resources:

Class slides

Example sketches from the slides

• Game states: https://editor.p5js.org/Aya_Riad/sketches/bXwvUEEpz
• Fullscreen: https://editor.p5js.org/Aya_Riad/sketches/vgp-dlvea
• Loading multiple sounds with Promise.all: https://editor.p5js.org/Aya_Riad/sketches/dXHs6td4Y
• Loading and playing a sound: https://editor.p5js.org/Aya_Riad/sketches/kjU1y1fRk
• loop() for sounds: https://editor.p5js.org/Aya_Riad/sketches/bh-fvTTUa

p5.js reference

• loadFont(), textFont(), text(), textAlign()
• loadSound()
• fullscreen(), key, keyPressed(), mousePressed()
• translate(), rotate(), scale(), push(), pop()
• map(), dist(), floor(), sin(), frameCount
• fill(), to check that the fourth number is alpha, which is what makes the paper stains and the menu wash see through

JavaScript and CSS (MDN), for the parts we did not cover in class

• Promise.all
• async functions and await
• classes
• the for statement, for i = i + 2
• return, for returning an array
• the :fullscreen selector and min(), for style.css

Fonts

• One Piece manga font from Font Meme, a fan made font based on the One Piece logo, used for the game title only.
• Metamorphous by James Grieshaber, Sorkin Type Co, from Google Fonts under the SIL Open Font License, used for everything else.

Sounds

• All 8 sound effects were generated with code by Claude for this.

Inspiration and visual reference

• One Piece by Eiichiro Oda, for the idea of an unmapped sea and a crew crossing it island by island.
• Old hand drawn nautical charts, for the compass rose, the border and the little dashes that show open water.
• My own Assignment 3 piece, Uncharted, which the map, the islands, the routes and the ship come from.

Reflection:

What I got from this reading was that my body my own body can be an intertface you know? Like I think the thing that stuck with me the most was that the section on Videoplace and that was because the participant didn’t need a controller, keyboard or a mouse, their silhouette, posture and their movement itself became the input and the system responded by creating graphics around them. I think that is such, such a different way of thinking about interaction because the computer isn’t just something waiting for me to click now, its watching where I move, how I move and its reacting to me.

And this made me think about games again, I know you might say Oh Hamad  you talk alot about games but I really do think you can compare them to everything. Like I really have liked the way games make me physically involved instead of just pressing buttons. Like the readings talks about interactions where a persons silhoutte can touch or even overlap or even reflect virtual objects which almost makes it seem like the body is another controller.

Midterm Idea – One Piece Map

Concept:

My midterm is a game called Uncharted. It grew out of my Assignment 3 piece, a generative sea chart where a ship sails from island to island and draws the route behind itself as it goes. Every run gives you a completely different sea, and once I had that working I kept thinking it was already most of a game that nobody was playing.

I am a big One Piece fan and that is where the idea came from, a sea nobody has mapped and a crew crossing it island by island. You set sail, the ship charts a sea that has never existed before, and something is guarding every island. Beat what is guarding it and the way to the next island opens.

Design:

The whole thing is drawn to look like an old nautical chart. Parchment colour, faded stains on the paper, tiny dashes for open water, a compass rose in the corner and a double line border. Each island is about twelve elipses going over eachother instead of just one shape, cause I figured out from Assignment 3 that if you overlap enough circles the outline will stop looking like circles and start reading like a coastline, then deeper into the island, etc.

For this draft I mostly built the main menu, since the brief says the experience has to start with a screen that gives instructions and waits. Three screens work so far: the menu, a how to play page, and the map.

What I am happiest with is that menu is there and the ship is sailing in the background kind of like a loading screen or something you’d see in an actual game. The title uses a real One Piece display font and everything else uses Metamorphous. I tried the menu in a few fonts first, but they didn’t work out so I just stuck with these two.

This is a basic how to play screen, but what I plan to actually have it as is like an intro and a story and everything but I made something, very, very ,very basic for now.

This is the structure I have in mind:

1. 1. Main menu (title, Set Sail, How To Play)
   2. How to play screen (explains the game) with a back button
   3. The map, where the ship sails island to island
   4. A fight when the ship reaches an island
   5. Win or lose screen with a play again button

Uncertainties:

I have not decided what the fight is. There is a monster on every island and beating it opens the next route, but the rest is open. One version is clicking the monster a set number of times before a bar runs out, which is simple and would work. The other is the monster throwing things while you move the ship left and right to dodge, which is more fun and a lot more to build, and it needs collision detection, which I have not done before. I will probably build the clicking one first so there is something playable, then upgrade it if I have time.

I also do not know whether the player should steer the ship. Right now it sails on its own, which looks good and is where the character of the Assignment 3 piece comes from, but between fights the player has nothing to do. I would rather keep the self sailing and hand over control only during a fight.

There are three things I want in it that I have not started yet. I want the player to build their own character at the start instead of being handed one, and to design their own flag, which would replace the little red triangle already flying on the ship’s mast. The third is the monsters. I want them generated the same way the islands are, out of rules rather than me drawing each one by hand, so you do not know what is waiting on an island until you reach it. That would also mean the fights stay different after you have played a few times, which the map already manages and the rest of the game does not.

Resources:

Loops example from Class
Loops and Arrays from Class
Another Loops example from Class with Arrays

One Piece manga font

Metamorphous on Google Fonts

MDN: the for statement

MDN: return

MDN: comparison operators

BRO CODE!!!! – i love this guy so much, his videos have helped me so much not just with java but with coding in general this guy is amazing.

Buttons

Reflection:

Something as simple as opening a door shouldn’t make me to stop and question myself, and I think sometimes it does. I think this is what stood out to me most from this reading.

I found his discussion about confusign doors interesting because it made me realize how often we blame ourselves on things that werent even properly designed for us in the first place. Like his idea that every objects should tell us how they work without us having to keep trying and failing over and over again.

This brought me back to the idea of video games, and some how games make everything feel natural. You see a door, you go to it, you know how to interact with it. But sometimes you encounter a game that has so many menus that you spend more time figuring out how to do something instead of actually enjoying the game itself.

I think this is where design starts to lose its purpose, and what really changed my perspective was his idea of human centered design, technology should dapt to how people actually behave instead of expecting people to become perfect for it.

The way this made me reconsider my future projects is that I want to make stuff and things that people can understand without having to explain every little thing. Maybe changing the cursor, or adding small visual cues, or making interactions respond immediately to make things more natural.

Growth Rings

noStroke();
for (let i = ringRadius.length - 1; i >= 0; i--) {
  if (i >= ringsGrown) {
    continue;
  }
  if (year[i] <= zayedLastYear) {
    fill(zayedWood[0]);
  } else {
    fill(laterWood[0]);
  }
  ellipse(centreX, centreY, ringRadius[i] * 2, ringRadius[i] * 2);
}

ringsGrown = (frameCount - framesAtStart) / framesPerRing;

if (ringsGrown >= ringRadius.length) {
  ringsGrown = ringRadius.length;
  stillGrowing = false;
}

function mousePressed() {
  ringsGrown = 0;
  stillGrowing = true;
  framesAtStart = frameCount;
}

let distanceFromCentre = dist(mouseX, mouseY, centreX, centreY);

let found = -1;
for (let i = 0; i < ringRadius.length; i++) {
  if (found === -1 && ringRadius[i] >= distanceFromCentre) {
    found = i;
  }
}


noFill();
stroke(paper[0]);
strokeWeight(1.6);
ellipse(centreX, centreY, ringRadius[found] * 2, ringRadius[found] * 2);


noStroke();
fill(ink[0]);
rect(width - 262, 156, 166, 54, 4);
fill(paper[0]);
text(year[found], width - 248, 182);
text(addCommas(population[found]) + " people", width - 248, 200);

One Piece Map

Concept:

I’m a really big one piece fan and have been watching it for many years and I think its one of the shows and Anime in general that’s stuck with me out of anything I’ve watched so when we got this assignment I knew that I needed to do something to do with One Piece.

So I thought about what the series actually about underneath it all, and its a sea that nobodys really mapped. Thats the entire premise, theres islands that nobody have been to and a route that nobody has really like made, and one of Luffy’s Crew, Nami, is literally a navigator who’s entire purpose is to draw maps of places they go and make a map of the entire world which at the time did not exist.

And it turned out to fit this assignment pretty well, because a map essentially has a set of rules if you kind of think about it. Like land goes in some places and water goes in others and a line joins one places to another. So if I can just get those rules set up, I can keep making a new map everytime.

I think what I liked most about this is how it turned out to be honest, its that there isnt one coordinate thats in my code that says where an Island goes, its all just rules for how an Island should work and what its made out of and that makes the picture itself.

Highlighted Code:

for (let i = 0; i < 12; i++) {
  let thisWidth = random(islandSize * 0.55, islandSize * 1.25);
  this.lumpX.push(random(-islandSize * 0.7, islandSize * 0.7));
  this.lumpY.push(random(-islandSize * 0.5, islandSize * 0.5));
  this.lumpWidth.push(thisWidth);
  this.lumpHeight.push(thisWidth * random(0.55, 0.95));
}

This is how an island gets the shape it needs to look like an Island and I think out of all the code I’ve done so far, I think I’m really proud of this one. Theres no function no nothing for drawing like a blob like thing, so an Island cant just be a circle or else it looks pretty stupid, so what I did instead make each island out of a pile of about twelve elipses and they are all different sizes and nudged off centre from eachother. If you overlap enough of the circles as well you can also make a kind of like coastline and I didn’t expect this to work as well as I did.

Then the same pile of those like small lumps get drawn around four times over, and each bit of its pass a little bit smaller than the last one and in a different color, and thats what makes the rings of thes shallow water and then the deeper insides of the island like the beach, then the grass andthen the forest.

Stuff we didn’t do here in class:

So in class what we learned from the ball and the bubble examples that we got was that they can only ever hold single number like this.x or this.xspeed but mine so while I was trying to figure out how to actually get this idea across, I used AI to help me figure out how to make the classes hold whole arrays, teach me the whole process of arrays because I still needed to figure it out and explain to me the commands and from there I stated working. So in this code, this.lumpX is an array thats inside an object. I also used them as something called parallel arrays which is essentially several seperate arrays where like the same position in each and every one is talking about the exact same thing. So there’s an array of like X positions, an array of Y positions, an array of widths and an array of heights. Its like columns in a table, atleast thats how I understood it, where the columns and the index number is the row.

How was this made?

So the way I made this and organized it is that theres four files. So sketch has all the arrays, the draw and the three classes are of course in their own files. The island draws itself everytime its called upon, the Route works out the curved path but doesnt’ draw anything directly and ship is the only one that does anything over the course of time.

For placing the islands I used dist() from class but I used it backwards so it picks like a random spot and measures how far it is from every island thats already there, and throws it out if anythings too close to that spot.

In terms of references, I kind of just went for like an old like map kind of vibe kind of like the one from one piece, like the hand drawn ones.

In terms of AI, I did use AI alot to help me make this dream come to fruition but mostly in terms of explaining concepts and how I can get to my goal, they didnt input code for me directly. Code is all mine.

Reflection

The main thing I took away from this is that a class is the way I guess of thinking about the problem before that its a way of writing code, I love problem solving and when I saw it that way it made me enjoy it alot more. So once I could see it as like three kinds of a thing, the land, the path and something travelling the path, I could see the structure like all come together.

If I kept going honestly I think Id’ ‘want more things in the sea, like maybe whirlpools or sea monsters even that would cause the ship to crash and restart or maybe find a different path? Who knows, theres always room for more.

Reflection:

I think the biggest thing I took from Crawford’s reading is that I shouldn’t just make my sketches react to an input I think I want them to feel alive. Like, he kind of talked about interactivity and that it was almost like a conversation and he said that one side thinks and responds and that the other side does the same thing back. I think this idea meant a lot to me especially because I used to make games on roblox and other things is that it kind of changed what a strong interactive system actually is.

To me now, interactive systems or interactivity in general are ones where the user feels actually noticed not just oh I clicked the circle so the circle moved but more like the system understood what the player or the user or anyone waas doing and gave something meaningful right back at you. So I think a strong interraction needs alot of responsiveness, alot of variety and a feeling that your choices like actually matters like Telltale games with their story games and wide variety of choices you can do and how those choices actually affect the endings you get and you actually feel like you made your own path, your apart of your own story not just a pre-set thing, even if these choices do lead to a pre-set thing, it does not feel that way to me.

Reflection 1 – Randomness

Randomness. Games and Movement.

These were honestly the first thigns that came to my mind while watching that video. I kept thinking about games like Minecraft, because so much of what happens in the game feels like really random even though I know it isnt. You can be walking around doing absoluely nothing andthen a zombie turns around or finds you somehow and rushes at you, a chicken will be jumping around you too and a sheep will be walking by you or a creeper walking by you at literally the worst possible time. But non eof those things are controlled by someone else, its not all fixed, its completely random but its in these like set rules.

I think this is what I found most interesting, before this I thought about making something with code I kind of always had to imagine that I had to control everything, where something goes, what it looks like, when it moves, so like its perfect and that I know what it should do.

But randomness changes that, and minecraft made me think about that because the world feels really alive without the player doing anything. Animals wander around, enemies appear, things are moving when I am doing absolutely nothing. I think thats what changed my perspective, because randomness doesnt mean there arent rules which is how I thought about it before. But the rules are probably what make randomness interesting in the very first place.

But yeah, thats about it really.

Loop Assignment

Concept:

So for this assignment I kind of wanted to go with something with like an early computer generated vibe kind of like the pictures you provided us instead of trying to make an object or character through loops.

So essentially this is a grid that is made out of either circles or squares depending on where your mouse is, the user controls what happens to the grid using the mouse itself. Moving it left changes the RGB selection so you change the color itself, moving it up and down also changes another part of the color completely and the mouse even affects how large the shapes become.

What I liked about this idea is that the structure itself stayed the same but the actual image itself never looks the same because random was used for the size of every shape so even if its in the same place it’ll constantly keep changing its never the same thing.

Highlighted Code:

One of the parts I am most proud of is the nested loops itself:

for (let x = 25; x < width; x += 50) {
  for (let y = 25; y < height; y += 50) {

Because although we did learn this in class, I couldn’t wrap my head around it properly the idea of a nested loop how it worked and how it kept repeating with eachother so I had to overcome that hurdle.

I started thinking of the outside loop as like picking one column andthen the inside loop going all the way down the column and that once it finished the outside loop just goes over by fifty andthen it starts over and over again. For some reason, I couldn’t wrap my head around that before but now I have.

The other part I like was this

let s = random(8, mouseX / 10 + 10);

This controlled the size of every shape, so when the mouse was farther toward the right side of the screen the shapes become much larger. At the same time I used random as well so not every shape became the exact same size, each one has its own value.

And I think that was more interesting than just making every shape the same and grow equally and it just looks nice.

Reflection:

I think honestly the main thing I got from this was how much you can actually do with loops without even writing that much although writing even that amount of code took me way too long than it should have to figure out what I needed to do.

If I tried to make this grid manually, and I did try, I would have had to write dozens of ellipses and rectangles and have to get the position for every single one the computer is doing all the work for me.

As I said in my previous sections as I well I had a tough time wrapping my head around nested loops itself but then I managed to get the hang of it and figure it out. I think the reason I didnt understand it was like there were two variables changing at the same time, etc.

I also really like experimenting with random because like everytime you looked back at the art it was different like everytime you saw it, it was in a different size and was jsut overall different in someway. And my favorite part about it is the ability for the user itself to interact with them because they can actually change the color and the size of the shapes themselves.

I think if I wanted to keep working on it in the future, I think I would just add like more shapes and more like colors and make it so the spacing could maybe change between them depending on the position of the mouse itself.

De Blob

Concept:

Instead of going with my actual face I decided to make a video game character. Blob is a character from the game called De Blob, and I felt like this character has left an impact on me since I was a child and represented me better than my face ever will. The character,  Blob is a round blob that absorbs color and goes around putting color back into a world that’s been drained of color by an evil corporation and I felt like its a good character to pick for my first assignment even since I started with nothing but a blank canvas with no color and have to build everything up myself.

And he was also a pretty good fit for the assignment itself. He’s almost entirely made up of circles and rectangles and had and was easy to draw or get an idea of how to draw him. I used alot of ellipses, rectangles, quads, etc.

Highlighted Code:

// Smile

fill('#fffafa');
ellipse(250, 295, 190, 105);
fill('#c53127');
ellipse(250, 245, 202, 82);

I think one my favorites to tweak with or the most interesting one in my opinion is the smile itself. Because I made it by removing the shape instead of drawing it, I drew a big white ellipse, then a second one in the body color directly ontop of it and then made it so the second ellipse eats up the top half of the white one and whats left under it is the grin.

// Jelly from the inside of the body

fill('#c53127');
ellipse(250, 200, 196, 104);
rect(152, 200, 196, 170);
ellipse(250, 367, 196, 94);
fill('#bd3026');
ellipse(163, 306, 34, 150);
fill('#c23026');
ellipse(341, 303, 27, 145);

The other part I liked is the darker crimson jelly that filled him and make it like he’s actually a Blob and not just like a red thing. Essentially what I did is a darker red over the body and I did it in three pieces I did a rounded top, I did one straight down the middle and the rounded out bottom so the fill follows the body’s shape and isn’t just a flat out rectangle.

I think what I really want to point at though are the last two ellipses, they are tall and narrow and tucked against the left and right edges so they make it look curved instead of just flat.

I think what I learned from this was how connected these layers are actually are, how to put them one over the other properly. Like even while I was doing this I broke something so when I was filling the jelly fill to fill out the rest of the body it broke the the grin so it broke the smile and just showed up as a pale band across his face this was because the thing that carved the smile was still the old lighter red and the fix was just recoloring it to make it match the new fill instead of the old one.

How was this made?

Honestly at the start I didnt really have anything but just a rectangle and to lines at the top coming out of it for the ears and I was just kind of building the base and at that point it looked nothing like him.

I used a reference image and started to get to work and needed the body to become a bit rounder at the top and bottom and so I decided to built it out of a rectangle and I made it also with an ellipse on each end making the top and bottom look more squashed and blob like.

The biggest thing I had to learn while doing this is the order of things, I worked everything kind of like when your actually painting something so I put the shadow on the ground first like I had in my reference picture, then everything that was like behind the body or like poking out like the arms and the hands and the ears then the body andthen the face last. Honestly most of my bugs came from that, like a few times a shape I spent like so many minutes trying to position just completely disappeared and every single time its because I put something over it without thinking.

For the shapes themselves, the body and the hands and like the shading of it are all ellipses and rectangles and the arms and the fingers are quads because I needed shapes that could be kind of angled instead of just rectangles and the peace sign for the fingers are quads. Then the wink I used it like how you, the Professor, showed us in class by using an arc and I used PI and TWO_PI to get a half circle and its the only arc in the whole sketch the rest honestly is ellipses, rectangles or quad.

Reflection:

Honestly I’m pretty happy with how this came out with my first time using p5js for like an assignment and stuff it came out a lot closer to the reference image than I expected when I first started off. I think the most satisfying part of all this was just like seeing it all come together and starting to actually see the thing I envisioned and the thing I’m making become recognizable because for the longest time it was just a red rectangle with sticks coming out of it on top andthen the eyes, then the grin, then the wink, then the peace sign andthen it was clearly him.

I think if I wanted to add anything in the future I think I’d want to make him move somehow like his ears swaying back and forth and make it so De Blob isn’t naturally winking at first but when they click the screen he winks and maybe it plays like a sound or something. And maybe a way to make it so he changes color every second because he absorbs any color around him or make it so the user picks what color he’d want De Blob to be from an RGB perspective.