JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<script src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
<script src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
<canvas id="myCanvas">Brian</canvas>

JavaScript

$(function() {
    function Vector(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
    
        this.addX = function(x) {
            this.x += x;
        };
    
        this.addY = function(y) {
            this.y += y;
        };
    
        this.addZ = function(z) {
            this.z += z;
        };
    
        this.set = function(x, y, z) {
            this.x = x;
            this.y = y;
            this.z = z;
        };
    }
    
    function PointCollection() {
        this.mousePos = new Vector(0, 0);
        this.pointCollectionX = 0;
        this.pointCollectionY = 0;
        this.points = []
    
        this.newPoint = function (x, y, z) {
            var point = new Point(x, y, z);
            this.points.push(point);
            return point;
        };
    
        this.update = function () {
            for(var i=0; i<this.points.length; i++) {
                var point = this.points[i];
    
                if (point === null) {
                    continue;
                }
    
                var dx = this.mousePos.x - point.curPos.x;
                var dy = this.mousePos.y - point.curPos.y;
                var dd = (dx * dx) + (dy * dy);
                var d = Math.sqrt(dd);
    
                if (d < 150) {
                    point.targetPos.x = (this.mousePos.x < point.curPos.x) ? point.curPos.x - dx : point.curPos.x - dx;
                    point.targetPos.y = (this.mousePos.y < point.curPos.y) ? point.curPos.y - dy : point.curPos.y - dy;
                }
                else {
                    point.targetPos.x = point.originalPos.x;
                    point.targetPos.y = point.originalPos.y;
                }
    
                point.update();
            }
        }
    
        this.shake = function() {
            var randomNum = Math.floor(Math.random() * 5) - 2;
    
            for(var i=0; i<this.points.length; i++) {
                var point = this.points[i];
    
               ...