27:null 28:["$","title",null,{"children":"OpenCV.js Hough Line Transform | David A Roberts | Observable"}] 2d:T11dc,# OpenCV.js Hough Line Transform thanks to: > https://observablehq.com/@mootari/opencv-js > https://docs.opencv.org/4.5.4/d3/de6/tutorial_js_houghlines.html > https://www.sicara.ai/blog/2019-03-12-edge-detection-in-opencv

bilateralFilter()
cv.[bilateralFilter](https://docs.opencv.org/4.x/d4/d86/group__imgproc__filter.html#ga9d7064d478c95d60003cf839430737ed)( src, dst, d, sigmaColor, sigmaSpace[, dst[, borderType]] )

https://docs.opencv.org/3.4/js_filtering_bilateralFilter.html

bilateralFilter(	
InputArray  src,                        // Source 8-bit or floating-point, 1-channel or 3-channel image.
OutputArray dst,                        // Destination image of the same size and type as src
int         d,                          // Diameter of each pixel neighborhood that is used during filtering. If it is non-positive, it is computed from sigmaSpace.
double      sigmaColor,                 // Filter sigma in the color space. A larger value of the parameter means that farther colors within the pixel neighborhood
                                        // (see sigmaSpace) will be mixed together, resulting in larger areas of semi-equal color.
double      sigmaSpace,                 // Filter sigma in the coordinate space. A larger value of the parameter means that farther pixels will influence each other 
                                        // as long as their colors are close enough (see sigmaColor ). 
                                        // When d>0, it specifies the neighborhood size regardless of sigmaSpace. Otherwise, d is proportional to sigmaSpace.
int         borderType = BORDER_DEFAULT // border mode used to extrapolate pixels outside of the image, see BorderTypes
)

BorderTypes
cv.BORDER_CONSTANT	`iiiiii\|abcdefgh\|iiiiiii` with some specified `i`
cv.BORDER_REPLICATE	`aaaaaa\|abcdefgh\|hhhhhhh`
cv.BORDER_REFLECT	`fedcba\|abcdefgh\|hgfedcb`
cv.BORDER_WRAP	`cdefgh\|abcdefgh\|abcdefg`
cv.BORDER_REFLECT_101	`gfedcb\|abcdefgh\|gfedcba`
cv.BORDER_TRANSPARENT	`uvwxyz\|abcdefgh\|ijklmno`
cv.BORDER_REFLECT101	same as BORDER_REFLECT_101
cv.BORDER_DEFAULT	same as BORDER_REFLECT_101
cv.BORDER_ISOLATED	do not look outside of ROI

Canny()
cv.[Canny](https://docs.opencv.org/3.4/dd/d1a/group__imgproc__feature.html#ga04723e007ed888ddf11d9ba04e2232de)( input, output, threshold1, threshold2[, edges[, apertureSize[, L2gradient]]] )

The [Canny edge detection](http://justin-liang.com/tutorials/canny/).

https://docs.opencv.org/3.4/da/d5c/tutorial_canny_detector.html

Canny	(
  InputArray  input,              // image	8-bit input image.
  OutputArray output,              // edges	output edge map; single channels 8-bit image, which has the same size as image .
  double      threshold1,         // threshold1	first threshold for the hysteresis procedure.
  double      threshold2,         // threshold2	second threshold for the hysteresis procedure.
  int         apertureSize = 3,   // apertureSize	aperture size for the Sobel operator.
  bool        L2gradient = false 
)

![image@1.png](${await FileAttachment("image@1.png").url()})

HoughLinesP()
lines = cv.[HoughLinesP](https://docs.opencv.org/4.5.4/dd/d1a/group__imgproc__feature.html#ga8618180a5948286384e3b7ca02f6feeb)( image, lines, rho, theta, threshold[, lines[, minLineLength[, maxLineGap]]] )

**Parameters ** > **image** 8-bit, single-channel binary source image. The image may be modified by the function. **lines** Output vector of lines. Each line is represented by a 4-element vector (x1,y1,x2,y2) , where (x1,y1) and (x2,y2) are the ending points of each detected line segment. **rho** Distance resolution of the accumulator in pixels. **theta** Angle resolution of the accumulator in radians. **threshold** Accumulator threshold parameter. Only those lines are returned that get enough votes ( >threshold ). **minLineLength** Minimum line length. Line segments shorter than that are rejected. **maxLineGap** Maximum allowed gap between points on the same line to link them.

2e:[{"id":"47a8ac54f740dff79f69749e069e5875b873a55aff4c8592ec0131781d2f66b4e153ef2526e39e535903fa211699dd59c40590736e0f39c84aaab7b353137f0c","href":"https://static.observableusercontent.com/files/47a8ac54f740dff79f69749e069e5875b873a55aff4c8592ec0131781d2f66b4e153ef2526e39e535903fa211699dd59c40590736e0f39c84aaab7b353137f0c","name":"image@1.png","type":"image/png","lastModified":1727602883340.498,"size":13141},{"id":"b04394800fc161d193256839e3540b72d350eeb7f7725dfc743ebca1f340ec01332ff6199ed9f54b3e651012b738d0d8b18376c2c37c52866adf8e38ffc3522d","href":"https://static.observableusercontent.com/files/b04394800fc161d193256839e3540b72d350eeb7f7725dfc743ebca1f340ec01332ff6199ed9f54b3e651012b738d0d8b18376c2c37c52866adf8e38ffc3522d","name":"parking.jpeg","type":"image/jpeg","lastModified":1727602885613.539,"size":234495}] 2b:{"id":"41b6288dee92f0fc","slug":null,"title":"OpenCV.js Hough Line Transform","thumbnail":"39640e1f9cc041e845d4fb64c99b65b46270b6ceb61b7f6cb92d6471f97accf1","access_level":"public","create_time":"$D2024-09-29T09:41:23.340Z","update_time":"$D2024-10-05T03:02:35.057Z","view_time":null,"first_public_time":"$D2024-10-05T03:04:13.112Z","has_unpublished_edits":null,"fork":{"id":"abcd9e60192dae9b","slug":"opencv-js-hough-line-transform","title":"OpenCV.js Hough Line Transform","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1f7146abdc0b2673","login":"davidar","name":"David A Roberts","avatar_url":"https://avatars-next.observableusercontent.com/1a594fa641f55f40339d1710fc5cd12e91b5f0f56cf5110180dbd1d76699fcc6","tier":"starter_2024"},"version":849,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc9af32e8008f0bf","login":"davidar","name":"David A Roberts","avatar_url":"https://avatars-next.observableusercontent.com/1a594fa641f55f40339d1710fc5cd12e91b5f0f56cf5110180dbd1d76699fcc6","tier":null}],"members":[{"type":"team","id":"1f7146abdc0b2673","login":"davidar","name":"David A Roberts","avatar_url":"https://avatars-next.observableusercontent.com/1a594fa641f55f40339d1710fc5cd12e91b5f0f56cf5110180dbd1d76699fcc6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dc9af32e8008f0bf","login":"davidar","name":"David A Roberts","avatar_url":"https://avatars-next.observableusercontent.com/1a594fa641f55f40339d1710fc5cd12e91b5f0f56cf5110180dbd1d76699fcc6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"OpenCV.js Hough Line Transform","cells":[{"id":0,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"inputImage = await FileAttachment(\"parking.jpeg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"src = {\n let src = cv.imread(inputImage);\n let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);\n cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, cv.CV_8UC1); // Convert the input image to grayscale.\n cv.bilateralFilter(src, dst, bf1, bf2, bf3, cv.BORDER_DEFAULT);\n cv.Canny(dst, src, T1, T2, 3);\n return src;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"## bilateralFilter","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"viewof bf1 = Inputs.range([1, 64], {value: 6, step: 1, label: \"pixel size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"viewof bf2 = Inputs.range([0, 255], {value: 65, step: 1, label: \"Sigma Colour\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"viewof bf3 = Inputs.range([0, 255], {value: 75, step: 1, label: \"Sigma Space\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"## Canny edge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"viewof T1 = Inputs.range([0, 255], {\n value: 255,\n step: 1,\n label: \"Threshold 1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"viewof T2 = Inputs.range([0, 255], {\n value: 255,\n step: 1,\n label: \"Threshold 2\"\n}) // 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"{\n const canny = Object.assign(DOM.canvas(inputImage.width, inputImage.height), {\n id: \"cannyCanvas\"\n });\n cv.imshow(canny, src);\n return canny;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"dst = {\n let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3);\n let lines = new cv.Mat();\n cv.HoughLinesP(src, lines, hl1, Math.PI / hl2, hl3, hl4, hl5);\n for (let i = 0; i < lines.rows; ++i) {\n let startPoint = new cv.Point(\n lines.data32S[i * 4],\n lines.data32S[i * 4 + 1]\n );\n let endPoint = new cv.Point(\n lines.data32S[i * 4 + 2],\n lines.data32S[i * 4 + 3]\n );\n cv.line(\n dst,\n startPoint,\n endPoint,\n new cv.Scalar(\n Math.random() * 255,\n Math.random() * 255,\n Math.random() * 255\n )\n );\n }\n lines.delete();\n return dst;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"## HoughLinesP","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"viewof hl1 = Inputs.range([1, 255], {value: 1, step: 1, label: \"RHO\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"viewof hl2 = Inputs.range([1, 360], { value: 180, step: 1, label: \"theta\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"viewof hl3 = Inputs.range([0, 256], { value: 128, step: 1, label: \"theshold\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"viewof hl4 = Inputs.range([0, 2000], {\n value: 100,\n step: 1,\n label: \"minLineLength\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"viewof hl5 = Inputs.range([0, 2000], {\n value: 100,\n step: 1,\n label: \"maxLineGap\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"{\n const out = Object.assign(DOM.canvas(inputImage.width, inputImage.height), {\n id: \"outCanvas\"\n });\n cv.imshow(out, dst);\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"import { cv } from \"@mootari/opencv-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"