Perlin noise on worker

Developer
Darby Rathbone
Size
2,989 Kb
Views
30,360
  1. Perlin noise on worker Previews
  2. Perlin noise on worker HTML Codes
  3. Perlin noise on worker JS Codes

How do I make an perlin noise on worker?

Just my perlin noise object run on a web worker. What is a perlin noise on worker? How do you make a perlin noise on worker? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.

Perlin noise on worker Previews
IQ Test

Perlin noise on worker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perlin noise on worker</title>
</head>
<body> <script type="text/js-worker"> function ImprovedNoise(seed) { this.p = [512]; this.shuffle(seed); } ImprovedNoise.prototype = { shuffle: function() { var permutation = [256], i, j, tmp; for (i = 0; i < 256; i += 1) { permutation[i] = i; } for (i = 0; i < 256; i += 1) { j = ((Math.random() * (256 - i)) | 0) + i; tmp = permutation[i]; permutation[i] = permutation[j]; permutation[j] = tmp; this.p[i + 256] = this.p[i] = permutation[i]; } }, fade: function(t) { return t * t * t * (t * (t * 6 - 15) + 10); }, lerp: function(t, a, b) { return a + t * (b - a); }, grad: function(hash, x, y, z) { var h = (hash & 15) | 0, u = h < 8 ? x : y, // INTO 12 GRADIENT DIRECTIONS. v = h < 4 ? y : h === 12 || h === 14 ? x : z; return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v); }, noise: function(x, y, z) { var X = (x | 0 & 255) | 0, Y = (y | 0 & 255) | 0, Z = (z | 0 & 255) | 0; x -= x | 0; // FIND RELATIVE X,Y,Z y -= y | 0; // OF POINT IN CUBE. z -= z | 0; var u = this.fade(x), A = this.p[X] + Y, AA = this.p[A] + Z, AB = this.p[A + 1] + Z, B = this.p[X + 1] + Y, BA = this.p[B] + Z, BB = this.p[B + 1] + Z, v = this.fade(y), w = this.fade(z); A = A | 0; //garantir int B = B | 0; //garantir int return ((this.lerp(w, this.lerp(v, this.lerp(u, this.grad(this.p[AA], x, y, z), // AND ADD this.grad(this.p[BA], x - 1, y, z)), // BLENDED this.lerp(u, this.grad(this.p[AB], x, y - 1, z), // RESULTS this.grad(this.p[BB], x - 1, y - 1, z))), // FROM 8 this.lerp(v, this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), // CORNERS this.grad(this.p[BA + 1], x - 1, y, z - 1)), // OF CUBE this.lerp(u, this.grad(this.p[AB + 1], x, y - 1, z - 1), this.grad(this.p[BB + 1], x - 1, y - 1, z - 1))))) + 1) / 2; }, perlinNoise: function(x, y) { var n = 0.0, i, stepSize; for (i = 0; i < 8; i += 1) { stepSize = 64.0 / ((1 << i)); n += this.noise(x / stepSize, y / stepSize, 128) / (1 << i); } return n; } }; var n = new ImprovedNoise(); onmessage = function(oEvent) { var action = JSON.parse(oEvent.data); if (action.do ==="noise") { var aResults = []; for (var i = 0; i < action.width; i++) { for (var j = 0; j < action.height; j++) { aResults.push(n.noise(i / action.x, j / action.y, action.t)); } } if (action.round === true) { aResults.forEach( function(e, i, a) { a[i] = (a[i] * action.scale) | 0; }); } postMessage(aResults.join(",")); } };
</script> <script src="js/index.js"></script>
</body>
</html>

Perlin noise on worker - Script Codes JS Codes

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 32;
//canvas.style.zoom = "3";
canvas.height = 32;
ctx = canvas.getContext('2d');
canvas.style.zoom = "10";
var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imgdata.data;
var count = 1;
var button = document.createElement('button');
button.type = 'button';
button.innerText = "click me";
button.onclick = function () { doit();
};
document.body.appendChild(button);
function doit() { var action = { do :"noise", width: canvas.width, height: canvas.height, t: count, x: 5, y: 5, round: true, scale: 255 }; document.worker.postMessage(JSON.stringify(action)); count += 1.0 / 240.0;
}
var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent;
}), { type: "text/javascript"
});
document.worker = new Worker(window.URL.createObjectURL(blob));
document.worker.onmessage = function (oEvent) { var recdata = oEvent.data.split(','); for (var i = 0; i < recdata.length; i++) { data[i * 4] = recdata[i]; data[i * 4 + 1] = recdata[i]; data[i * 4 + 2] = recdata[i]; data[i * 4 + 3] = 255; } ctx.putImageData(imgdata, 0, 0); doit();
};
Perlin noise on worker - Script Codes
Perlin noise on worker - Script Codes
Home Page Home
Developer Darby Rathbone
Username blackkbot
Uploaded October 03, 2022
Rating 3
Size 2,989 Kb
Views 30,360
Do you need developer help for Perlin noise on worker?

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!

Darby Rathbone (blackkbot) Script Codes
Name
Sudoku grid
A Pen by Darby Rathbone
A linearly interpolated spline
Remote image
Ball physics
3d pure javascript 2d canvas
Pendulum
Slow Delaunay triangulation
3d css transformations
Jigsaw puzzle
Create amazing SEO content 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!