29:null 2a:["$","title",null,{"children":"OpenCV.js Hough Line Transform | Brett Cooper | Observable"}] 2f: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.

30:T933,{ const inputImage = await FileAttachment("image.png").image() const gray = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'grayCanvas'}); const filtered = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'filteredCanvas'}); const canny = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'cannyCanvas'}); const out = Object.assign(DOM.canvas(inputImage.width, inputImage.height),{id:'outCanvas'}); let src = cv.imread(inputImage ); let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); //cv.CV_8UC3 let dst2 = cv.Mat.zeros(src.rows, src.cols, cv.CV_8UC3); //cv.CV_8UC3 let lines = new cv.Mat(); let colour = new cv.Scalar(200, 150, 150); // colour do draw output in cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, cv.CV_8UC1); // Convert the input image to grayscale. cv.imshow(gray, src); cv.bilateralFilter(src, dst2, bf1, bf2, bf3, cv.BORDER_DEFAULT); // cv.bilateralFilter( src, dst, d, sigmaColor, sigmaSpace[, dst[, borderType]] ) cv.imshow(filtered, dst2); cv.Canny(dst2, src, T1, T2,3); // cv2.Canny(input, output, threshold1, threshold2[, edges[, apertureSize[, L2gradient]]]) cv.imshow(canny, src); cv.HoughLinesP(src, lines, hl1, Math.PI / hl2, hl3, hl4, hl5); // cv.HoughLines (image, lines, rho, theta, threshold, srn =0, stn =0, min_theta =0, max_theta = Math.PI) // draw lines for (let i = 0; i < lines.rows; ++i) { let startPoint = new cv.Point(lines.data32S[i * 4], lines.data32S[i * 4 + 1]); let endPoint = new cv.Point(lines.data32S[i * 4 + 2], lines.data32S[i * 4 + 3]); cv.line(dst, startPoint, endPoint, colour); } cv.imshow(out, dst); src.delete(); dst.delete(); dst2.delete(); lines.delete(); const css = 'max-width:100%'; inputImage.style.cssText += css; out.style.cssText += css; gray.style.cssText += css; filtered.style.cssText += css; canny.style.cssText += css; return html`

${inputImage}

${gray}

${filtered}

${canny}

${out}

` }31:[{"id":"618eac71bac7ac5ca1abaf11915a1b7b95551cb27969afbac47d950586af8798f01559a560fd764753179f58a3fbcf5b56209dfecbc210c86fca43d5172b08f3","href":"https://static.observableusercontent.com/files/618eac71bac7ac5ca1abaf11915a1b7b95551cb27969afbac47d950586af8798f01559a560fd764753179f58a3fbcf5b56209dfecbc210c86fca43d5172b08f3","name":"image.png","type":"image/png","lastModified":1637608726231.378,"size":194904},{"id":"47a8ac54f740dff79f69749e069e5875b873a55aff4c8592ec0131781d2f66b4e153ef2526e39e535903fa211699dd59c40590736e0f39c84aaab7b353137f0c","href":"https://static.observableusercontent.com/files/47a8ac54f740dff79f69749e069e5875b873a55aff4c8592ec0131781d2f66b4e153ef2526e39e535903fa211699dd59c40590736e0f39c84aaab7b353137f0c","name":"image@1.png","type":"image/png","lastModified":1637614188605.381,"size":13141}] 2d:{"id":"abcd9e60192dae9b","slug":"opencv-js-hough-line-transform","title":"OpenCV.js Hough Line Transform","thumbnail":"84e00ccb5ce4ad7267398ba6e47f148366a8590d0fdc3bfb65b3e3d8c27313e6","access_level":"public","create_time":"$D2021-11-22T19:18:46.231Z","update_time":"$D2022-02-23T07:32:18.956Z","view_time":null,"first_public_time":"$D2021-11-22T22:23:30.262Z","has_unpublished_edits":null,"fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":711,"publish_version":711,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"title":"OpenCV.js Hough Line Transform","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","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: 50, 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], {value: 20, step: 1, label: \"Threshold 1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"viewof T2 = Inputs.range([0, 255], {value: 60, step: 1, label: \"Threshold 2\"}) // 120","pinned":false,"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, 64], {value: 2, 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, 255], {value: 0, step: 1, label: \"srn\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"viewof hl5 = Inputs.range([0, 255], {value: 0, step: 1, label: \"stn\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"import {cv, handleError, registerFile} from \"@mootari/opencv-js\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"