1d noise

1d-noise.markdown

1d noise

A Pen by KEILYN NUNEZ on CodePen.

License.

index.html

<!-- Motocross image base64 -->
<template>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xOdTWsmQAAALfSURBVEhLrVVLaBRBEN2NoqirB1Hw4MGD+ImHYNQQdme2IdMz09s9CfgZD56CQREPgmJAEFn1JniSIIIaPHjRg168CYoEQYwa/AYvXvwgRhEFxQ9ZfdXTO3F3Zpc1yYNH73ZVvaqu/kymGdrDcB6Nlls6ZHE5brtquNvzlmrjbMHmwT6IX4b4n5hc3YMpG3nMEMzrXQ3RqzUJIlaKjtho3KYP25UDWMHP+gSWq0a7hFgyKy2D4Gh9AiK1zrjMDIwFy9D3L7GwK9+AD6Pf6gXGY/m+vsXGfXqwuTwVJ+DyIiXFdLbgqq1I/gDzFV0EV2MFT3VEUf8JiDyPkshfYD9jLGdMGkzKFbC/jIpQdywhlhtT60BLbkRJ4nZ9xni8u3vHAuOSKXK5EwU8NvbTZrp1MBbm0KajCJ6oScbVXZj1/Sg6wRbbkQp+r7TNKwU03wxZ9HY3XTwE77IcKWw/6LSc0hokOog9ehYncuV+/L9Ge4IEk0j8w8zfpziscJvdE3SWy+U2oz0FIcR8xkubbU8eqQpqkpArP9bMNaBOxOUQHRa0coRaauRr4bruIuzJ7zSRRoToU4wVOiRGhpCtvnupQAvO1Qs1Y546gBaiuNebgmChkWmINuYF62xPddlu4GH5B1DdMIRQZXoC+Ewgjva0A/8rSHQFK7uE8bztlLaTTSsTir6y4aTPviZXnyxP7SUbEg3E8wnKm+RD7xk68C5h5+o67tncTMHv3YDlfks4gFQZ3eyEjcvvWMV7CA+ZQs4mfKrk8jD2oO57kWTULi6/IuEHCN7G6NPNpzaFYThH25Jxmij0CT0jU21KI849juP6Rt8QeixT46pEYfSMPEo1aspJ6rfRa4Qs/N6mxxPlCK3kRNIQ85YRagoIDabEatIrgLeK5VJXQyesR7QbnebAMwL/M4j757jTl1UOGo/4UTwJxzGM4zg1F5jvrzLmlpH3/bWI3QPxfibEymg2k/kLGmgFj+yZMV8AAAAASUVORK5CYII</template>

script.js

var c = document.createElement('canvas')
var ctx = c.getContext('2d')
document.body.appendChild(Object.assign(c, {width:innerWidth, height:innerWidth *0.5}));
var rect = [0,0,c.width,c.height];

var perm = [];
while(perm.length < 255){
  while(perm.includes(val = Math.floor(Math.random() * 255)));
  perm.push(val)
}

var noise = (x)=> {
  x = x%254;
  return lerp(perm[Math.floor(x)], perm[Math.ceil(x)], x-Math.floor(x))};

var lerp = (a,b,t) => a + (b-a) * ((1-Math.cos(t*Math.PI))/2);

var Moto = function(x, w){
  this.x = x || c.width/2;
  this.w = w || 0.1;
  this.y = 0;
  this.yS = 0;
  this.rot =  0;
  this.image = new Image();
  this.image.src = document.querySelector("template").innerHTML;

  this.draw = function(){
    var pp = c.height - noise(t + (this.x*0.01))*0.25;
    ctx.fillStyle = 'red';
    
  
    var grounded = 0.5;
    if(this.y < pp-10){
      this.yS += this.w;
    }else{
      this.yS -= this.y - (pp-10);
      this.y = pp-10;
      grounded = 1;
    }
    this.y += this.yS;
  
    ctx.save()
    ctx.translate(this.x,this.y)
    this.rot -= (this.rot - (this.yS * this.w * grounded)) * (0.025 - (-0.5 * grounded))
    ctx.rotate(this.rot)
    ctx.drawImage(this.image,-10, -10, 23,23)
    ctx.restore();
  }
}

var players = [new Moto(), new Moto(c.width*0.25, 0.15), new Moto(c.width*0.15, 0.075), new Moto(c.width*0.4,0.085), new Moto(c.width*0.65, 0.2)];

var t = 0;
loop();
function loop (){
  t+= .05
  ctx.fillStyle = '#19f'
  ctx.fillRect(...rect);
   ctx.beginPath();
   ctx.moveTo(0,c.height);
  for (let i = 0; i < c.width; i++)
    ctx.lineTo(i, c.height - noise(t + (i*0.01))*0.25);

  ctx.lineTo(c.width,c.height);
  ctx.fillStyle = '#345'
  ctx.fill();
  
  players.forEach(p => p.draw());
  
  requestAnimationFrame(loop)
}

style.css

body{
  margin:0;
  background-color:#345;
}