ErnstHot

Untitled

Aug 15th, 2020 (edited)
277
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  5.     <meta content="utf-8" http-equiv="encoding">
  6. </head>
  7. <html>
  8.  
  9. <body>
  10.  
  11.     <style>
  12.         body {
  13.             text-align: center;
  14.             width: 100%;
  15.             background-color: black;
  16.         }
  17.  
  18.         #myCanvas {
  19.             width: 100%;
  20.             height: 256px;
  21.             border: 1px solid #303030;
  22.             background-color: black;
  23.         }
  24.  
  25.         #frame {
  26.             margin: auto;
  27.             width: 1200px;
  28.         }
  29.     </style>
  30.  
  31.     <div id="frame">
  32.         <canvas id="myCanvas"></canvas>
  33.     </div>
  34.  
  35.     <script>
  36.         let canvas = document.getElementById("myCanvas");
  37.         let ctx = canvas.getContext("2d");
  38.  
  39.         canvas.width = canvas.offsetWidth;
  40.         canvas.height = canvas.offsetHeight;
  41.  
  42.         function Curve(y, delta, shape) {
  43.             this.y = y;
  44.             this.delta = delta;
  45.             this.shape = shape;
  46.         }
  47.  
  48.         function shaper(x, shape) {
  49.             return x / (x + (1.0 - (1.0 / shape)) * (x - 1.0));
  50.         }
  51.  
  52.         function lerp(x, a, b) {
  53.             return a + x * (b - a);
  54.         }
  55.  
  56.         let curveList = [
  57.             new Curve(1.0, 100.0, 0.75),
  58.             new Curve(0.0, 200.0, 0.25),
  59.             new Curve(0.5, 200.0, 0.25),
  60.             new Curve(0.0, 200.0, 0.85)
  61.         ];
  62.  
  63.         let h = canvas.height;
  64.         let w = canvas.width;
  65.         let x = 0;
  66.         let y = 0;
  67.  
  68.         ctx.beginPath();
  69.         ctx.moveTo(0, h);
  70.  
  71.         curveList.forEach(crv => {
  72.             let tx = x + crv.delta;
  73.             let ty = crv.y;
  74.             let steps = 100;
  75.             let shape = ty > y ? crv.shape : 1.0 - crv.shape;
  76.  
  77.             console.log("Point:");
  78.             console.log("  shape: " + crv.shape);
  79.             console.log("  x: " + x + ", tx: " + tx);
  80.             console.log("  y: " + y + ", ty: " + ty);
  81.  
  82.             for (let p = 0; p < 1.0; p += (1.0 / steps)) {
  83.                 let xp = lerp(p, x, tx);
  84.                 let yp = lerp(shaper(p, shape), y, ty);
  85.  
  86.                 ctx.lineTo(xp, h - yp * h);
  87.             }
  88.  
  89.             x = tx;
  90.             y = ty;
  91.         });
  92.  
  93.         ctx.strokeStyle = "#FFFFFFE0";
  94.         ctx.stroke();
  95.     </script>
  96.  
  97. </body>
  98.  
  99. </html>
Add Comment
Please, Sign In to add comment