bouncing-ball-d3
Version:
Bouncing Ball Graph Using d3 js
138 lines • 10.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/bouncing-ball.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component } from '@angular/core';
import * as d3 from 'd3';
var BouncingBallComponent = /** @class */ (function () {
function BouncingBallComponent() {
this.cx = 2;
this.cy = 2;
this.vx = 2;
this.vy = 5;
this.radius = 6;
this.gravity = 0.2;
this.damping = 0.85;
this.traction = 0.8;
this.paused = false;
this.width = 400;
this.height = 300;
}
/**
* @return {?}
*/
BouncingBallComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.rect = d3.select('svg').insert("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", this.width)
.attr("height", this.height)
.attr("fill", "black");
this.ball = d3.select('svg').insert("circle")
.attr("cx", this.cx)
.attr("cy", this.cy)
.attr("r", this.radius)
.attr("fill", "blue");
};
/**
* @return {?}
*/
BouncingBallComponent.prototype.onStartClick = /**
* @return {?}
*/
function () {
var _this = this;
setInterval((/**
* @return {?}
*/
function () { _this.drawBall(); }), 60);
};
/**
* @return {?}
*/
BouncingBallComponent.prototype.drawBall = /**
* @return {?}
*/
function () {
this.ball.attr("cx", this.moveX()).attr("cy", this.moveY());
};
/**
* @return {?}
*/
BouncingBallComponent.prototype.moveX = /**
* @return {?}
*/
function () {
if (this.cx + this.radius >= this.width) {
this.vx = -this.vx * this.damping;
this.cx = this.width - this.radius;
}
else if (this.cx - this.radius <= 0) {
this.vx = -this.vx * this.damping;
this.cx = this.radius;
}
this.cx += this.vx;
return this.cx;
};
/**
* @return {?}
*/
BouncingBallComponent.prototype.moveY = /**
* @return {?}
*/
function () {
if (this.cy + this.radius >= this.height) {
this.vy = -this.vy * this.damping;
this.cy = this.height - this.radius;
this.vx *= this.traction;
}
else if (this.cy - this.radius <= 0) {
this.vy = -this.vy * this.damping;
this.cy = this.radius;
}
this.vy += this.gravity;
this.cy += this.vy;
return this.cy;
};
BouncingBallComponent.decorators = [
{ type: Component, args: [{
selector: 'd3-BouncingBall',
template: "<p>\r\n <svg width='100%' height='1200' class='mySvg'></svg>\r\n</p>\r\n"
}] }
];
return BouncingBallComponent;
}());
export { BouncingBallComponent };
if (false) {
/** @type {?} */
BouncingBallComponent.prototype.cx;
/** @type {?} */
BouncingBallComponent.prototype.cy;
/** @type {?} */
BouncingBallComponent.prototype.vx;
/** @type {?} */
BouncingBallComponent.prototype.vy;
/** @type {?} */
BouncingBallComponent.prototype.radius;
/** @type {?} */
BouncingBallComponent.prototype.gravity;
/** @type {?} */
BouncingBallComponent.prototype.damping;
/** @type {?} */
BouncingBallComponent.prototype.traction;
/** @type {?} */
BouncingBallComponent.prototype.paused;
/** @type {?} */
BouncingBallComponent.prototype.rect;
/** @type {?} */
BouncingBallComponent.prototype.ball;
/** @type {?} */
BouncingBallComponent.prototype.width;
/** @type {?} */
BouncingBallComponent.prototype.height;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm91bmNpbmctYmFsbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9ib3VuY2luZy1iYWxsLyIsInNvdXJjZXMiOlsibGliL2JvdW5jaW5nLWJhbGwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBb0IsTUFBTSxlQUFlLENBQUM7QUFDNUQsT0FBTyxLQUFLLEVBQUUsTUFBTSxJQUFJLENBQUM7QUFHekI7SUFBQTtRQVFFLE9BQUUsR0FBRyxDQUFDLENBQUM7UUFDUCxPQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ1AsT0FBRSxHQUFHLENBQUMsQ0FBQztRQUNQLE9BQUUsR0FBRyxDQUFDLENBQUM7UUFDUCxXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsWUFBTyxHQUFHLEdBQUcsQ0FBQztRQUNkLFlBQU8sR0FBRyxJQUFJLENBQUM7UUFDZixhQUFRLEdBQUcsR0FBRyxDQUFDO1FBQ2YsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUdmLFVBQUssR0FBRyxHQUFHLENBQUM7UUFDWixXQUFNLEdBQUcsR0FBRyxDQUFDO0lBb0RmLENBQUM7Ozs7SUFsREMsa0RBQWtCOzs7SUFBbEI7UUFFRSxJQUFJLENBQUMsSUFBSSxHQUFHLEVBQUUsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQzthQUN4QyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQzthQUNaLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO2FBQ1osSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO2FBQ3pCLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQzthQUMzQixJQUFJLENBQUMsTUFBTSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBRXpCLElBQUksQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxN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OztJQUNmLHFDQUFVOztJQUNWLHFDQUFVOztJQUNWLHNDQUFZOztJQUNaLHVDQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBBZnRlckNvbnRlbnRJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgKiBhcyBkMyBmcm9tICdkMyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZDMtQm91bmNpbmdCYWxsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JvdW5jaW5nLWJhbGwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIEJvdW5jaW5nQmFsbENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG5cbiAgY3ggPSAyO1xuICBjeSA9IDI7XG4gIHZ4ID0gMjtcbiAgdnkgPSA1O1xuICByYWRpdXMgPSA2O1xuICBncmF2aXR5ID0gMC4yO1xuICBkYW1waW5nID0gMC44NTtcbiAgdHJhY3Rpb24gPSAwLjg7XG4gIHBhdXNlZCA9IGZhbHNlO1xuICByZWN0OiBhbnk7XG4gIGJhbGw6IGFueTtcbiAgd2lkdGggPSA0MDA7XG4gIGhlaWdodCA9IDMwMDtcblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG5cbiAgICB0aGlzLnJlY3QgPSBkMy5zZWxlY3QoJ3N2ZycpLmluc2VydChcInJlY3RcIilcbiAgICAgIC5hdHRyKFwieFwiLCAwKVxuICAgICAgLmF0dHIoXCJ5XCIsIDApXG4gICAgICAuYXR0cihcIndpZHRoXCIsIHRoaXMud2lkdGgpXG4gICAgICAuYXR0cihcImhlaWdodFwiLCB0aGlzLmhlaWdodClcbiAgICAgIC5hdHRyKFwiZmlsbFwiLCBcImJsYWNrXCIpO1xuXG4gICAgdGhpcy5iYWxsID0gZDMuc2VsZWN0KCdzdmcnKS5pbnNlcnQoXCJjaXJjbGVcIilcbiAgICAgIC5hdHRyKFwiY3hcIiwgdGhpcy5jeClcbiAgICAgIC5hdHRyKFwiY3lcIiwgdGhpcy5jeSlcbiAgICAgIC5hdHRyKFwiclwiLCB0aGlzLnJhZGl1cylcbiAgICAgIC5hdHRyKFwiZmlsbFwiLCBcImJsdWVcIik7XG4gIH1cblxuICBvblN0YXJ0Q2xpY2soKSB7XG4gICAgc2V0SW50ZXJ2YWwoKCkgPT4geyB0aGlzLmRyYXdCYWxsKCk7IH0sIDYwKTtcbiAgfVxuXG4gIGRyYXdCYWxsKCkge1xuICAgIHRoaXMuYmFsbC5hdHRyKFwiY3hcIiwgdGhpcy5tb3ZlWCgpKS5hdHRyKFwiY3lcIiwgdGhpcy5tb3ZlWSgpKTtcbiAgfVxuXG4gIG1vdmVYKCkge1xuICAgIGlmICh0aGlzLmN4ICsgdGhpcy5yYWRpdXMgPj0gdGhpcy53aWR0aCkge1xuICAgICAgdGhpcy52eCA9IC10aGlzLnZ4ICogdGhpcy5kYW1waW5nO1xuICAgICAgdGhpcy5jeCA9IHRoaXMud2lkdGggLSB0aGlzLnJhZGl1cztcbiAgICB9IGVsc2UgaWYgKHRoaXMuY3ggLSB0aGlzLnJhZGl1cyA8PSAwKSB7XG4gICAgICB0aGlzLnZ4ID0gLXRoaXMudnggKiB0aGlzLmRhbXBpbmc7XG4gICAgICB0aGlzLmN4ID0gdGhpcy5yYWRpdXM7XG4gICAgfVxuICAgIHRoaXMuY3ggKz0gdGhpcy52eDtcbiAgICByZXR1cm4gdGhpcy5jeDtcbiAgfVxuXG4gIG1vdmVZKCkge1xuICAgIGlmICh0aGlzLmN5ICsgdGhpcy5yYWRpdXMgPj0gdGhpcy5oZWlnaHQpIHtcbiAgICAgIHRoaXMudnkgPSAtdGhpcy52eSAqIHRoaXMuZGFtcGluZztcbiAgICAgIHRoaXMuY3kgPSB0aGlzLmhlaWdodCAtIHRoaXMucmFkaXVzO1xuICAgICAgdGhpcy52eCAqPSB0aGlzLnRyYWN0aW9uO1xuICAgIH0gZWxzZSBpZiAodGhpcy5jeSAtIHRoaXMucmFkaXVzIDw9IDApIHtcbiAgICAgIHRoaXMudnkgPSAtdGhpcy52eSAqIHRoaXMuZGFtcGluZztcbiAgICAgIHRoaXMuY3kgPSB0aGlzLnJhZGl1cztcbiAgICB9XG4gICAgdGhpcy52eSArPSB0aGlzLmdyYXZpdHk7XG4gICAgdGhpcy5jeSArPSB0aGlzLnZ5O1xuICAgIHJldHVybiB0aGlzLmN5O1xuICB9XG5cbn1cbiJdfQ==