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.