fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Profile Picture being Shown at Trading Data

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2018-04-22 10:36:53 +02:00
1 parent e41e069caf
commit 8f20589147
6 files changed
+121 -87
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vs/AAWeb/v15/.suo
BIN
View File
Binary file not shown.
Ball.js
+67 -76
View File
@@ -1,12 +1,16 @@
function newBall() {
var ball = {
var thisObject = {
input: undefined, // This object contains information needed to draw the ball, but also referenced from outside, so as to have control of the basics of the ball.
physicsEnabled: false,
initializeTargetPosition: initializeTargetPosition,
initializeMass: initializeMass,
initializeRadius: initializeRadius,
imageId: undefined,
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.
@@ -14,11 +18,9 @@ function newBall() {
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: '',
@@ -35,7 +37,6 @@ function newBall() {
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.
@@ -43,25 +44,8 @@ function newBall() {
container: undefined // This is a pointer to the object where the ball belongs to.
};
return ball;
return thisObject;
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);
this.targetPosition = targetPosition;
// We dont need this now> smallBalls.push ([targetPosition.x, targetPosition.y, 3, 'rgba(30, 130, 30, 0.85)']);
}
function initializeMass(suggestedValue) {
@@ -70,8 +54,8 @@ function newBall() {
mass = 0.1;
}
this.rawMass = mass;
this.currentMass = mass;
thisObject.rawMass = mass;
thisObject.currentMass = mass;
}
@@ -82,9 +66,9 @@ function newBall() {
radius = 2;
}
this.rawRadius = radius;
this.targetRadius = radius;
this.currentRadius = radius / 3;
thisObject.rawRadius = radius;
thisObject.targetRadius = radius;
thisObject.currentRadius = radius / 3;
}
@@ -95,7 +79,7 @@ function newBall() {
y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y
};
this.currentPosition = position;
thisObject.currentPosition = position;
}
function radomizeCurrentSpeed() {
@@ -121,50 +105,41 @@ function newBall() {
y: initialYDirection * Math.floor((Math.random() * 300) + 1) / 100
};
this.currentSpeed = velocity;
thisObject.currentSpeed = velocity;
}
function updateMass() {
//this.currentMass = this.rawMass + this.rawMass * this.container.zoom.incrementM * this.container.zoom.levelM;
//thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.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);
this.targetPosition.x = point.x;
this.targetPosition.y = point.y;
//thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR;
}
function drawBallBackgrond() {
if (this.currentRadius > 1) {
if (thisObject.input.visible === false) { return; }
if (thisObject.input.visible === true && thisObject.physicsEnabled === false) {
/* The first time that the ball becomes visible, we need to do thisObject. */
radomizeCurrentPosition(thisObject.input.position);
radomizeCurrentSpeed();
thisObject.physicsEnabled = true;
}
if (thisObject.currentRadius > 1) {
/* Target Line */
browserCanvasContext.beginPath();
browserCanvasContext.moveTo(this.currentPosition.x, this.currentPosition.y);
browserCanvasContext.lineTo(this.targetPosition.x, this.targetPosition.y);
browserCanvasContext.moveTo(thisObject.currentPosition.x, thisObject.currentPosition.y);
browserCanvasContext.lineTo(thisObject.input.position.x, thisObject.input.position.y);
browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)';
browserCanvasContext.setLineDash([4, 2]);
browserCanvasContext.lineWidth = 1;
@@ -173,14 +148,14 @@ function newBall() {
}
if (this.currentRadius > 0.5) {
if (thisObject.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.arc(thisObject.input.position.x, thisObject.input.position.y, radius, 0, Math.PI * 2, true);
browserCanvasContext.closePath();
browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)';
browserCanvasContext.fill();
@@ -190,12 +165,14 @@ function newBall() {
function drawBallForeground() {
if (this.currentRadius > 5) {
if (thisObject.input.visible === false) { return; }
if (thisObject.currentRadius > 5) {
/* Contourn */
browserCanvasContext.beginPath();
browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true);
browserCanvasContext.arc(thisObject.currentPosition.x, thisObject.currentPosition.y, thisObject.currentRadius, 0, Math.PI * 2, true);
browserCanvasContext.closePath();
browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)';
browserCanvasContext.lineWidth = 1;
@@ -203,13 +180,13 @@ function newBall() {
}
if (this.currentRadius > 0.5) {
if (thisObject.currentRadius > 0.5) {
/* Main Ball */
var alphaA;
if (this.currentRadius < 3) {
if (thisObject.currentRadius < 3) {
alphaA = 1;
} else {
alphaA = 0.75;
@@ -218,55 +195,69 @@ function newBall() {
alphaA = 0.75;
browserCanvasContext.beginPath();
browserCanvasContext.arc(this.currentPosition.x, this.currentPosition.y, this.currentRadius, 0, Math.PI * 2, true);
browserCanvasContext.arc(thisObject.currentPosition.x, thisObject.currentPosition.y, thisObject.currentRadius, 0, Math.PI * 2, true);
browserCanvasContext.closePath();
browserCanvasContext.fillStyle = this.fillStyle;
browserCanvasContext.fillStyle = thisObject.fillStyle;
browserCanvasContext.fill();
}
/* Image */
if (thisObject.input.imageId !== undefined) {
let image = document.getElementById(thisObject.input.imageId);
let imageSize = 50;
if (image !== null) {
browserCanvasContext.drawImage(image, thisObject.currentPosition.x - imageSize / 2, thisObject.currentPosition.y - imageSize / 2, imageSize, imageSize);
}
}
/* Label First Text */
if (this.currentRadius > 6) {
if (thisObject.currentRadius > 6) {
browserCanvasContext.strokeStyle = this.labelStrokeStyle;
browserCanvasContext.strokeStyle = thisObject.labelStrokeStyle;
var xOffset = 0;
if (this.labelFirstText >= 10) {
xOffset = this.currentRadius / 10;
if (thisObject.labelFirstText >= 10) {
xOffset = thisObject.currentRadius / 10;
}
browserCanvasContext.font = (this.currentRadius / 4).toFixed(0) + 'px verdana';
browserCanvasContext.font = (thisObject.currentRadius / 4).toFixed(0) + 'px verdana';
try {
browserCanvasContext.fillText(this.labelFirstText.toFixed(0), this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2);
browserCanvasContext.fillText(thisObject.labelFirstText.toFixed(0), thisObject.currentPosition.x - 2 - xOffset, thisObject.currentPosition.y + 2);
} catch (err) {
browserCanvasContext.fillText(this.labelFirstText, this.currentPosition.x - 2 - xOffset, this.currentPosition.y + 2);
browserCanvasContext.fillText(thisObject.labelFirstText, thisObject.currentPosition.x - 2 - xOffset, thisObject.currentPosition.y + 2);
}
}
/* Label Second Text */
if (this.currentRadius > 10) {
if (thisObject.currentRadius > 10) {
browserCanvasContext.strokeStyle = this.labelStrokeStyle;
browserCanvasContext.strokeStyle = thisObject.labelStrokeStyle;
var xOffset = 0;
xOffset = this.currentRadius / 2;
xOffset = thisObject.currentRadius / 2;
browserCanvasContext.font = (this.currentRadius / 6).toFixed(0) + 'px verdana';
browserCanvasContext.font = (thisObject.currentRadius / 6).toFixed(0) + 'px verdana';
try {
browserCanvasContext.fillText(this.labelSecondText.toFixed(8), this.currentPosition.x - xOffset, this.currentPosition.y + xOffset);
browserCanvasContext.fillText(thisObject.labelSecondText.toFixed(8), thisObject.currentPosition.x - xOffset, thisObject.currentPosition.y + xOffset);
} catch (err) {
browserCanvasContext.fillText(this.labelSecondText, this.currentPosition.x - xOffset, this.currentPosition.y + xOffset);
browserCanvasContext.fillText(thisObject.labelSecondText, thisObject.currentPosition.x - xOffset, thisObject.currentPosition.y + xOffset);
}
}
}
Balls.js
-1
View File
@@ -7,7 +7,6 @@ function updateBallsTargets() {
balls[i].updateMass();
balls[i].updateRadius();
balls[i].updatePosition();
}
}
FloatingSpace.js
+40 -9
View File
@@ -3,18 +3,18 @@ The Floating Space is the place where floating elements like balls, live and are
This space has its own physics which helps with the animation of these objects and also preventing them to overlap.
*/
let balls; // This is the array of balls being displayed
function newFloatingSpace() {
let thisObject = {
createNewBall: createNewBall,
physicsLoop: physicsLoop,
isInside: isInside,
isInsideBall: isInsideBall,
balls: [], // <-- TODO: Check if this is really needed here.
initialize: initialize
};
let balls; // This is the array of balls being displayed
return thisObject;
function initialize() {
@@ -31,6 +31,8 @@ function newFloatingSpace() {
let ball = balls[i];
if (ball.physicsEnabled === false) { continue;}
/* Change position based on speed */
ball.currentPosition.x = ball.currentPosition.x + ball.currentSpeed.x;
@@ -43,13 +45,13 @@ function newFloatingSpace() {
// Gives a minimun speed towards their taget.
if (ball.currentPosition.x < ball.targetPosition.x) {
if (ball.currentPosition.x < ball.input.position.x) {
ball.currentSpeed.x = ball.currentSpeed.x + .005;
} else {
ball.currentSpeed.x = ball.currentSpeed.x - .005;
}
if (ball.currentPosition.y < ball.targetPosition.y) {
if (ball.currentPosition.y < ball.input.position.y) {
ball.currentSpeed.y = ball.currentSpeed.y + .005;
} else {
ball.currentSpeed.y = ball.currentSpeed.y - .005;
@@ -69,6 +71,8 @@ function newFloatingSpace() {
if (colliding(balls[i], balls[k])) {
if (balls[k].physicsEnabled === false) { continue; }
resolveCollision(balls[k], balls[i]);
}
@@ -91,11 +95,38 @@ function newFloatingSpace() {
for (let i = 0; i < balls.length; i++) {
let ball = balls[balls.length - i - 1];
//let ball = balls[i];
ball.drawForeground();
}
}
function createNewBall(pInput, pContainer) {
/* This function is used to create new balls, representing labels of each point on the chart. */
var ball = newBall();
ball.input = pInput;
ball.container = pContainer;
ball.friction = .995;
ball.initializeMass(15);
ball.initializeRadius(3);
ball.fillStyle = 'rgba(255, 155, 155, 0.5)';
ball.labelStrokeStyle = 'rgba(255, 0, 255, 1)';
ball.labelFirstText = pInput.name;
ball.labelSecondText = "Soy una bola :-)";
balls.push(ball);
ball.index = balls.length;
return ball;
}
/******************************************/
/* */
/* Physics Engine Follows */
@@ -109,7 +140,7 @@ function newFloatingSpace() {
const coulomb = .00001;
const minForce = 0.01;
var d = Math.sqrt(Math.pow(ball.targetPosition.x - ball.currentPosition.x, 2) + Math.pow(ball.targetPosition.y - ball.currentPosition.y, 2)); // ... we calculate the distance ...
var d = Math.sqrt(Math.pow(ball.input.position.x - ball.currentPosition.x, 2) + Math.pow(ball.input.position.y - ball.currentPosition.y, 2)); // ... we calculate the distance ...
var force = coulomb * d * d / ball.currentMass; // In this case the mass of the ball affects the gravity force that it receives, that gives priority to target position to bigger balls.
@@ -123,8 +154,8 @@ function newFloatingSpace() {
};
var pos2 = {
x: ball.targetPosition.x,
y: ball.targetPosition.y
x: ball.input.position.x,
y: ball.input.position.y
};
var posDiff = { // Next we need the vector resulting from the 2 positions.
ProductCard.js
+1 -1
View File
@@ -70,7 +70,7 @@
container.isClickeable = true;
thisObject.container = container;
/* Get missing Plotter information. */
/* Add information that will later be needed.*/
let team = ecosystem.getTeam(thisObject.product.plotter.devTeam);
let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName);
TimelineChart.js
+13
View File
@@ -248,6 +248,19 @@ function newTimelineChart() {
productPlotter.panels.push(plotterPanel);
}
/* Create The Profie Picture Ball */
if (productPlotter.plotter.profile !== undefined) {
let imageId = pProductCard.bot.devTeam + "." + pProductCard.bot.profilePicture;
productPlotter.plotter.profile.text = pProductCard.bot.displayName;
productPlotter.plotter.profile.imageId = imageId;
canvas.floatingSpace.createNewBall(productPlotter.plotter.profile, thisObject.container)
}
/* Add the new Active Protter to the Array */
productPlotters.push(productPlotter);