transformation inheritance

In this example below you will see how to do a transformation inheritance with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bildepunkt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bildepunkt ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>transformation inheritance</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas height='480' width='640'></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bildepunkt/transformation-inheritance-vNZYGw */
canvas {
  border: 1px dotted gray;
}


/*Downloaded from https://www.codeseek.co/bildepunkt/transformation-inheritance-vNZYGw */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var can = document.querySelector('canvas');
var ctx = can.getContext('2d');
var angle = 1;
var pool = [];
var s = void 0,
    g = void 0;

var Sprite = function () {
    function Sprite(x, y, w, h) {
        _classCallCheck(this, Sprite);

        this.x = x || 0;
        this.y = y || 0;
        this.w = w || 16;
        this.h = h || 16;

        this.px = this.x;
        this.py = this.y;
    }

    _createClass(Sprite, [{
        key: 'getGlobX',
        value: function getGlobX() {
            return this.px + this.x;
        }
    }, {
        key: 'getGlobY',
        value: function getGlobY() {
            return this.py + this.y;
        }
    }]);

    return Sprite;
}();

var Group = function () {
    function Group(x, y) {
        _classCallCheck(this, Group);

        this.x = x || 0;
        this.y = y || 0;
        this.items = [];
    }

    _createClass(Group, [{
        key: 'addChild',
        value: function addChild(child) {
            child.px = this.x;
            child.py = this.y;

            this.items.push(child);
        }
    }]);

    return Group;
}();

function rotatePoint(originX, originY, pointX, pointY, angle) {
    angle = angle > 360 ? angle % 360 : angle;

    angle = angle * Math.PI / 180;

    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    return {
        x: cos * (pointX - originX) - sin * (pointY - originY) + originX,
        y: sin * (pointX - originX) + cos * (pointY - originY) + originY
    };
}

function draw(item) {
    ctx.fillRect(item.getGlobX() - item.w / 2, item.getGlobY() - item.h / 2, item.w, item.h);
}

function update() {
    ctx.clearRect(0, 0, 640, 480);

    var rotatedPt = rotatePoint(0, 0, s.x, s.y, angle);

    s.x = rotatedPt.x;
    s.y = rotatedPt.y;

    draw(s);

    requestAnimationFrame(update);
}

function init() {
    g = new Group(64, 64);
    s = new Sprite(64);

    g.addChild(s);

    update();
}

init();

Comments