294 lines
8.8 KiB
JavaScript
294 lines
8.8 KiB
JavaScript
|
|
|
|
function newBall() {
|
|
|
|
var ball = {
|
|
|
|
currentPosition: 0, // Current x,y position of the ball at the ball's layer, where there is no displacement or zoom. This position is always changing towards the target position.
|
|
currentSpeed: 0, // This is the current speed of the ball.
|
|
currentRadius: 0, // This is the current radius of the ball, including its zoom applied.
|
|
currentMass: 0, // This is the current mass of the ball, including its zoom applied.
|
|
|
|
friction: 0, // This is a factor that will ultimatelly desacelerate the ball.
|
|
|
|
rawPosition: 0, // This is the position on the canvas layer, withous displacement or zoom.
|
|
rawMass: 0, // This is the mass value without zoom.
|
|
rawRadius: 0, // This is the radius of this ball without zoom.
|
|
|
|
targetPosition: 0, // This is the position of the ball at the canvas plane. This position has the displacement and zoom applied.
|
|
targetRadius: 0, // This is the target radius of the ball with zoom applied. It should be animated until reaching this value.
|
|
|
|
fillStyle: '',
|
|
|
|
labelStrokeStyle: '',
|
|
labelFirstText: '',
|
|
labelSecondText: '',
|
|
|
|
radomizeCurrentPosition: radomizeCurrentPosition,
|
|
radomizeCurrentSpeed: radomizeCurrentSpeed,
|
|
initializeTargetPosition: initializeTargetPosition,
|
|
initializeMass: initializeMass,
|
|
initializeRadius: initializeRadius,
|
|
|
|
drawBackground: drawBallBackgrond, // Function to draw the ball elements on the canvas layer.
|
|
drawForeground: drawBallForeground, // Function to draw the ball elements on the balls layer.
|
|
|
|
updateMass: updateMass, // Function to update the mass when the zoom level changed.
|
|
updateRadius: updateRadius, // Function to update the radius when the zoom level changed.
|
|
updatePosition: updatePosition, // Function to update the target position when either the displacement changed or the zoom level changed.
|
|
|
|
linkedObject: undefined, // This is a reference to the object that this ball is representing.
|
|
linkedObjectType: "", // Since there might be balls for different types of objects, here we store the type of object we are linking to.
|
|
|
|
container: undefined // This is a pointer to the object where the ball belongs to.
|
|
|
|
};
|
|
|
|
return ball;
|
|
|
|
|
|
function initializeTargetPosition() {
|
|
|
|
/* The initialization is based on the rawPosition that must be set before calling this function. */
|
|
|
|
var targetPosition = {
|
|
x: this.rawPosition.x,
|
|
y: this.rawPosition.y
|
|
};
|
|
|
|
targetPosition = this.container.frame.frameThisPoint(targetPosition);
|
|
targetPosition = this.container.displacement.displaceThisPoint(targetPosition);
|
|
targetPosition = this.container.zoom.zoomThisPoint(targetPosition);
|
|
|
|
this.targetPosition = targetPosition;
|
|
|
|
// We dont need this now> smallBalls.push ([targetPosition.x, targetPosition.y, 3, 'rgba(30, 130, 30, 0.85)']);
|
|
|
|
}
|
|
|
|
function initializeMass(suggestedValue) {
|
|
|
|
var mass = suggestedValue;
|
|
if (mass < 0.1) {
|
|
mass = 0.1;
|
|
}
|
|
|
|
this.rawMass = mass;
|
|
this.currentMass = mass;
|
|
|
|
}
|
|
|
|
function initializeRadius(suggestedValue) {
|
|
|
|
var radius = suggestedValue;
|
|
if (radius < 2) {
|
|
radius = 2;
|
|
}
|
|
|
|
this.rawRadius = radius;
|
|
this.targetRadius = radius;
|
|
this.currentRadius = radius / 3;
|
|
|
|
}
|
|
|
|
|
|
function radomizeCurrentPosition(arroundPoint) {
|
|
|
|
var position = {
|
|
x: Math.floor((Math.random() * (200) - 100)) + arroundPoint.x,
|
|
y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y
|
|
};
|
|
|
|
this.currentPosition = position;
|
|
}
|
|
|
|
function radomizeCurrentSpeed() {
|
|
|
|
var initialXDirection;
|
|
var randomX = Math.floor((Math.random() * 10) + 1);
|
|
if (randomX > 5) {
|
|
initialXDirection = 1;
|
|
} else {
|
|
initialXDirection = - 1;
|
|
}
|
|
|
|
var initialYDirection;
|
|
var randomY = Math.floor((Math.random() * 10) + 1);
|
|
if (randomY > 5) {
|
|
initialYDirection = 1;
|
|
} else {
|
|
initialYDirection = - 1;
|
|
}
|
|
|
|
var velocity = {
|
|
x: initialXDirection * Math.floor((Math.random() * 300) + 1) / 100,
|
|
y: initialYDirection * Math.floor((Math.random() * 300) + 1) / 100
|
|
};
|
|
|
|
this.currentSpeed = velocity;
|
|
}
|
|
|
|
function updateMass() {
|
|
|
|
this.currentMass = this.rawMass + this.rawMass * this.container.zoom.incrementM * this.container.zoom.levelM;
|
|
|
|
}
|
|
|
|
function updateRadius() {
|
|
|
|
|
|
this.targetRadius = this.rawRadius + this.rawRadius * this.container.zoom.incrementR * this.container.zoom.levelR;
|
|
|
|
}
|
|
|
|
function updatePosition() {
|
|
|
|
var point = {
|
|
x: this.rawPosition.x,
|
|
y: this.rawPosition.y
|
|
};
|
|
|
|
/* Frame the point */
|
|
|
|
point = this.container.frame.frameThisPoint(point);
|
|
|
|
/* Second we apply the displacement. */
|
|
|
|
point = this.container.displacement.displaceThisPoint(point);
|
|
|
|
/* Third we apply the zoom factor. */
|
|
|
|
point = this.container.zoom.zoomThisPoint(point);
|
|
|
|
this.targetPosition.x = point.x;
|
|
this.targetPosition.y = point.y;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function drawBallBackgrond() {
|
|
|
|
if (this.currentRadius > 1) {
|
|
|
|
/* Target Line */
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.moveTo(this.currentPosition.x, this.currentPosition.y);
|
|
browserCanvasContext.lineTo(this.targetPosition.x, this.targetPosition.y);
|
|
browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)';
|
|
browserCanvasContext.setLineDash([4, 2]);
|
|
browserCanvasContext.lineWidth = 1;
|
|
browserCanvasContext.stroke();
|
|
browserCanvasContext.setLineDash([0, 0]);
|
|
|
|
}
|
|
|
|
if (this.currentRadius > 0.5) {
|
|
|
|
/* Target Spot */
|
|
|
|
var radius = 1;
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.arc(this.targetPosition.x, this.targetPosition.y, radius, 0, Math.PI * 2, true);
|
|
browserCanvasContext.closePath();
|
|
browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)';
|
|
browserCanvasContext.fill();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function drawBallForeground() {
|
|
|
|
|
|
if (this.currentRadius > 5) {
|
|
|
|
/* Contourn */
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true);
|
|
browserCanvasContext.closePath();
|
|
browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)';
|
|
browserCanvasContext.lineWidth = 1;
|
|
browserCanvasContext.stroke();
|
|
|
|
}
|
|
|
|
if (this.currentRadius > 0.5) {
|
|
|
|
/* Main Ball */
|
|
|
|
var alphaA;
|
|
|
|
if (this.currentRadius < 3) {
|
|
alphaA = 1;
|
|
} else {
|
|
alphaA = 0.75;
|
|
}
|
|
|
|
alphaA = 0.75;
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true);
|
|
browserCanvasContext.closePath();
|
|
|
|
browserCanvasContext.fillStyle = this.fillStyle;
|
|
|
|
browserCanvasContext.fill();
|
|
|
|
}
|
|
|
|
/* Label First Text */
|
|
|
|
if (this.currentRadius > 6) {
|
|
|
|
browserCanvasContext.strokeStyle = this.labelStrokeStyle;
|
|
|
|
var xOffset = 0;
|
|
|
|
if (this.labelFirstText >= 10) {
|
|
xOffset = this.currentRadius / 10;
|
|
}
|
|
|
|
browserCanvasContext.font = (this.currentRadius / 4).toFixed(0) + 'px verdana';
|
|
|
|
try {
|
|
browserCanvasContext.fillText(this.labelFirstText.toFixed(0), this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2);
|
|
} catch (err) {
|
|
browserCanvasContext.fillText(this.labelFirstText, this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* Label Second Text */
|
|
|
|
if (this.currentRadius > 10) {
|
|
|
|
browserCanvasContext.strokeStyle = this.labelStrokeStyle;
|
|
|
|
var xOffset = 0;
|
|
|
|
|
|
xOffset = this.currentRadius / 2;
|
|
|
|
|
|
browserCanvasContext.font = (this.currentRadius / 6).toFixed(0) + 'px verdana';
|
|
|
|
try {
|
|
browserCanvasContext.fillText(this.labelSecondText.toFixed(8), this.currentPosition.x - xOffset, this.currentPosition.y + xOffset);
|
|
} catch (err) {
|
|
browserCanvasContext.fillText(this.labelSecondText, this.currentPosition.x - xOffset, this.currentPosition.y + xOffset);
|
|
}
|
|
}
|
|
}
|
|
|