Develop Reference

Drawing a smooth line in p5js

I have a function that I created which draws a line from the coordinates of its first argument to the coordinates of the second argument. The code runs the function using the mouse coordinates as the argument for the function. However, I am having an issue where moving the mouse cursor vertically will cause the line to be uneven.
let circles = [];
function setup() {
createCanvas(600, 600);
}
function draw() {
lineCreate([pmouseX,pmouseY],[mouseX,mouseY])
}
function lineCreate(point1, point2) {
length = sqrt(pow(point2[0]-point1[0],2) + pow(point2[1]-point1[1],2))
slope = (point2[1]-point1[1])/(point2[0]-point1[0])
x = min(point1[0],point2[0])
endX = max(point1[0],point2[0])
for (let i = x; i < endX; i++) {
pointSlope = slope*(i - point1[0]) + point1[1]
circle(i,pointSlope,2,2)
}
}

You need to connect the dots with lines:
function setup() {
createCanvas(600, 600);
strokeWeight(4);
noFill();
rect(2, 2, 596, 596);
}
function draw() {
line(pmouseX, pmouseY, mouseX,mouseY)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
If you want to draw the line with individual points, you need to distinguish whether the distance between the points is larger along the x-axis or the y-axis:
function setup() {
createCanvas(600, 600);
strokeWeight(4);
noFill();
rect(2, 2, 596, 596);
fill(0);
}
function draw() {
lineCreate([pmouseX,pmouseY], [mouseX,mouseY])
}
function lineCreate(point1, point2) {
x0 = point1[0];
x1 = point2[0];
y0 = point1[1];
y1 = point2[1];
if (abs(x1 - x0) > abs(y1 - y0)) {
if (x0 > x1) {
let t = x0; x0 = x1; x1 = t;
t = y0; y0 = y1; y1 = t;
}
for (let x = x0; x <= x1; x++) {
let y = y0 + (y1-y0) * (x-x0) / (x1-x0);
circle(x, y, 2);
}
} else {
if (y0 > y1) {
let t = x0; x0 = x1; x1 = t;
t = y0; y0 = y1; y1 = t;
}
for (let y = y0; y <= y1; y++) {
let x = x0 + (x1-x0) * (y-y0) / (y1-y0);
circle(x, y, 2);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

Javascript Midpoint Line Drawing Algorithm

I'm drawing a line in javascript using the Midpoint Algorithm Line Drawing.
When the line is in a descent trajectory, it computes the wrong values.
Can somebody help me?
data input
//midline(1,6,8,4);
function midline(x0, y0, x1, y1) {
/* Using midpoint algorithm for lines. */
const dx = x1 - x0;
const dy = y1 - y0;
var d = 2 * dy - dx;
const incrE = 2 * dy;
const incrNE = 2 * (dy - dx);
var x = x0;
var y = y0;
var output = [];
//listeners
console.log("dy = ", dy, "dx = ", dx);
console.log("d = ", d);
console.log("incrE = ", incrE);
console.log("incrNE = ", incrNE);
console.log("----------------------------------");
while (x <= x1) {
// if not the last x
console.log("x = ", x, " y = ", y);
output.push([x,y]);
if (d <= 0) {
console.log("E");
d = d + incrE;
x++;
} else {
console.log("NE");
d = d + incrNE;
x++;
y++;
}
}
console.table(output);
}

If per my comment the Mid Point Line Drawing algorithm is only suited for the first quadrant, that is...
x0 < x1 and y0 < y1
...must hold true, then adjustments are required if x1 < x0 or y1 < y0.
Taking the case presented (1,6) - (8,4), this is a downward slope because y1 < y0 (ie, 4 < 6 ). To make this a workable case for the Mid Point Line Drawing algorithm, you can simply negate the y values, in which case y0 < y1 will then hold true. Of course, when capturing the results, the values need to then be adjusted by multiplying by -1 again. So, suggest wedging in the following before putting x0, y0, x1, and y1 to use...
let xReflect = 1;
if ( x1 < x0 ) {
x0 = -x0;
x1 = -x1;
xReflect = -1;
}
let yReflect = 1;
if ( y1 < y0 ) {
y0 = -y0;
y1 = -y1;
yReflect = -1;
}
...and then, when pushing the output to the array, you will need to perform the following...
output.push( [ x * xReflect, y * yReflect ] );
Hope this helps.

Heightmap in javascript does not work

I want to create a height map as : z = f(x, y). I use the following javascript code:
var x0, x1, y0, y1, dx, dy;
var x, y, z;
var N = 61;
x0 = -3;
x1 = 3;
y0 = -3;
y1 = 3;
dx = (x1 - x0) / (N - 1);
dy = (y1 - y0) / (N - 1);
var i, j;
var z1 =new Array(N);
for(i=0; i<N; i++){
z1[i] = new Array(N);
}
for(i=0; i<N; i++){
x = x0 + i*dx;
for(j=0; j<N; j++){
y = y0 +j*dy;
z = 10*Math.sin(Math.sqrt(x*x+y*y));
z1[i][j].push(z);
}
}
alert("z(4, 5) = " + z1[4][5]));
It does not work. The matrix z1 is not created. What can I do ?

Two issues in your code:
you have a syntax error on alert with one extra closing parenthesis
you create a matrix and when going to z1[i][j], you do not see a table to push data into but directly the cell: instead of z1[i][j].push(z), I would put z1[i][j] = z
a possible correction:
var x0, x1, y0, y1, dx, dy;
var x, y, z;
var N = 61;
x0 = -3;
x1 = 3;
y0 = -3;
y1 = 3;
dx = (x1 - x0) / (N - 1);
dy = (y1 - y0) / (N - 1);
var i, j;
var z1 =[];
for(i=0; i<N; i++){
z1[i] = new Array(N);
}
for(i=0; i<N; i++){
x = x0 + i*dx;
for(j=0; j<N; j++){
y = y0 +j*dy;
z = 10*Math.sin(Math.sqrt(x*x+y*y));
z1[i][j] = z;
}
}
alert("z(4, 5) = " + z1[4][5]);

Javascript Bradley adaptive thresholding implementation

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;
}

Get all pixel coordinates between 2 points

I want to get all the x,y coordinates between 2 given points, on a straight line.
While this seems like such an easy task, I can't seem to get my head around it.
So, for example:
Point 1: (10,5)
Point 2: (15,90)

Edit: The solution below only applies from a geometrical point of view. Drawing on a screen is different than theoretical geometry, you should listen to the people suggesting Bresenham's algorithm.
Given, two points, and knowing that the line's equation is y = m*x + b, where m is the slope and b the intercept, you can calculate m and b and then apply the equation to all the values of the X axis between your A and B points:
var A = [10, 5];
var B = [15, 90];
function slope(a, b) {
if (a[0] == b[0]) {
return null;
}
return (b[1] - a[1]) / (b[0] - a[0]);
}
function intercept(point, slope) {
if (slope === null) {
// vertical line
return point[0];
}
return point[1] - slope * point[0];
}
var m = slope(A, B);
var b = intercept(A, m);
var coordinates = [];
for (var x = A[0]; x <= B[0]; x++) {
var y = m * x + b;
coordinates.push([x, y]);
}
console.log(coordinates); // [[10, 5], [11, 22], [12, 39], [13, 56], [14, 73], [15, 90]]

Given the point A(10, 5) and B(15, 90) and C(x, y) in AB we have:
(x - 10) / (y - 5) = (15 - 10) / (90 - 5)
What you can do is to iterate from x=10 to x=15 and calculate the corresponding y. Since x and y are integers, some times you have to round the result (or skip it).

Based on the wiki article, here's my JS code which handles both high and low lines:
const drawLine = (x0, y0, x1, y1) => {
const lineLow = (x0, y0, x1, y1) => {
const dx = x1 - x0
let dy = y1 - y0
let yi = 1
if (dy < 0) {
yi = -1
dy = -dy
}
let D = 2 * dy - dx
let y = y0
for (let x = x0; x < x1; x++) {
drawPoint(x, y)
if (D > 0) {
y = y + yi
D = D - 2 * dx
}
D = D + 2 * dy
}
}
const lineHigh = (x0, y0, x1, y1) => {
let dx = x1 - x0
const dy = y1 - y0
let xi = 1
if (dx < 0) {
xi = -1
dx = -dx
}
let D = 2 * dx - dy
let x = x0
for (let y = y0; y < y1; y++) {
drawPoint(x, y)
if (D > 0) {
x = x + xi
D = D - 2 * dy
}
D = D + 2 * dx
}
}
const { abs } = Math
if (abs(y1 - y0) < abs(x1 - x0)) {
if (x0 > x1) {
lineLow(x1, y1, x0, y0)
} else {
lineLow(x0, y0, x1, y1)
}
} else {
if (y0 > y1) {
lineHigh(x1, y1, x0, y0)
} else {
lineHigh(x0, y0, x1, y1)
}
}
}