What is the best way to create a circular to square gradient and save it within a two-dimensional array?

Can anyone guide me on creating a circle/square gradient and storing the data in a 2D array? I want to incorporate this gradient with simplex-noise to develop a procedural island by subtracting the gradient from the generated noise. Here are some visual references for the gradients I am aiming to achieve: https://i.sstatic.net/2BVpH.png https://i.sstatic.net/9EKMK.jpg

I came across a blog post that discusses the use of gradient with noise for generating islands, which you can read here: https://medium.com/@travall/procedural-2d-island-generation-noise-functions-13976bddeaf9. However, the details on creating the gradient were scarce. I have been searching for more information without success. Any suggestions or pointers would be greatly appreciated.

javascriptperlin-noisesimplex-noise

Answer №1

I've been attempting a similar task lately. If you're looking to create a gradient for a square array, check out this resource: 2D Array Gradient Generation in Unity

As for generating a gradient for a circular array, consider calculating the distance of each "pixel" from the center of the array.

Although I'm working with C# in my case, the code should be straightforward enough to convert to other languages.

    int arrayWidth, arrayHeight;
    float[,] gradientArray = new var[arrayWidth, arrayHeight]

    int centerX = arrayWidth / 2 -1; // determine center of the array
    int centerY = arrayHeight / 2 -1; // determine center of the array

    for (int x = 0; x < arrayWidth; x++)
        {
            for (int y = 0; y < arrayHeight; y++)
            {
                float distanceX = (centerX - x) * (centerX - x);
                float distanceY = (centerY - y) * (centerY - y);

                float distanceToCenter = Mathf.Sqrt(distanceX + distanceY); // calculate distance from center
 
                distanceToCenter = distanceToCenter / arrayHeight; // adjust gradient by modifying this line

                gradientArray[x, y] = distanceToCenter; // assign value to array element
            }
        }

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

Creating a stylish Go URL bar using HTML and CSS

Looking for some guidance in JavaScript as I am new to it. I want to create a go bar similar to the ones found at the top of browsers using HTML and JS. When the button is clicked, it should navigate to the URL entered in the box. Here's an example of ...

javascripthtml

Suggestions for rectifying the calculation script to include the price, a phone number, 2 digits, and integrating a textfield for cost

I have developed a script that calculates prices, phone numbers, and extracts the last 2 digits from the phone number. In my website, the price is displayed through a select option. However, I am facing an issue where the cost does not automatically updat ...

javascriptjqueryajax

JavaScript: Can you clarify the value of this variable using five sets of double quotations?

Could you please review the code snippet below for me? <script type="text/javascript"> function recentpostslist(json) { document.write('<ul class="recommended">'); var i; var j; for (i = 0; i < json.feed.entry.length; i++) { ...

javascripthtmljsonbloggeraddition

What is the preferred method for accessing nested object properties in React props?

Building upon a previous inquiry - Javascript - How do I access properties of objects nested within other Objects It appears that standard dot notation doesn't suffice for accessing nested object properties within React state/props. In the case of t ...

javascriptreactjs

Using HTML div tags to create a looping expression that can interact with Javascript

Currently, I am working on a Ruby on Rails project and I am facing a challenge with looping variables in an HTML form to reduce the amount of manual code I have to write. However, when I attempt to evaluate an expression in the id attribute, the JavaScript ...

javascriptjqueryhtmlruby-on-railsturbolinks

Challenges in achieving seamless interaction between Javascript Form and Ajax for logging in to a Secure Magento Store

My Webdeveloper abandoned me and my form doesn't seem to work always. When clicked it doesn't appear to do anything (just shows the "javascript:;" href on the browser status bar), but sometimes it works... I've searched everywhere for a so ...

javascripthtmlajaxmagento

Form a collection of JavaScript arrays using a string that includes strings

Here is a string that needs to be converted into a JavaScript array: ['Value',2],['Value2',4],['Value3',10] To convert this to a JavaScript array, the following code can be used: var tmpStrings = "['Value',2],[&ap ...

javascriptarraysjson

enigmatic glitch in javascript while using django

When adding jQuery to my template, I include it using the following code: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> After including jQuery, I also add a form to my page like this ...

javascriptdjangodebugging

Tips for retrieving a cropped image with Croppr.js

Currently, I am developing a mobile application using Ionic 3. Within the application, I have integrated the Croppr.js library to enable image cropping before uploading it to the server. However, I am facing an issue where I am unable to retrieve the cropp ...

javascriptangulartypescriptionic3

Characteristics within the primary template element of a directive

I'm having an issue with the following directive code: .directive('myDirective', function () { restrict: 'E', replace: true, transclude: true, scope: { label: '@', ngModel: '=', ...

javascriptangularjs

What is the best way to display a popup window on top of the parent window?

How can I display a popup window on top of the parent window when a button is clicked? I have tried using the Window.Focus() method, but the popup window keeps going back behind the parent window. I would greatly appreciate any help on this. Thank you in ...

javascriptasp.netajax

Asynchronous function nested within a loop

Hello there! I am currently working on converting a SQLite database to NeDb using the following code snippet: const sqliteJSON = require('sqlite-json'); const Datastore = require('nedb') const exporter = sqliteJSON('etecsa.db&apo ...

javascriptnode.js

Having trouble with changing the state within an AngularJS (Ionic Framework) controller?

My goal is to switch views within the Search controller after receiving search results from the server through $http. However, my current approach doesn't seem to be working as intended. I also need to pass the response to the new view for displaying ...

javascriptangularjsionic-framework

Steps for organizing an array based on unique requirements

My goal is to retrieve an array that consists of the first and second objects based on the "point" property of each object I have a specific condition where if it is satisfied, the positions will be swapped. Default: ENGLISH[0] ENGLISH[1] MATH[0] MATH[1] ...

javascriptreactjsarraysobject

Combine theme configuration options within Material-UI

I am interested in setting up custom theme rules in Material-UI. My goal is to create both light and dark themes and extend them with some shared settings. My initial idea was to store the common settings for the light and dark themes in a separate variab ...

javascriptarraysmaterial-ui

Creating a CSS circle spinner with a half moon shape is an innovative way to add a unique touch

Image: Circular spinner rotating along the border rim of other solid circle For more details, please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have created a UI codepen here and welcome any modifications or solutions. The code snippet is provided ...

javascriptjquerycsshtml

Incorporating Vue into a dated website by eliminating the div and replacing it with new dynamic Vue components

As I attempt to integrate Vue into my old website, I want the existing jQuery scripts to continue functioning and the old HTML content to be displayed. However, I am encountering an issue where the el element and its contents are being removed. This probl ...

javascriptvue.js

Implementing functions on React component classes

Recently, I decided to convert a slideshow from w3s schools into a React component. The process involved changing all the functions into methods on the class and setting the initial state to display the first slide. However, upon clicking the buttons or do ...

javascriptreactjs

JavaScript can be used to activate the onclick event

Is there a way to disable and then re-enable all buttons that share the same class name? I attempted the following code without success: let buttons = document.getElementsByClassName("btn-st"); for (let i = 0; i < buttons.length; i++) { b ...

javascript

Transform the input value into a string

Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...

javascripthtml