Test of some perlin noise from the internet!

Developer
Jeff Daze
Size
3,793 Kb
Views
10,120
  1. Test of some perlin noise from the internet! Previews
  2. Test of some perlin noise from the internet! HTML Codes
  3. Test of some perlin noise from the internet! CSS Codes
  4. Test of some perlin noise from the internet! JS Codes

How do I make an test of some perlin noise from the internet!?

Testing!. What is a test of some perlin noise from the internet!? How do you make a test of some perlin noise from the internet!? This script and codes were developed by Jeff Daze on 18 January 2023, Wednesday.

Test of some perlin noise from the internet! Previews
IQ Test

Test of some perlin noise from the internet! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Test of some perlin noise from the internet!</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Test of some perlin noise from the internet! - Script Codes CSS Codes

#c{ border:1px solid #000;
}

Test of some perlin noise from the internet! - Script Codes JS Codes

maxXY = 256;
originXY = 128;
//Returns a positive int, up to 256,
function luminosity(d) { return Math.round( Math.min( Math.max(d, 0) , maxXY - 1) );
}
//Function tranxlates (x,y) coords into a linear array position
function findPixelData(x, y) { return (y * 256 + x) * 4
}
//Calls a provided function over a 256x256 element array.
function cycleThrough(d) { for (y = maxXY; y--;) { for (x = maxXY; x--;) { d(x, y); } }
}
function L(_ctx, mouseX, mouseY, deltaHypotenuse) { pixelData = _ctx.getImageData(0, 0, maxXY, maxXY).data; canvasData = _ctx.getImageData(0, 0, maxXY, maxXY); cycleThrough(function (x, y) { //Find the pixelData value for each pixel var pixelData1 = pixelData[findPixelData(x, y + 1) + 2]; var pixelData2 = pixelData[findPixelData(x, y - 1) + 2]; var pixelData3 = pixelData[findPixelData(x + 1, y) + 2]; var pixelData4 = pixelData[findPixelData(x - 1, y) + 2]; /* Set the intensity of a point to the luminosity of a value from the array where we generated the hypotenuses (see code below). The value we're looking for is calculated based on mouse movement, and difference between pixels. */ intensity = luminosity( deltaHypotenuse[ luminosity( pixelData1 - pixelData2 - y + mouseY) * maxXY + luminosity( pixelData3 - pixelData4 - x + mouseX) ] ); //This sets RGB of pixel data to the value of intensity. for (i = 3; i--;) { canvasData.data[findPixelData(x, y) + i] = intensity; } //This paints the whole background's channel, makes it black. canvasData.data[findPixelData(x, y) + 3] = maxXY - 1; }); _ctx.putImageData(canvasData, maxXY, 0);
}
//Generate an array with values that show the distance between (x,y) point and every canvas point.
deltaHypotenuse = [];
cycleThrough(function (x, y) { //Generates a value from -1 to +1 represeting location from point (128,128). V = (x - originXY) / 128; W = (y - originXY) / 128; //Assigns a value to a pusdo 2D array with a value between 0 and 255, where the value is the length of a hypotenuse to X,Y deltaHypotenuse[y * maxXY + x] = (Math.max(0, 1 - Math.sqrt(V * V + W * W)) * 256);
});
mouseX = mouseY = m = 0;
canvas = document.getElementById("canvas");
canvas.width = maxXY * 2;
canvas.height = maxXY;
ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 512, maxXY);
onmousemove = function (d) { mouseX = d.clientX - 8; mouseY = d.clientY - 8;
};
//L(ctx, 32, 128, deltaHypotenuse);
setInterval(function(){L(ctx, mouseX, mouseY, deltaHypotenuse);}, 50);
// Setup the map array for use
var map = [], mapDimension = 256, roughness = 30, unitSize = 1;
for(var x = 0; x < mapDimension+1; x++){ for(var y = 0; y < mapDimension+1; y++){ map[x] = []; }
}
// Starts off the map generation, seeds the first 4 corners
function startDisplacement(){ var x = mapDimension, y = mapDimension, tr, tl, t, br, bl, b, r, l, center; // top left map[0][0] = Math.random(1.0); tl = map[0][0]; // bottom left map[0][mapDimension] = Math.random(1.0); bl = map[0][mapDimension]; // top right map[mapDimension][0] = Math.random(1.0); tr = map[mapDimension][0]; // bottom right map[mapDimension][mapDimension] = Math.random(1.0); br = map[mapDimension][mapDimension] // Center map[mapDimension / 2][mapDimension / 2] = map[0][0] + map[0][mapDimension] + map[mapDimension][0] + map[mapDimension][mapDimension] / 4; map[mapDimension / 2][mapDimension / 2] = normalize(map[mapDimension / 2][mapDimension / 2]); center = map[mapDimension / 2][mapDimension / 2]; map[mapDimension / 2][mapDimension] = bl + br + center / 3; map[mapDimension / 2][0] = tl + tr + center / 3; map[mapDimension][mapDimension / 2] = tr + br + center / 3; map[0][mapDimension / 2] = tl + bl + center / 3; // Call displacment midpointDisplacment(mapDimension); // Draw everything after the terrain vals are generated drawMap(mapDimension, "canvas", map);
}
// Workhorse of the terrain generation. function midpointDisplacment(dimension){ var newDimension = dimension / 2, top, topRight, topLeft, bottom, bottomLeft, bottomRight, right, left, center, i, j; if (newDimension > unitSize){ for(i = newDimension; i <= mapDimension; i += newDimension){ for(j = newDimension; j <= mapDimension; j += newDimension){ x = i - (newDimension / 2); y = j - (newDimension / 2); topLeft = map[i - newDimension][j - newDimension]; topRight = map[i][j - newDimension]; bottomLeft = map[i - newDimension][j]; bottomRight = map[i][j]; // Center map[x][y] = (topLeft + topRight + bottomLeft + bottomRight) / 4 + displace(dimension); map[x][y] = normalize(map[x][y]); center = map[x][y]; // Top if(j - (newDimension * 2) + (newDimension / 2) > 0){ map[x][j - newDimension] = (topLeft + topRight + center + map[x][j - dimension + (newDimension / 2)]) / 4 + displace(dimension);; }else{ map[x][j - newDimension] = (topLeft + topRight + center) / 3+ displace(dimension); } map[x][j - newDimension] = normalize(map[x][j - newDimension]); // Bottom if(j + (newDimension / 2) < mapDimension){ map[x][j] = (bottomLeft + bottomRight + center + map[x][j + (newDimension / 2)]) / 4+ displace(dimension); }else{ map[x][j] = (bottomLeft + bottomRight + center) / 3+ displace(dimension); } map[x][j] = normalize(map[x][j]); //Right if(i + (newDimension / 2) < mapDimension){ map[i][y] = (topRight + bottomRight + center + map[i + (newDimension / 2)][y]) / 4+ displace(dimension); }else{ map[i][y] = (topRight + bottomRight + center) / 3+ displace(dimension); } map[i][y] = normalize(map[i][y]); // Left if(i - (newDimension * 2) + (newDimension / 2) > 0){ map[i - newDimension][y] = (topLeft + bottomLeft + center + map[i - dimension + (newDimension / 2)][y]) / 4 + displace(dimension);; }else{ map[i - newDimension][y] = (topLeft + bottomLeft + center) / 3+ displace(dimension); } map[i - newDimension][y] = normalize(map[i - newDimension][y]); } } midpointDisplacment(newDimension); } }
// Draw the map function drawMap(size, canvasId, mapData){ var canvas = document.getElementById(canvasId), ctx = canvas.getContext("2d"), canvasData = ctx.getImageData(0, 0, mapDimension, mapDimension), x = 0, y = 0, r = 0, g = 0, b = 0, gamma = 500, colorFill = 0; for(x = 0; x <= size; x += unitSize){ for(y = 0; y <= size; y += unitSize){ colorFill = Math.floor(map[x][y] * 250); ctx.fillStyle = "rgb(" + colorFill + "," + colorFill + "," + colorFill +")"; ctx.fillRect (x, y, unitSize, unitSize); } } }
// Normalize the value to make sure its within bounds function normalize(value){ if( value > 1){ value = 1; }else if(value < 0){ value = 0; } return value; }
// Random function to offset the center function displace(num){ var max = num / (mapDimension + mapDimension) * roughness; return (Math.random(1.0)- 0.5) * max; }
startDisplacement();
Test of some perlin noise from the internet! - Script Codes
Test of some perlin noise from the internet! - Script Codes
Home Page Home
Developer Jeff Daze
Username jeffdaze
Uploaded January 18, 2023
Rating 3
Size 3,793 Kb
Views 10,120
Do you need developer help for Test of some perlin noise from the internet!?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Daze (jeffdaze) Script Codes
Name
Attempt to implement diamond square algorithm
Starfield using KineticJS
Tilemap Edge CSS
Corner Triangle
Winter Scene
Desktop Notifications
Quick torus demo three.js
Transparent Gradient
Circular Drag and Drop
Speed Reading
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!