Fractals Tree

fractalsTree.re

open Reprocessing;

module Constants = {
  module Window = {
    let width = 600;
    let height = 600;
  };

  module Color = {
    let black = Constants.black;
    let white = Constants.white;
  };

  let lineLength = 200;
};

type stateT = {angle: float};

let rec branch = (~lineLength, ~angle, env) => {
  Draw.line(~p1=(0, 0), ~p2=(0, - lineLength), env);
  Draw.translate(~x=0., ~y=float_of_int(- lineLength), env);
  if (lineLength > 10) {
    Draw.pushMatrix(env);
    Draw.rotate(angle, env);
    branch(~lineLength=lineLength * 2 / 3, ~angle, env);
    Draw.popMatrix(env);
    Draw.pushMatrix(env);
    Draw.rotate(-. angle, env);
    branch(~lineLength=lineLength * 2 / 3, ~angle, env);
    Draw.popMatrix(env);
  };
};

let setup = env => {
  open Constants.Window;
  Env.size(~width, ~height, env);
  {angle: 0.};
};

let draw = (state, env) => {
  open Constants.Window;
  Draw.background(Constants.Color.black, env);
  Draw.stroke(Constants.Color.white, env);
  Draw.strokeWeight(1, env);
  Draw.translate(~x=300., ~y=float_of_int(height), env);
  branch(~lineLength=Constants.lineLength, ~angle=state.angle, env);
  let (_mouseX, mouseY) = Reprocessing.Env.pmouse(env);
  let radians = float_of_int(mouseY) *. 1.5 /. float_of_int(width) *. 90.;
  let degree = Reprocessing.Utils.radians(radians);
  {angle: degree};
};

run(~setup, ~draw, ());

Notes:

• Learning about Processing JS on Youtube.
• Learning about Reprocessing by creating game

The result if you change the angle.