Tutorial: How to get perlin noise in JSUI w/ mgraphics
Blair
Mar 18 2023 | 2:13 am
Sup gamerss, this is very obscure but on the offchance that somebody in like 5 years is looking for the perlin noise in jsui here you go. (the top code is an example of it in action)
mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;
var xoff = 0;
var yoff = 0;
function paint() {
mgraphics.redraw();
xoff += 0.01
yoff += 0.01
outlet(0, xoff)
mgraphics.set_source_rgb(0,0,0);
mgraphics.rectangle(((perlin.get(xoff,yoff)+1)/2)*169, 3, 10, 10);
mgraphics.fill();
}
//adapted from https://github.com/joeiddon/perlin
var perlin = {
rand_vect: function(){
var theta = Math.random() * 2 * Math.PI;
return {x: Math.cos(theta), y: Math.sin(theta)};
},
dot_prod_grid: function(x, y, vx, vy){
var g_vect;
var d_vect = {x: x - vx, y: y - vy};
if (this.gradients[[vx,vy]]){
g_vect = this.gradients[[vx,vy]];
} else {
g_vect = this.rand_vect();
this.gradients[[vx, vy]] = g_vect;
}
return d_vect.x * g_vect.x + d_vect.y * g_vect.y;
},
smootherstep: function(x){
return 6 * Math.pow(x, 5) - 15 * Math.pow(x, 4) + 10 * Math.pow(x, 3);
},
interp: function(x, a, b){
return a + this.smootherstep(x) * (b-a);
},
seed: function(){
this.gradients = {};
this.memory = {};
},
get: function(x, y) {
if (this.memory.hasOwnProperty([x,y]))
return this.memory[[x,y]];
var xf = Math.floor(x);
var yf = Math.floor(y);
//interpolate
var tl = this.dot_prod_grid(x, y, xf, yf);
var tr = this.dot_prod_grid(x, y, xf+1, yf);
var bl = this.dot_prod_grid(x, y, xf, yf+1);
var br = this.dot_prod_grid(x, y, xf+1, yf+1);
var xt = this.interp(x-xf, tl, tr);
var xb = this.interp(x-xf, bl, br);
var v = this.interp(y-yf, xt, xb);
this.memory[[x,y]] = v;
return v;
}
};
perlin.seed();