I want an array looking like this:
[
[0,0,1,1,1,0,0],
[0,1,1,1,1,1,0],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[0,1,1,1,1,1,0],
[0,0,1,1,1,0,0],
]
My first approach was to get the circumference
var steps = 100;
var coord = [];
var x,y;
for (var i = 0; i < steps; i++) {
var phase = 2 * Math.PI * i / steps;
x = Math.round(cenx + range * Math.cos(phase));
y = Math.round(ceny + range * Math.sin(phase))
if(x>=0 && y >=0){
coord.push([x,y]);
}
}
and with the resulting coords i could have juggled around to get the circular area. but i doubt that would be performant.
So my second approach would be to check every entry of the array whether it has a certain distance (i.e. radius) to the center of my circle. but for huge maps that wouldnt be performant either. perhaps checking only in a reasonable frame would be wiser.
but im certain there is a better approach for this problem.
im needing this for a fog of war implementation.
Your second suggested approach of testing each point in the array will be simple to implement, and can be optimized to just one subtract, one multiply and one test per element in the inner loop.
The basic test is ((x - centerX) * (x - centerX)) + ((y - centerY) * (y - centerY)) > radiusSq, but since ((y - centerY) * (y - centerY)) will be constant for a given row you can move that outside the loop.
Given that you have to visit each element in the array and set it anyway (meaning your algorithm will always be O(n2) on the circle radius), the test is a negligible cost:
// circle generation code:
function makeCircle(centerX, centerY, radius, a, arrayWidth, arrayHeight)
{
var x, y, d, yDiff, threshold, radiusSq;
radius = (radius * 2) + 1;
radiusSq = (radius * radius) / 4;
for(y = 0; y < arrayHeight; y++)
{
yDiff = y - centerY;
threshold = radiusSq - (yDiff * yDiff);
for(x = 0; x < arrayWidth; x++)
{
d = x - centerX;
a[y][x] = ((d * d) > threshold) ? 0 : 1;
}
}
}
// test code:
var width = 7;
var dim = (width * 2) + 1;
var array = new Array(dim);
for(row = 0; row < dim; row++)
array[row] = new Array(dim);
makeCircle(width, width, width, array, dim, dim);
for(var y = 0, s = ""; y < dim; y++)
{
for(var x = 0; x < dim; x++)
{
s += array[y][x];
}
s += "<br>";
}
document.body.innerHTML += s + "<br>";
I would use the mid-point circle algorithm and see the array as a bitmap.
I did this JavaScript implementation a while back, modified here to use an array as target source for the "pixel". Just note that a circle will produce odd widths and heights as the distance is always from a single center point and we can only use integer values in this case.
Tip: For speed improvements you could use typed array instead of a regular one (shown below).
Example
Make sure to use integer values as input, the code will clip values outside the "bitmap"/array -
var width = 7, height = 7,
array = new Uint8Array(width * height);
// "draw" circle into array
circle(3, 3, 3);
renderDOM();
// circle example 2
width = height = 17;
array = new Uint8Array(width * height);
circle(8, 8, 8);
renderDOM();
function circle(xc, yc, r) {
if (r < 1) return;
var x = r, y = 0, // for Bresenham / mid-point circle
cd = 0,
xoff = 0,
yoff = r,
b = -r,
p0, p1, w0, w1;
while (xoff <= yoff) {
p0 = xc - xoff;
p1 = xc - yoff;
w0 = xoff + xoff;
w1 = yoff + yoff;
hl(p0, yc - yoff, yc + yoff, w0); // fill a "line"
hl(p1, yc - xoff, yc + xoff, w1);
if ((b += xoff+++xoff) >= 0) {
b -= --yoff + yoff;
}
}
// for fill
function hl(x, y1, y2, w) {
w++;
var xw = 0;
while (w--) {
xw = x + w;
setPixel(xw, y1);
setPixel(xw, y2);
}
}
function setPixel(x, y) {
if (x < width && y < height && x >= 0 && y >= 0)
array[y * width + x] = 1;
}
}
function renderDOM() {
for(var i = 0, str = ""; i < array.length; i++) {
if (i > 0 && !(i % width)) str += "<br>";
str += array[i];
}
document.body.innerHTML += str + "<br><br>";
}
body {font:18px monospace}
For an odd-sized array (2r+1 x 2r+1),
for (row= 0; row < 2 * r + 1; row++)
{
f= (row + 1) * (row - 2 * r - 1) + r * r + r;
for (col= 0; col < 2 * r + 1; f+= 2 * (col - r) + 1; col++)
{
array[row][col]= f >= 0;
}
}
Related
I am learning WebGL with vanilla javascript. I have been able to follow along my tutorial to draw a simple bell shape using gl.LINES with the following function to create the vertices:
function createVertexData() {
var n = 20; // across
var m = 10; // down
// Positions.
vertices = new Float32Array(3 * (n + 1) * (m + 1));
// Index data for Linestrip.
indices = new Uint16Array(2 * 2 * n * m);
var dt = 2 * Math.PI / n;
var dr = 1 / m;
// Counter for entries in index array.
var iIndex = 0;
// Loop angle t.
for (var i = 0, t = Math.PI; i <= n; i++, t += dt) {
// Loop radius r.
for (var j = 0, r = 0; j <= m; j++, r += dr) {
var iVertex = i * (m + 1) + j;
var x = r * Math.cos(t);
var y = Math.cos(r * Math.PI);
var z = r * Math.sin(t);
// Set vertex positions.
vertices[iVertex * 3] = x;
vertices[iVertex * 3 + 1] = y;
vertices[iVertex * 3 + 2] = z;
// Set index.
// Line on beam.
if (j > 0 && i > 0) {
indices[iIndex++] = iVertex - 1;
indices[iIndex++] = iVertex;
}
// Line on ring.
if (j > 0 && i > 0) {
indices[iIndex++] = iVertex - (m + 1);
indices[iIndex++] = iVertex;
}
}
}
}
Now I want to change the createVertexData() function to let's say draw a pillow (only the mesh, not the texture).
The formula for that pillow is (source):
x = cos(u)
y = cos(v)
z = a sin(u) sin(v)
Where:
- a is a constant
- u is an element from [0, pi]
- v is an element from [-pi, pi]
All my attempts at changing the createVertexData() miserably failed: I calculated x, y, z according to the new formula and set the loops to run according to the domains of u and v. Also renamed variables of course. The resulting shape always looked very off and not even close to the pillow.
How does it need to look like?
Thanks in advance.
I have been trying to implement Bradley Adaptive thresholding. I know there is a python code in one of the stack overflow questions. But i am struggling to implement the same in JS by following that. Can anyone please help me? So far my code is:
function computeAdaptiveThreshold (imagetest,imageWidth,imageHeight,callback)
{
var size = imageWidth*imageHeight*4;
var s = imageWidth/8;
var s2=s>>1;
var t=0.15;
var it=1.0-t;
var i,j,diff,x1,y1,x2,y2,ind1,ind2,ind3;
var sum=0;
var ind=0;
var integralImg = [];
var canvas = document.createElement('canvas');
var bin = canvas.getContext('2d').createImageData(imageWidth, imageHeight);
for(i=0;i<imageWidth;i++)
{
sum = 0;
for(j=0;j<imageHeight;j++)
{
index = i *imageHeight + j;
sum += imagetest.data[index];
if(i== 0)
{
integralImg[index] = sum;
}
else
{
//index = (i-1) * height + j;
integralImg[index] = integralImg[(i-1) * imageHeight + j] + sum;
}
}
}
x1=0;
for(i=1;i<imageWidth;++i)
{
sum=0;
ind=i;
ind3=ind-s2;
if(i>s)
{
x1=i-s;
}
diff=i-x1;
for(j=0;j<imageHeight;++j)
{
sum+=imagetest.data[ind];// & 0xFF;
integralImg[ind] = integralImg[(ind-1)]+sum;
ind+=imageWidth;
if(i<s2)continue;
if(j<s2)continue;
y1=(j<s ? 0 : j-s);
ind1=y1*imageWidth;
ind2=j*imageWidth;
if (((imagetest.data[ind3])*(diff * (j - y1))) < ((integralImg[(ind2 + i)] - integralImg[(ind1 + i)] - integralImg[(ind2 + x1)] + integralImg[(ind1 + x1)])*it)) {
bin.data[ind3] = 0;
} else {
bin.data[ind3] = 255;
}
ind3 += imageWidth;
}
}
y1 = 0;
for( j = 0; j < imageHeight; ++j )
{
i = 0;
y2 =imageHeight- 1;
if( j <imageHeight- s2 )
{
i = imageWidth - s2;
y2 = j + s2;
}
ind = j * imageWidth + i;
if( j > s2 ) y1 = j - s2;
ind1 = y1 * imageWidth;
ind2 = y2 * imageWidth;
diff = y2 - y1;
for( ; i < imageWidth; ++i, ++ind )
{
x1 = ( i < s2 ? 0 : i - s2);
x2 = i + s2;
// check the border
if (x2 >= imageWidth) x2 = imageWidth - 1;
if (((imagetest.data[ind])*((x2 - x1) * diff)) < ((integralImg[(ind2 + x2)] - integralImg[(ind1 + x2)] - integralImg[(ind2 + x1)] + integralImg[(ind1 + x1)])*it)) {
bin.data[ind] = 0;
} else {
bin.data[ind] = 255;
}
}
}
callback(bin);`
I am getting very bad images. I should say i cannot call it as a image.
I think your first effort should be to refactor your code : it will be much easier to handle the index.
Then you'll see that you have issues with your indexes : an image -even a gray one- is an RGBA Array, meaning 4 bytes = 32 bits per pixel.
You could handle this by doing a conversion RGBA-> b&W image, then thresholding, then doing b&w -> RGBA back.
...Or handle the RGBA components as you go. Notice that here you only want to output black or white, so you can create an Int32 view on the array, and write at once R,G,B,A for each pixels.
So some code (working here : http://jsfiddle.net/gamealchemist/3zuopz19/8/ ) :
function computeAdaptiveThreshold(sourceImageData, ratio, callback) {
var integral = buildIntegral_Gray(sourceImageData);
var width = sourceImageData.width;
var height = sourceImageData.height;
var s = width >> 4; // in fact it's s/2, but since we never use s...
var sourceData = sourceImageData.data;
var result = createImageData(width, height);
var resultData = result.data;
var resultData32 = new Uint32Array(resultData.buffer);
var x = 0,
y = 0,
lineIndex = 0;
for (y = 0; y < height; y++, lineIndex += width) {
for (x = 0; x < width; x++) {
var value = sourceData[(lineIndex + x) << 2];
var x1 = Math.max(x - s, 0);
var y1 = Math.max(y - s, 0);
var x2 = Math.min(x + s, width - 1);
var y2 = Math.min(y + s, height - 1);
var area = (x2 - x1 + 1) * (y2 - y1 + 1);
var localIntegral = getIntegralAt(integral, width, x1, y1, x2, y2);
if (value * area > localIntegral * ratio) {
resultData32[lineIndex + x] = 0xFFFFFFFF;
} else {
resultData32[lineIndex + x] = 0xFF000000;
}
}
}
return result;
}
function createImageData(width, height) {
var canvas = document.createElement('canvas');
return canvas.getContext('2d').createImageData(width, height);
}
function buildIntegral_Gray(sourceImageData) {
var sourceData = sourceImageData.data;
var width = sourceImageData.width;
var height = sourceImageData.height;
// should it be Int64 Array ??
// Sure for big images
var integral = new Int32Array(width * height)
// ... for loop
var x = 0,
y = 0,
lineIndex = 0,
sum = 0;
for (x = 0; x < width; x++) {
sum += sourceData[x << 2];
integral[x] = sum;
}
for (y = 1, lineIndex = width; y < height; y++, lineIndex += width) {
sum = 0;
for (x = 0; x < width; x++) {
sum += sourceData[(lineIndex + x) << 2];
integral[lineIndex + x] = integral[lineIndex - width + x] + sum;
}
}
return integral;
}
function getIntegralAt(integral, width, x1, y1, x2, y2) {
var result = integral[x2 + y2 * width];
if (y1 > 0) {
result -= integral[x2 + (y1 - 1) * width];
if (x1 > 0) {
result += integral[(x1 - 1) + (y1 - 1) * width];
}
}
if (x1 > 0) {
result -= integral[(x1 - 1) + (y2) * width];
}
return result;
}
I'm creating an algorithm that will blur the border of a canvas(image). Before applying the blur effect, I am creating an array filtered that includes all pixel values that needs to be blurred.
I've created an example with a 10×10px image.
function compute(w, h, bW) {
w *= 4;
var ignored = [];
for (y = bW; y < (h - bW); y++) {
for (x = 0; x < (w - (bW * 4 * 2)); x++) {
ignored.push(w * y + x + bW * 4);
}
}
console.log(ignored);
function range(limit) {
return Array.apply(null, Array(limit)).map(function(_, i) {
return i;
})
}
Array.prototype.diff = function(array) {
return this.filter(function(elem) {
return array.indexOf(elem) === -1;
})
}
var filtered = range(w * h).diff(ignored);
console.log(filtered);
return filtered;
}
compute(10, 10, 2);
//////////////////////////////////////////////////////////////////
// Below is just to display the numbers that are being filtered //
// Here, the size is 100 x 100 px with 10px border width //
//////////////////////////////////////////////////////////////////
var pixels = compute(100, 100, 10);
var c = document.getElementsByTagName('canvas')[0];
var ctx = c.getContext('2d');
var imgD = ctx.createImageData(100, 100);
for (var i = 0; i < imgD.data.length; i += 4) {
if (pixels.indexOf(i) > 0) {
imgD.data[i + 0] = 0;
imgD.data[i + 1] = 0;
imgD.data[i + 2] = 0;
imgD.data[i + 3] = 255;
} else {
imgD.data[i + 0] = 255;
imgD.data[i + 1] = 0;
imgD.data[i + 2] = 0;
imgD.data[i + 3] = 255;
}
}
ctx.putImageData(imgD, 10, 10);
<canvas></canvas>
The array filtered contains all the numbers that has the background color and ignored contains all the numbers that has the background color and in the image.
My question is:
How do I change my code so that the array filtered will have the numbers with background color and and not ?
An Example on a bit high resolution(65×65px):
FIDDLEJS : http://jsfiddle.net/t14gr6pL/2/
Explanation:
It depends on the width of your triangles (the second color). In the 64*64 example, this width is 7.
Let's assume that this width (tw) is calculate like this (you can change) :
var tw = (2 * bW) - 1;
So your code would be:
function compute(w, h, bW) {
var filtered = [];
var WIDTH_MULTIPLICATOR = 4;
var bH = bW;
w *= WIDTH_MULTIPLICATOR;
bW *= WIDTH_MULTIPLICATOR;
var triangleWidth = (2 * bW) - 1;
for (y = 0; y < h; y++) {
for (x = 0; x < w; x++) {
if (
// Borders
(Math.min(x, w - x) < bW) ||
(Math.min(y, h - y) < bH) ||
// Adding "Triangles"
(Math.min(x, w - x) < bW + triangleWidth - Math.max(0, Math.min(y, h - y) - bH) * WIDTH_MULTIPLICATOR)
) {
filtered.push(w * y + x);
}
}
}
return filtered;
}
I'm trying to draw some charts on a Canvas Area. My Problem is following...
I have 1-4 (or more) circles to draw. The canvas size is like 500 x 400 px. How can i now calculate the max Radius of each circle to place all on this canvas and get the position (center x/y) of each circle? So each circle could be optimal placed on the area with some margin to each other?
here some example screens to show you what i mean...
thanks a lot!
To calculate the maximum radius you can use
var numberOfSections = 4;
var width = 500;
var height = 400;
var R = Math.sqrt((width * height) / numberOfSections) / 2
var MX = Math.round(width / (R * 2)); // max amount of squares that can fit on the width
var MY = Math.round(height / (R * 2)); // max amount of squares that can fit on the height
var skipLast = 0;
var numOfCalculatedCircles = MX*MY;
if(numOfCalculatedCircles != numberOfSections) {
if(numOfCalculatedCircles < numberOfSections) {
console.log('numOfCalculatedCircles',numOfCalculatedCircles);
MX = MX + Math.ceil((numberOfSections - numOfCalculatedCircles)/MY);
if(MX*MY != numberOfSections) {
skipLast = Math.abs(MX*MY - numberOfSections);
}
} else {
skipLast = numOfCalculatedCircles - numberOfSections;;
}
console.log('MX*MY',MX*MY);
}
// recalculate the radius for X
if (R * 2 * MX > width) {
R = (width/2) / MX;
}
// recalculate the radius for Y
if (R * 2 * MY > height) {
R = (height/2) / MY
}
Calculate the margins for X and Y:
var circlesWidth = R * 2 * MX;
var circlesHeight = R * 2 * MY;
var marginX = 0;
var marginY = 0;
if (circlesWidth < width) {
marginX = (width - circlesWidth) / 2
}
if (circlesHeight < height) {
marginY = (height - circlesHeight) / 2
}
After that you can calculate the centers:
var RY = marginY + R;
var radiusPadding = 10;
for (var i = 0; i < MY; i++) {
var RX = marginX + R;
for (var j = 0; j < MX; j++) {
if(i === MY - 1) {
if(j === MX - skipLast) {
break;
}
}
canvas.drawArc({
fromCenter: true,
strokeStyle: 'red',
strokeWidth: 1,
start: 0,
end: 360,
radius: R - radiusPadding,
x: RX,
y: RY
});
RX += 2 * R;
}
RY += 2 * R;
}
Hope this helps.
UPDATE: It is still incomplete but it may work in this particular example: http://jsfiddle.net/dhM96/4/
You are not giving enough of your placement constraints.
Anyway, assuming a free space of F pixels along the rectangle edges and f between the circles, the maximum radius on X is Rx = (Width - 2 F - (Nx-1) f) / 2 and on Y, R y = (Height - 2F - (Ny-1) f) / 2. (Nx circles horizontally, Ny vertically.) Take the smallest of the two.
The centers will be at (F + (2 Rx + f) Ix + Rx, F + (2 Ry + f) Iy + Ry), 0 <= Ix < Nx, 0 <= Iy < Ny.
The Knapsack problem you are asking about is hard to solve. Best approach in your case is to use a given table such as http://www.packomania.com. If you can, restrict yourself to a square.
I have this for-loop:
y1 = 0; y2 = 3264; x1 = 0; x2 = 4928; uc = 1; vc = 1; scale = 1;
for (var y = y1; y < y2; y++) {
for (var x = x1; x < x2; x++) {
sumR = 0;
sumG = 0;
sumB = 0;
i = 0;
for (var v = -vc; v <= vc; v++) {
for (var u = -uc; u <= uc; u++) {
if (kernel[i] != 0) {
var tempX = x + u < 0 ? 0 : x + u;
var tempY = y + v < 0 ? 0 : y + v;
tempX = tempX >= width ? width - 1 : tempX;
tempY = tempY >= height ? height - 1 : tempY;
sumR += pixels.data[((tempY * (pixels.width*4)) + (tempX * 4)) + 0] * kernel[i];
sumG += pixels.data[((tempY * (pixels.width*4)) + (tempX * 4)) + 1] * kernel[i];
sumB += pixels.data[((tempY * (pixels.width*4)) + (tempX * 4)) + 2] * kernel[i];
}
i++;
}
}
tempArray.push(sumR * scale, sumG * scale, sumB * scale, 255);
}
console.log(y + "|" + y2);
}
So basically it's about image processing, the loop stops at y = 3115 without any error, everything after the loop isn't computed it just "crashes" there. Do you guys have any ideas how this could happen? Can there be a problem with memory?
UPDATE: I think I made this abit unclear: if I use this algorithm for a image with size y2 = 1000 and x2 = 1000 everything is working fine. But if the images get bigger it just stopps working, there is no errormessage in the console!
uc + vc = 1; is a invalid statement,
uc and vc don't seem to be defined anywhere,
scale isn't defined anywhere.
The second x1 here should probably be x2:
x1 = 0; x1 = 4928;
//Should probably be:
x1 = 0; x2 = 4928;
This pretty much comes down to: "debug your code".
Okay finally I found the problem,
I initialized the array this way: var tempArray = []; above the for-loops, next step was that I tried to initialize it this way : var tempArray = new Array(width * height * 4)
The browser just stopped at that position now and didn't even enter the for-loops. So I guess the Array is just to big to create.
Solution: I am using a Typed Array now and everything is working:
var tempArray = new Uint8ClampedArray(width * height * 4);