JSFiddle - React, Tailwind, and code Playground

by DupontTD

JavaScript

const sin = Math.sin;
const cos = Math.cos;
const theta = Math.PI/4;
const zoom = 20;
const offset = [1, -3];
const pipeline = [
  function rotate({x,y} = p) {
     return {
      x: x * Math.ceil(cos(theta) - y * sin(theta)),
      y: x * Math.ceil(sin(theta) + y * cos(theta)),
    };
  },
  function scale({x,y} = p) {
  	return { x: x * zoom, y: y * zoom };
  },
  function translate({x,y} = p) {
  	return { x: x + offset[0], y: y + offset[1] };
  }
];


const p = { x: 10, y: 1 };
let p2 = p;
html = `At first		: [${p2.x},${p2.y}]  </br>`;

for(let action of pipeline) {
   p2 = action(p2);
   html+=(  
   `after ${action.name} : [${p2.x},${p2.y}] </br>`);
}
document.body.innerHTML= html;