simpleanim.re

open ReasonJs;
open Dom;
open Document;

type ctx;
type canvas;

external pi : float = "Math.PI" [@@bs.val];
external sin : float => float = "Math.sin" [@@bs.val];
external cos : float => float = "Math.cos" [@@bs.val];
external tan : float => float = "Math.tan" [@@bs.val];
external setWidth : 'a => float => unit = "width" [@@bs.set];
external width : 'a => float = "width" [@@bs.get];
external height : 'a => float = "height" [@@bs.get];
external fillRect : GlRe.glT => float => float => float => float => unit = "" [@@bs.send];
external setFillStyle : GlRe.glT => string => unit = "fillStyle" [@@bs.set];
external setGlobalAlpha : GlRe.glT => float => unit = "globalAlpha" [@@bs.set];

let anim _ => {
  let canvas = switch (querySelector "canvas#a" document) {
  | Some el => el
  | None => raise (Invalid_argument "Passed `None` to unwrapUnsafely")
  };
  let context = CanvasElement.getContext canvas "2d";
  let canvasWidth = width canvas;
  let canvasHeight = height canvas;

  let u t => {
    let _ = setGlobalAlpha context 0.15;
    setFillStyle context "#000";
    fillRect context 0.0 0.0 (width canvas) (height canvas);
    let _ = setGlobalAlpha context 1.0;
    let v = 8.0 +. sin(t *. 1.5) *. 8.0;

    for j in 1 to (int_of_float v) {
      let _h = string_of_float @@ t *. 699.0 -. (float j) *. 20.0;
      let _s = "99%";
      let _l = "50%";

      setFillStyle context ("hsl(" ^ _h ^ "," ^ _s ^ "," ^ _l ^ ")");

      let s = ((float j) +. 1.0) *. 8.0;
      let l = 30.0 *. (1.0 +. (float j) /. 10.0);
      let sd = (j + 3);

      for i in 1 to sd {
        let p = 6.2 /. (float sd) *. (float i) +. (cos (t *. 3.0)) /. 2.0 *. (j mod 2 == 0 ? 2.0 : (-2.0));
        let _x = (float j) *. l *. sin p;
        let _y = (float j) *. l *. cos p;
        fillRect context (0.5 *. canvasWidth +. _x) (0.5 *. canvasHeight +. _y) s s;
      }
    }
  };

  let rec bar t => {
    let now = Js.Date.now ();
    let interval = (now -. t) /. 1000.0;
    u interval;
    let _ = requestAnimationFrame (fun _ => bar t);
  };

  let _ = requestAnimationFrame (fun _ => bar @@ Js.Date.now ());
};