We Keep Coding

JavaScript 2D Canvas Screen tearing when using scale

I'm using the scale feature in the 2D Context to scale in-game tiles to fit the screen, however the scaling integer has to be a float to make this happen. Due to this tiles are rendered so that in certain positions you can see lines in the air or inbetween tiles. On some screens screen tearing is minimal but on some is very apparent.
Scaling code: context.scale(this.camera.scale, this.camera.scale);
How scale is measured: window.innerHeight/672 * 3;
Note: Dividing by 672, since when divided by 48 (game units) results in 14, which is the general zone height.
What happens:
Please help!

Yes that can happen using scale, but instead you can do the scaling yourself, it's just a multiplication and rounding to keep numbers nice and integer...
Here is the a nice visual showing the difference between the two methods:
Sample code below:
var ctx1 = document.getElementById('canvas1').getContext('2d');
var ctx2 = document.getElementById('canvas2').getContext('2d');
var rect = { x: 10, y: 10, w: 50, h: 50 }
const scale = 0.63517
function drawRects(ctx, pos) {
ctx.fillRect(pos.x, pos.y, pos.w, pos.h);
ctx.fillRect(pos.x, pos.y + pos.h, pos.w, pos.h);
ctx.fillRect(pos.x + pos.w, pos.y + pos.h / 4, pos.w, pos.h);
}
function draw1() {
ctx1.scale(scale, scale);
drawRects(ctx1, rect)
}
function draw2() {
scaled_rect = {
x: Math.round(rect.x * scale),
y: Math.round(rect.y * scale),
w: Math.round(rect.w * scale),
h: Math.round(rect.h * scale)
}
drawRects(ctx2, scaled_rect)
}
draw1()
draw2()
canvas {
border: solid 1px red
}
<canvas id="canvas1" width=80 height=80></canvas>
<canvas id="canvas2" width=80 height=80></canvas>

How can I convert a Darknet label file to regular x,y,w,h?

I'm sorry to ask this here but I have been at it for days and I can't figure out what formula to use. I'm hoping someone knows what i can do, thanks!
So I am trying to make a GUI tool for darknet but the little squares shown in the front are in the wrong position.
Image Dimensions : 1024 x 683
Annotation Line in Label File : 0 0.6681250000000001 0.510788 0.09750000000000003 0.15103200000000006
I am trying to get x,y,w,h like this
var convertDarknetImageLabelsToMatrices = function(loadedImage){
// loadedImage = {
// annotation: "0 0.6681250000000001 0.510788 0.09750000000000003 0.15103200000000006",
// dimensions: {
// height: 683,
// width: 1024
// }
// }
var width = loadedImage.dimensions.width
var height = loadedImage.dimensions.height
var matrices = []
var labels = loadedImage.annotation.split('\n')
labels.forEach(function(label){
if(!label)return
var lineParts = label.split(' ')
var classNumber = lineParts[0]
var x = lineParts[1] * width / 2
var y = lineParts[2] * height / 2
var w = lineParts[3] * width
var h = lineParts[4] * height
matrices.push({
classNumber: classNumber,
tag: loadedImage.className,
x: x,
y: y,
w: w,
h: h,
imageWidth: width,
imageHeight: height
})
})
return matrices
}
the parsing part is
var x = lineParts[1] * width / 2
var y = lineParts[2] * height / 2
var w = lineParts[3] * width
var h = lineParts[4] * height
I added the /2 because it seems to make it closer. On some images it will be almost exact on a single axis, like X will line up but Y will be way off. I've tried to figure a static formula but its just always off in some other direction whenever opening another image.
Training itself is fine, I just can't edit/view the boxes later in the UI :(
thank you! if you need more info please let me know!

thanks to all who viewed and considered answering. I just figured it out! here is what I need to use for parsing.
var w = lineParts[3] * width
var h = lineParts[4] * height
var x = (lineParts[1] * width) - w / 2
var y = (lineParts[2] * height) - h / 2

place objects relative from point javascript

