Assignment 3 – One Piece Map

One Piece Map

Concept:

I’m a massive One piece fan and have been watching it for a bit now and I think its one of the series thats stuck with me out of everything I’ve watched so far, and so when we got told to make generative artwork I kind of immediately thought that it had to be something to do with One piece. The problem was I didn’t really just want to draw a character or a ship I wanted to do something else.

So I kind of thought about what the series was underneath all of the  characters and its about the Grand Line or I guess a sea that nobody has mapped and thats the entire premise, theres islands that nobodys ever been to and a route than nobody has charted and one of the crew, Nami, is literally a navigator whos whole thing is drawing maps of places they go so when I started think about it I was like why not just make a like one piece or pirate themed interactive map?

I think from this assignment what I like most about how it turned out is that there isn’t a single, not a signle coordinate used in my code that said where an Island when. I never wrote a position down for any of them. I only wrote rules about how an island should be and where it should be placed and what it was made out of.

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));
}

It was pretty hard to choose which code I’m proud of because I’m proud of everything that I’ve made with this but this code essentially is how every Island makes its shape. Essentially its just twelve ellipses and they are just piled ontop of eachother and they are all at different sizes, some are overlapping to make a coastline some are darker shaded to make it look more like grass andthen even darker to make it look like a forest.

This has to do with something I did not learn inside class and I actually had an AI help me get to this point. Essentially what I did was I asked it what can I do with arrays because I have a goal and I want to acheive it and it gave me the steps and path way to be able to do this and the rest I did it on my own. Like the parallel arrays and the arrays inside classes is what I mean here.

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.

Leave a Reply