JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script> 
function setup() {
  createCanvas(windowWidth, windowHeight);
  translate(width/2, height/2);
  background(255);
  
  
  let angle = random(PI);
  let tx = random(50);
  let ty = random(50);
  let px = random(50);
  let py = random(50);
  
  // A: draw point with rotate / translate / point
  push();
  rotate(angle);
  translate(tx, ty);
  strokeWeight(15);
  stroke('red');
  point(px, py);
  pop();
 
  // B draw point with point / translate / rotate (same values)
  strokeWeight(5);
  stroke('yellow');
  point(px, py);
  //  point after translation :
  stroke('orange');
  
  point(px+tx, py+ty);
  // point after rotation :
  strokeWeight(10);
  stroke('green');
  point((px+tx)* cos(angle) - (py+ty) * sin(angle),(px+tx)* sin(angle) + (py+ty) * cos(angle) );
 }
</script>