I have some javascript code that tries to place some objects above each other relative from a center point in this case 0,0
The thing is that the amount of objects, size of the objects, and spacing between the objects are all variable.
See this image below that explains my situation the best (hopefully ;)):
So in this case the center point is the green dot and the mesh center positions are the yellow dots.
The Mh stands for Mesh Height (variable)
The Sh stands for Spacing height (variable)
I tried to show the logic behind the calculation of the yellow dots. But when i try to implement this in javascript it works for 3 lines but it breaks on other amount of lines.
This is what i have tried so far:
var data = {
text : ["THE NEXT","POINT","OF VIEW"],
size : 5,
height : 2,
curveSegments : 12,
line_height : 2
};
function generateTextGeometry(mesh) {
var scaled_lineheight = map_r(data.size, 2, 75, 0.5, 20);
var y_start = (0 - data.text.length * data.size / 2 - data.size / 2 - (data.text.length - 1) * scaled_lineheight)/2;
var loader = new THREE.FontLoader();
loader.load( 'data/suisse_2.json', function ( font ) {
for (var i = data.text.length - 1; i >= 0; i--) {
var geometry = new THREE.TextGeometry( data.text[i], {
font: font,
size: data.size,
height: data.height,
curveSegments: data.curveSegments
});
geometry.center();
mesh.children[i].geometry = geometry;
mesh.children[i].position.y = y_start;
console.log(mesh.children[i].position);
if (i < data.text.length) {
y_start += (data.size + scaled_lineheight);
}else{
y_start += data.size;
}
}
console.log('-----------------------');
});
}
and When i console.log the position for 3 lines it is ok:
p {x: 0, y: -6.301369863013699, z: 0}
p {x: 0, y: 0, z: 0}
p {x: 0, y: 6.301369863013699, z: 0}
but for any other amount of lines it is wrong:
p {x: 0, y: -4.4006849315068495, z: 0}
p {x: 0, y: 1.9006849315068495, z: 0}
So my final question is how do i always get the yellow positions on the right location relative from the green center? What is wrong in my current logic?
If anything is unclear please let me know! So i can clarify.

So after reading my own question about 20 times. The light shined upon my brains haha.
So i just made a mistake when calculating the initial start Here is the updated line:
var y_start = 0 - (((data.text.length - 1) * data.size) + ((data.text.length - 1) * scaled_lineheight))/ 2;

Stacked horizontal bar chart: How to get the width of a bar?

How could I get the width of a bar/box like in this snippet:
http://jsfiddle.net/zk9oc4c9/
to determine the y-postions of the bar?
In the Fiddle above version 1.x is used but this.chart.ctx.moveTo(0, this.scale.calculateY(lineHeight)); isn't possible in version 2.x.
With such kind of coordinates I want to draw a line into the chart. Drawing with static values (dummy data) works, but I need id dynamically.
So please see the screenshot how the chart looks like with static values for the line(s). The y-coordinates for the dashed line is easy - just the border of the chart. But I mean the red solid line.
So I wrote a plugin and this is the part where to draw the line(s) - this is just an excerpt:
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
var coord = {
x: // this calculation is already done,
startY: 0,
endY: 0
};
// actually draw the line
ctx.beginPath();
ctx.moveTo(coord.x, coord.startY);
ctx.lineTo(coord.x, coord.endY);
ctx.stroke();
ctx.closePath();
}
});
Edit
I did some kind of solution. It's a bit a workaround, but it works:
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// get the meta from any dataset
var meta = chartInstance.getDatasetMeta(0);
var xScale = chartInstance.scales[meta.xAxisID];
var coord = {
x: xScale.getPixelForValue(<value for the line>);
startY: 0,
endY: 0
};
var yScale = chartInstance.scales[meta.yAxisID];
// get the height of the y-axis - subtract the top padding for the chart here
var height = yScale.bottom - yScale.top;
// get categoryPercentage & barPercentage from the chart's configuration
var catPerc = yScale.options.categoryPercentage;
var barPerc = yScale.options.barPercentage;
// calculate the each category height
var catHeight = (height * catPerc) / yScale.ticks.length;
// so calculate the height of a single bar
var barHeight = catHeight * barPerc;
var factor = barHeight / catHeight;
// padding between chat edge and the bar itself
var padding = (catHeight - barHeight) * factor;
// use the top value from which the chart itself is rendered + the padding
coord.startY = yScale.top + padding - 2;
coord.endY = coord.startY + barHeight + 3;
// actually draw the line
ctx.beginPath();
ctx.moveTo(coord.x, coord.startY);
ctx.lineTo(coord.x, coord.endY);
ctx.stroke();
ctx.closePath();
}
});

How to make d3 scales proportional even if domains are different

Here is the example data set:
var dataset = [
{
x: 0,
y: 1.188
},
{
x: 22,
y: 0.822
},
{
x: 72,
y: 1.366
},
{
x: 82,
y: 1.163
},
{
x: 111,
y: 1.601
}
];
So, what I desire, for example: Distance between 0.001 and 0.002 on Y scale to be equal in width/proportions to distance from 1 to 2 on X scale on chart.
I tried it with linear scales but couldn't achieve proportions. I don't know if there is some built in method for setting those things.
Here is an attempt:
http://jsbin.com/goxamemare/8/edit?js,output
So, if I get it correctly in order to have equal ticks regardless of domain I need to take at least two things into considoration:
1. How many values (steps like 0.001, 0.002 for Y scale or 1, 2, 3 for X scale) there are for X and Y respectfully
2. To set one dimension, let's say width of the chart
So, that way I can work out:
height : number of values on Y = width : number of values on X scale
Which gives for example:
height : 810 = 360px : 300
height = 810 * 1.2
height = 972px
And so I get proportional ticks between Y and X. Right?