Creating a unique Voronoi Diagram wrap

I am currently working on the creation of a fantasy-style map that is procedurally generated using the cells of a Voronoi diagram to determine different terrains.

While working on the tectonic plate generation, I came to the realization that having wrapping edges during the generation process is crucial in order to prevent the plates from spreading against the map boundaries. Without border wrapping on subsequent seeds, the logic of the map gets completely skewed.

Tectonic Plates: No wrapping, plate borders indicated by black dots...

Part of the plate identification process involves designating 70% of the map as "oceanic" and the remaining 30% as "continental".

Essentially:
It is not necessary for the map borders to wrap as long as they can be thematically integrated.

I have considered adding predefined uniform points around the edge and connecting them forcefully, but I am on the lookout for a better solution. I have removed the border points as they do not align well with their neighboring points in the library that I am utilizing.

Library being used

My code repository Specifically, the makePoints() function @line 236

I am employing Poisson Disk Sampling for the point generation. Although I am coding in AS3, I am open to receiving answers in any programming language or pseudo code.

Question:
How can I wrap the Voronoi diagram so that the cells at the bottom correspond to the cells at the top, and the cells on the left relate to the cells on the right (and vice versa)?

Edit: The desired outcome would be an image resembling the real world's tectonic plates. Notice how the plates overlap the sides of the map? That is the effect I am aiming for, specifically East/West.

https://i.sstatic.net/ua90f.gif

Answer №1

In order to address the issue of wrapping (I chose to only wrap the left/right sides), I devised the following solution:

Initially, I utilized poisson disk sampling to fill a narrow strip of points on the left side. Subsequently, I duplicated this strip to the right just beyond the far-right boundaries of the map. I then proceeded to fill the empty rectangle that formed between the two strips.

Finally, the task became ensuring that the points on the far left were connected to those on the far right.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The textgeometry element is not appearing in the three.js scene

I've inserted a boxgeometry into the scene with the intention of adding text to indicate the side of the cube. However, I am encountering difficulties in incorporating textgeometry into the scene. This is my code: const loader = new FontLoader(); loa ...

The proper method for developing Vue components that are dependent on the parent build tools

In my experience, this issue might also arise in other frameworks with plugin/component ecosystems that rely on specific build tools (such as React components with JSX). While Vue serves as my use-case. Having developed numerous Vue components as single . ...

Strategies for Applying Filters in Search Feature on IOS Devices

Currently, I have an array of books that are being displayed on my view. At the top of the view, there are 3 filters available: (All | Reading level 1 | Reading Level 2 | Reading Level 3) (All | Informational | Literature) (All | Published in 2000-2005 | ...

Uploading an image along with additional information to Strapi using React

Can you assist me with allowing users to post data on Strapi, such as their name, URL, description, and image? I attempted to add an input type file but encountered a 500 error. I suspect this could be due to the need to call localhost:1337/upload, but I& ...

using variables as identifiers in nested JSON objects

Within my code, there is a JSON object named arrayToSubmit. Below is the provided snippet: location = "Johannesburg, South Africa"; type = "bench"; qty = 1; assetNumber = 15; arrayToSubmit = { location : { type : { 'qty' ...

Retrieve and dynamically load an entire webpage using AJAX

Although it's typically not recommended, I am interested in displaying the progress of a download on a heavy page to show the user when it's ready. Is there a way for me to track and display the actual progress of the download? Can I monitor how ...

Unable to perform multi-delete action upon clicking the checkbox button as intended

Within my GridView, I have implemented a Multi-delete feature. Below is the code snippet for your reference:- <script type="text/javascript> function ValidateAll() { var chkselectcount = 0; var gridview = document.getElementById( ...

Streamlining a complex task in JavaScript

I am currently exploring options to streamline my code so that I don't need to repeat the same function 38 times. Instead, I would like to have a single function that can handle 38 different IDs separately. The script is designed to randomly select a ...

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics: The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs. When the mouse hovers over these pixels (navigation Divs), the text that is behind the ...

"Encountering a 404 error with the angular2-in-memory-web-api

Currently, I am in the process of developing a 5 minute application using Angular 2 with reference to this particular guide: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html. While working on the HTTP section, I encountered a 404 error due to the a ...

Using Angular's ng-repeat to display a combination of different elements

I'm currently working on transitioning a form from .Net MVC to Angular. I've successfully used ng-repeat to generate the input fields within the form, which is working well. However, I now need to incorporate select fields along with the text inp ...

Error: The function expressValidator is not recognized in the current environment. This issue is occurring in a project utilizing

I am currently working on building a validation form with Express and node. As a beginner in this field, I encountered an error in my console that says: ReferenceError: expressValidator is not defined index.js code var express = require('express& ...

Display the changing value at the beginning of the drop-down menu

I'm currently working on an AngularJS forEach loop where I need to display a dropdown list with dynamic values. The goal is to have the value stored in $scope.showCurrentProgram as the first selected element in the dropdown list when the page loads, a ...

Navigating through different components within a single page

Each segment of my webpage is a distinct component, arranged consecutively while scrolling e.g.: <sectionA></sectionA> <sectionB></sectionB> <sectionC></sectionC> All the examples I've come across involve creating ...

Utilizing MongoDb and Node.js for efficient data input

I am currently facing an issue while trying to input data into a mongodb collection using node.js. I believe I have the necessary access to the collection in question. var collection = db.collection("whatsGoingOnEvents"); if(collection){ console.log("hitt ...

Issue with Chart.js V3.20: Struggling to Filter Legend Labels

Building a dynamic line chart using Chart.js with the capability of up to 19 datasets. The issue arises when there are less than 19 datasets, as the legend still displays for these unused datasets. Previously, a function was used in Chart.js 2.6.0 options ...

The process of accessing a file object by using the file path given

Is there a way to retrieve the file object of an image that is stored in my website's folder without using "input type = "file"? The image is already saved on the website. Here is what I have tried so far: var file = new File([""], "../writeto/image. ...

Is it possible for me to enhance Object, Function, Date, and other similar entities in Node by adding "static methods"?

When creating a Node.js module called "augs" that includes: Object.foo = "bar"; And then entering the following commands in the REPL: require("./augs"); typeof Object.foo The result returned is 'undefined'. In our web application, we have a ...

Utilize the onClick Event to Trigger Function with an Array in ReactJS

Every time I attempt to pass an array as a value to a function by clicking on a div, I encounter the error below: Uncaught Invariant Violation: Expected onClick listener to be a function, instead got a value of object type. If passing an array to a fun ...