JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="mycanvas"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

</script>
<script type="application/processing" data-processing-target="mycanvas">

float h = 120;
float a = 25*PI/180;

void setup() {  
  size(400, 400);
}

void branch(float h) {
	h *= 0.6;

    if (h > 10) {
      pushMatrix();
      rotate(a);
      line(0, 0, 0, -h);
      fill(0, 175, 0, 100);
      if (h < 50) {
        ellipse(0, -h, 5, 5);
      }
      translate(0, -h);
      branch(h);
      popMatrix();
    } // closing the if statement

} // closing branch

void draw() {
  background(255);
  
  pushMatrix();
  translate(width/2, height);
  stroke(0, 0, 255);
  line(0, 0, 0, -h);
  translate(0, -h);
  branch(h);
  popMatrix();
  
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 5, 5);
  text(mouseX + ", " + mouseY, mouseX + 5, mouseY - 5);
}