DEV LOG 7: 3/18/25 ECOSYSTEM PROJECT
For this project, I collaborated with my classmate Jaiden. She had come up with an intuitive way of rendering landmass-like structures using Perlin noise. Our first revision looked like this.
I had the idea to turn this from a procedural map into a simulation where ships would move between different ports on the edges of landmasses. This original revision had semi-random placements of ports (red dots) if I recall correctly, and my initial method was going to be to scan where the "edges" of the landmasses were to place ports. But this was soon changed to be randomly selected at a noise value that was at the edge of where white would become black because I was really overthinking it.
This method of rendering would however, prove complicated as it would need to stay completely still as a map while having objects like ships be drawn over it. I couldn't redraw it every frame, but I needed it to be able to stay still without consuming too much resources. The solution to this: Drawing on a buffer.
A buffer renders graphics off-screen and then displays them as an image, thus saving processing power and preventing things in draw overriding their existence.
With some work from me I got the graphics to render on a buffer and we were able to get out this. It doesn't match the above screenshot because the "ports" are broken but it has a basic test of buffering.
Jaiden and I proceeded on, with success in making the ports functioning, but with one common issue; I could not for the life of me figure out a good way to do pathfinding.
My initial thought was to try and implement something like A* pathfinding but it quickly became apparent that I did not know enough javascript to implement it properly. I tried to make a arctan implementation with noise applied but I could never get it to only calculate within the "ocean" zones. I even looked at some Daniel Shiffman code and I could not get that working.
This method of rendering would however, prove complicated as it would need to stay completely still as a map while having objects like ships be drawn over it. I couldn't redraw it every frame, but I needed it to be able to stay still without consuming too much resources. The solution to this: Drawing on a buffer.
A buffer renders graphics off-screen and then displays them as an image, thus saving processing power and preventing things in draw overriding their existence.
With some work from me I got the graphics to render on a buffer and we were able to get out this. It doesn't match the above screenshot because the "ports" are broken but it has a basic test of buffering.
Jaiden and I proceeded on, with success in making the ports functioning, but with one common issue; I could not for the life of me figure out a good way to do pathfinding.
My initial thought was to try and implement something like A* pathfinding but it quickly became apparent that I did not know enough javascript to implement it properly. I tried to make a arctan implementation with noise applied but I could never get it to only calculate within the "ocean" zones. I even looked at some Daniel Shiffman code and I could not get that working.
Highlighted in red in this were noise coordinates that I was trying to have the ship "lock on" to as water routes but I could never get it to work.
Finally, after so much trying, Jaiden and I realized we should just change them to planes because of the logistical and time hurdles we faced. And the plane solution worked pretty well. It was simple and honestly what we should have done instead, even though boats would have been a lot cooler.
What I learned from this whole experience is that sometimes overthinking is detrimental to the process of getting something done, especially when faced with time constraints. Also I should stop overestimating how much I know about Javascript...
The development song of the week is: Come Sail Away by Styx
Comments
Post a Comment