Skip to content

Instantly share code, notes, and snippets.

@idettman
Created May 16, 2019 04:22
Show Gist options
  • Select an option

  • Save idettman/e87cbcac7e4f3ac549d39bf5ab2ca422 to your computer and use it in GitHub Desktop.

Select an option

Save idettman/e87cbcac7e4f3ac549d39bf5ab2ca422 to your computer and use it in GitHub Desktop.
Noise monotone increasing
<canvas width="512" height="256"></canvas>
<h3>Strictly Monotone Increasing Noise Function</h3>
console.clear();
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
function genSequence(num, depth) {
var sequence = [];
var sum = 0;
for (var i = 0; i < num; ++i) {
var random = Math.floor(Math.random() * depth) + 1;
sequence[i] = random;
sum += random;
}
var nominator = 0;
for (var i = 0; i < num; ++i) {
nominator += sequence[i];
sequence[i] = nominator / sum;
}
return sequence;
}
var num = 64;
var roughness = 1024.0;
var sequence;
function run() {
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
sequence = genSequence(num, roughness);
context.clearRect(0, 0, w, h);
context.beginPath();
context.strokeStyle = "#00FF00";
context.lineWidth = 2;
context.moveTo(0, h);
for (var i = 0; i < num; ++i) {
context.lineTo(
(i + 1) * (w / num) + 0.5, (h - sequence[i] * h) + 0.5);
}
context.stroke();
context.closePath();
}
setInterval(run, 500);
run();
html, body {
margin: 0;
padding: 0;
font-family: Open Sans;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
background-color: black;
}
h3 {
top: 0;
color: #00FF00;
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment