bouncing-ball-d3
Version:
Bouncing Ball Graph Using d3 js
120 lines • 9.52 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';
export class BouncingBallComponent {
constructor() {
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 {?}
*/
ngAfterContentInit() {
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 {?}
*/
onStartClick() {
setInterval((/**
* @return {?}
*/
() => { this.drawBall(); }), 60);
}
/**
* @return {?}
*/
drawBall() {
this.ball.attr("cx", this.moveX()).attr("cy", this.moveY());
}
/**
* @return {?}
*/
moveX() {
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 {?}
*/
moveY() {
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"
}] }
];
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm91bmNpbmctYmFsbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9ib3VuY2luZy1iYWxsLyIsInNvdXJjZXMiOlsibGliL2JvdW5jaW5nLWJhbGwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBb0IsTUFBTSxlQUFlLENBQUM7QUFDNUQsT0FBTyxLQUFLLEVBQUUsTUFBTSxJQUFJLENBQUM7QUFRekIsTUFBTSxPQUFPLHFCQUFxQjtJQUxsQztRQVFFLE9BQUUsR0FBRyxDQUFDLENBQUM7UUFDUCxPQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ1AsT0FBRSxHQUFHLENBQUMsQ0FBQztRQUNQLE9BQUUsR0FBRyxDQUFDLENBQUM7UUFDUCxXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsWUFBTyxHQUFHLEdBQUcsQ0FBQztRQUNkLFlBQU8sR0FBRyxJQUFJLENBQUM7UUFDZixhQUFRLEdBQUcsR0FBRyxDQUFDO1FBQ2YsV0FBTSxHQUFHLEtBQUssQ0FBQztRQUdmLFVBQUssR0FBRyxHQUFHLENBQUM7UUFDWixXQUFNLEdBQUcsR0FBRyxDQUFDO0lBb0RmLENBQUM7Ozs7SUFsREMsa0JBQWtCO1FBRWhCLElBQUksQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDO2FBQ3hDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO2FBQ1osSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7YUFDWixJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxLQUFLLENBQUM7YUFDekIsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDO2FBQzNCLElBQUksQ0FBQyxNQUFNLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFFekIsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLENBQUMsTUFBTSxDQUFDLEtBQUss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OlsiaW1wb3J0IHsgQ29tcG9uZW50LCBBZnRlckNvbnRlbnRJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgKiBhcyBkMyBmcm9tICdkMyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZDMtQm91bmNpbmdCYWxsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JvdW5jaW5nLWJhbGwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIEJvdW5jaW5nQmFsbENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG5cbiAgY3ggPSAyO1xuICBjeSA9IDI7XG4gIHZ4ID0gMjtcbiAgdnkgPSA1O1xuICByYWRpdXMgPSA2O1xuICBncmF2aXR5ID0gMC4yO1xuICBkYW1waW5nID0gMC44NTtcbiAgdHJhY3Rpb24gPSAwLjg7XG4gIHBhdXNlZCA9IGZhbHNlO1xuICByZWN0OiBhbnk7XG4gIGJhbGw6IGFueTtcbiAgd2lkdGggPSA0MDA7XG4gIGhlaWdodCA9IDMwMDtcblxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG5cbiAgICB0aGlzLnJlY3QgPSBkMy5zZWxlY3QoJ3N2ZycpLmluc2VydChcInJlY3RcIilcbiAgICAgIC5hdHRyKFwieFwiLCAwKVxuICAgICAgLmF0dHIoXCJ5XCIsIDApXG4gICAgICAuYXR0cihcIndpZHRoXCIsIHRoaXMud2lkdGgpXG4gICAgICAuYXR0cihcImhlaWdodFwiLCB0aGlzLmhlaWdodClcbiAgICAgIC5hdHRyKFwiZmlsbFwiLCBcImJsYWNrXCIpO1xuXG4gICAgdGhpcy5iYWxsID0gZDMuc2VsZWN0KCdzdmcnKS5pbnNlcnQoXCJjaXJjbGVcIilcbiAgICAgIC5hdHRyKFwiY3hcIiwgdGhpcy5jeClcbiAgICAgIC5hdHRyKFwiY3lcIiwgdGhpcy5jeSlcbiAgICAgIC5hdHRyKFwiclwiLCB0aGlzLnJhZGl1cylcbiAgICAgIC5hdHRyKFwiZmlsbFwiLCBcImJsdWVcIik7XG4gIH1cblxuICBvblN0YXJ0Q2xpY2soKSB7XG4gICAgc2V0SW50ZXJ2YWwoKCkgPT4geyB0aGlzLmRyYXdCYWxsKCk7IH0sIDYwKTtcbiAgfVxuXG4gIGRyYXdCYWxsKCkge1xuICAgIHRoaXMuYmFsbC5hdHRyKFwiY3hcIiwgdGhpcy5tb3ZlWCgpKS5hdHRyKFwiY3lcIiwgdGhpcy5tb3ZlWSgpKTtcbiAgfVxuXG4gIG1vdmVYKCkge1xuICAgIGlmICh0aGlzLmN4ICsgdGhpcy5yYWRpdXMgPj0gdGhpcy53aWR0aCkge1xuICAgICAgdGhpcy52eCA9IC10aGlzLnZ4ICogdGhpcy5kYW1waW5nO1xuICAgICAgdGhpcy5jeCA9IHRoaXMud2lkdGggLSB0aGlzLnJhZGl1cztcbiAgICB9IGVsc2UgaWYgKHRoaXMuY3ggLSB0aGlzLnJhZGl1cyA8PSAwKSB7XG4gICAgICB0aGlzLnZ4ID0gLXRoaXMudnggKiB0aGlzLmRhbXBpbmc7XG4gICAgICB0aGlzLmN4ID0gdGhpcy5yYWRpdXM7XG4gICAgfVxuICAgIHRoaXMuY3ggKz0gdGhpcy52eDtcbiAgICByZXR1cm4gdGhpcy5jeDtcbiAgfVxuXG4gIG1vdmVZKCkge1xuICAgIGlmICh0aGlzLmN5ICsgdGhpcy5yYWRpdXMgPj0gdGhpcy5oZWlnaHQpIHtcbiAgICAgIHRoaXMudnkgPSAtdGhpcy52eSAqIHRoaXMuZGFtcGluZztcbiAgICAgIHRoaXMuY3kgPSB0aGlzLmhlaWdodCAtIHRoaXMucmFkaXVzO1xuICAgICAgdGhpcy52eCAqPSB0aGlzLnRyYWN0aW9uO1xuICAgIH0gZWxzZSBpZiAodGhpcy5jeSAtIHRoaXMucmFkaXVzIDw9IDApIHtcbiAgICAgIHRoaXMudnkgPSAtdGhpcy52eSAqIHRoaXMuZGFtcGluZztcbiAgICAgIHRoaXMuY3kgPSB0aGlzLnJhZGl1cztcbiAgICB9XG4gICAgdGhpcy52eSArPSB0aGlzLmdyYXZpdHk7XG4gICAgdGhpcy5jeSArPSB0aGlzLnZ5O1xuICAgIHJldHVybiB0aGlzLmN5O1xuICB9XG5cbn1cbiJdfQ==