Usage

Open Source Islands has three main sections to check out! To start, go to the generator page, and click through the form without changing any default values. A beautiful, (but perhaps boring!) 8bit art-style island will be generated for your. Then hit edit, and start playing around with the various sliders and check-boxes. I highly recommend that you try them all! When you've found some settings that you like, try clicking "recompile" a handful of times, until you get a seed which strikes your fancy. Finally you can adjust the colour settings, as well as the amount of sunset lighting and shadows applied. When you're happy with your island, hit "save" to download an image file, and hit "submit" to upload it to the public gallery.

Once you've tried the generator yourself, head over to the gallery page, and explore the vast array of islands other people have made. If you particularity like one, hit "edit", make any adjustments you'd like, and download it!

In addition to the fun functionality of the app, I've put considerable effort into the JS Docs and developer notes sections of the project, and would appreciate you checking them out in order to learn more about the project.

Finally, head over to the about section to learn more about the developer, me!

The Premise

Open Source Islands is the meeting point of two points of interest in my life, the great south pacific ocean, and procedural noise algorithms. Prior to this year, I've spent a considerable amount of time exploring and falling in love with the incredible, yet shockingly unspoiled nations of the south pacific, and with covid-19 in full effect, I've felt stuck here in the city. I've also had a long standing interest in procedural terrain, and noise algorithms like worley and perlin noise. Combine these, and you get the starting point for Open Source Islands.

Conceptually, Open Source Islands is divided into three main components. The island class and generator, the web-app providing an user interface for it, and the back-end database storing island configurations. The island class needed to be object-orientated, and abstract from the remainder of the project, as I want to implement it in other projects. The UI needed to be intuitive, and the back-end needed to be fast, as I'm deploying it on a small raspberry pi.

Typical Users

There's a wide range of user's who can benefit from Open Source Islands. The most obvious is people needing access to 8bit style island images as assets for video games, art projects, wallpapers, etc etc. However as Island.js is self contained, and retains original data like the island height map, user's wanting to implement the islands into a real-time video game could include Island.js in their project. For a (very W.I.P.) example of this, head over to my early alpha project Tangaroa. The final user is a developer simply wanting to learn about perlin noise algorithms. With easy and interactive visualization of the algorithm, as well as full access to the source, code, Open Source Islands can act as a great educational tool.

Island.js

The most conceptually difficult component of the project, my island representation class is the part of Open Source Islands that I'm the most proud of. The entire class, including all default settings, methods, and export functions are self contained, and thus can be included any any project that requires procedural islands.

Island generation begins with a base eight octave layer of perlin noise. This noise is then scaled and normalized based on the radial distance from the center point, creating a cone-like height map. Next, additional layers of noise are layered to create realistic island features such as motus and reefs. These features draw inspiration from my direct observations of islands like Maupiti, French Polynesia, and the North Male Atoll, Maldives.

Next the height map is converted to an array of squares, and then rectangles. These rectangles are coloured based on their height, and rendered to a HTML5 canvas image, which is then rasterized to an octet PNG stream, and is ready for display.

Detailed sprites are then procedurally placed around the island, and rendered to their own canvas image, and can be rasterized to the octet stream as well. These sprites were all designed by hand in pixel art program aseprite.

Next a ray-cast rendering engine calculates semi-transparent lighting effects and creates shadows from differences in height-layers. These shadows can be rendered at a specific length, or exported as a variable sprite-sheet.

To get a more detailed understanding of island.js, please check out the source code, as well as the specific documentation

Design and ARIA

Due to the nature of my application, I chose to follow a mobile-first design process for my UI. I began by sketching out my application's wire-frames on a sheet of paper, taking photographs, and viewing them on my phone, to see where adjustments had to be made. I settled on a vertical 4:3 aspect ratio main section, which would take up the majority of the screen on mobile devices.

For larger phones, or desktop browsers, I chose to keep the 4:3 ratio and expand the background content to cover the remainder of the screen. To make the page more interesting, instead of a static background image, I use @keyframe animations to animate a sprite sheet of rendered shadows for a number of pre-generated "concept" islands. These animations also fade out randomly generated particles which make the ocean "sparkle".

The layout of Open Source Islands has been done with a large combination of grids and flexboxes. Some examples include a grid used for the gallery page, as well as flexboxes for the standard section layout. More details can be found in the CSS source code.

In order to allow Open Source Islands to be as accessible as possible, I've implemented ARIA controls and attributes throughout the core structure. Every page and function can be accessed via the keyboard, and I have done my best to optimize the page for screen reader support. In addition, semantic elements such as nav, section, and article are used whenever possible.

Since my application is being hosted from a small server, and includes dynamic php content, I was not content with loading times between pages, so instead of separate php/html files, I group all content into a single file, and dynamically hide and show sections using the jQuery controller. More below.

jQuery

Open Source Islands' front-end is controlled by a jQuery controller script. This script does everything from basic page setup, page-to-page navigation, image gallery randomization, and even animation by dynamically generating and deleting particle effects. The controller is extensively documented, and can be explored via the JS Docs or the source code.

PHP and AJAX

Open Source Islands' back-end is written in PHP. At initial page load, the image gallery is populated with the contents of the database (more below), and on form submission, the PHP back-end receives the image parameters, sanitizes them, and uploads them to the database. Server side, everything is viewed as hostile, and is treated as a sanitized string for security purposes.

Open Source Islands also takes advantage of AJAX. When a user clicks "edit" on a submitted image, the jQuery controller triggers an AJAX request to the server, getting the data and parameters required to edit and recompile the submitted island image.

All back-end functionality is abstracted, to allow for maintainability. Secure information is kept separate from database connection scripts, and AJAX requests are kept separate from the regular PHP handlers.

MariaDB and SQL

The database behind Open Source Islands runs MariaDB. The required commands to setup this database can be found here. The PHP back-end sanitizes all inputs prior to accessing the SQL database, preventing SQL-injection attacks.

In order to prevent button spamming, or duplicate submission I use SQL constraints on all relevant data fields to automatically drop duplicate entries from the database. This needs to be done manually as some fields are auto-generated and will always be unique, despite not being primary keys.

The Future

Open Source Islands has significant room for development. I would like to experiment with more types of noise algorithms such as OpenSimplex noise, as well as Worley noise. Better, more realistic islands could be generated by running particle simulations to add realistic erosion effects to ridges and valleys. While nostalgic, the 2d render of the islands is inherently limiting, and I'd like to attempt to render them in 3d. I'd also like to diversify the shape of the islands and add support for archipelagos such as Vanuatu.

On the web-development side, I'd like to port the application over to AWS, as my home web server obviously can't handle large traffic. I'd also like more advanced security measures, as while the database is safe from SQL-injection attacks, since the image generation is done client-side, this allows loop-holes for users to upload non-island images to the server. While this is not a big problem security wise, as the file contents are simply treated as sanitized strings, this could break the immersion of the application. I'm not trying to recreate Instagram.

Overall, Open Source Islands has an exciting future, so watch this space!