31:T461,{ c let p5 = cv.imread("p5canny"); let CC = cv.imread("canColour"); const teDST = new cv.Mat(w, h, p5.type()); const maskOut = cv.Mat.zeros(w, h, p5.type()); const m2 = cv.Mat.zeros(w, h, p5.type()); let dsize = new cv.Size(w, h); cv.resize(p5, p5, dsize, 0, 0, cv.INTER_AREA); // resize p5 canvas cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);// resize mask cv.resize(CC, CC, dsize, 0, 0, cv.INTER_AREA);// resize mask // my attempts at adding coloured lines. // cv.cvtColor(dst, maskOut, cv.COLOR_GRAY2RGBA, 0) // cv.add(p5, CC, maskOut, dst, -1); // cv.subtract(p5, CC, maskOut, dst, -1 ) //cv.bitwise_not(CC,dst); cv.bitwise_and(p5, CC, maskOut, dst); // cv.bitwise_xor(p5, CC, maskOut, dst); // cv.bitwise_or(p5, CC, maskOut, dst); if (checkbox.length == 0) { cv.cvtColor(dst, maskOut, cv.COLOR_GRAY2RGBA, 0) } cv.addWeighted(p5, alpha, maskOut, beta, gamma, teDST,-1); cv.imshow(canvas2, teDST); // maskOut | teDST teDST.delete() p5.delete() maskOut.delete() CC.delete() m2.delete() return 'The coloured mask lines function()' }32:T4c9,c = p5(sketch => { let can = 0 let wordIndex = 0 let wordlen = text.length let ctx=0 sketch.setup = function() { can = sketch.createCanvas(w,h,sketch.P2D) can.id('p5canny') sketch.noStroke() sketch.frameRate(8) // to reduce flickering ctx=can.canvas.getContext('2d'); }; sketch.draw = function() { sketch.background('#CCC5B8') let cr = colourRange() for (let y=0; y

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 
)

resize()
[cv.resize](https://docs.opencv.org/4.x/dd/d52/tutorial_js_geometric_transformations.html)(src, dst, dsize, fx = 0, fy = 0, interpolation = cv.INTER_LINEAR)

resize(
  src	  input image
  dst	  output image; it has the size dsize (when it is non-zero) or the size computed from src.size(), fx, and fy; the type of dst is the same as of src.
  dsize	output image size; if it equals zero, it is computed as:  dsize=Size(round(fx∗src.cols),round(fy∗src.rows)) Either dsize or both fx and fy must be non-zero.
  fx	   scale factor along the horizontal axis; when it equals 0, it is computed as (double)dsize.width/src.cols
  fy	   scale factor along the vertical axis;   when it equals 0, it is computed as (double)dsize.height/src.rows
  interpolation	interpolation method(see cv.InterpolationFlags)

Get a [pixel colour](https://docs.opencv.org/4.x/de/d06/tutorial_js_basic_ops.html#:~:text=3.-,ptr,-Mat%20Type).

let row = 3, col = 4;
let src = cv.imread("canvasInput");
let pixel = src.ucharPtr(row, col);
let R = pixel[0];
let G = pixel[1];
let B = pixel[2];
let A = pixel[3];

addWeighted ( src1, alpha, src2, beta, gamma, dst, dtype = -1)

InputArray src1, double alpha, InputArray src2, double beta, double gamma, OutputArray dst, int dtype = -1 )

let scalar = new cv.Scalar(R, G, B, Alpha); 34:[{"id":"e16efc025c4b34d36c4eae8fd2d78a3432af4604630d204d9c8bfaffa6f7a2672bc75ae2e6caaf0d5446a339fb89e13628a4ae25ae2ee3f1d0d028939077de3a","href":"https://static.observableusercontent.com/files/e16efc025c4b34d36c4eae8fd2d78a3432af4604630d204d9c8bfaffa6f7a2672bc75ae2e6caaf0d5446a339fb89e13628a4ae25ae2ee3f1d0d028939077de3a","name":"harriet_n-0-Enhanced-Animated.mp4","type":"video/mp4","lastModified":1645397192140.377,"size":3822575},{"id":"f3ee610c95651820f2369957bf9cbbc793714e406a2bb707b95bc55c1ca23e5fd030493b126134bdd68d6ed5ee4171594e965def8ad4cc528dcf0bfcf9b3c566","href":"https://static.observableusercontent.com/files/f3ee610c95651820f2369957bf9cbbc793714e406a2bb707b95bc55c1ca23e5fd030493b126134bdd68d6ed5ee4171594e965def8ad4cc528dcf0bfcf9b3c566","name":"StFelix-HarrietTubman-PhotofromBill fix.jpg","type":"image/jpeg","lastModified":1645397192140.377,"size":1328484}] 2f:{"title":"# Black History Month - Harriet Tubman","cells":[{"id":0,"value":"# # Black History Month - Harriet Tubman\n\n\nPlanning to use text/typography to make a picture with image outlines via openCV.\t\n\nhttp://www.harriet-tubman.org/quotes/ for ascii based image \n\nBase image Harriet Tubman: \n${await FileAttachment(\"StFelix-HarrietTubman-PhotofromBill fix.jpg\").image({width:512})}\n\nConverted to video via https://www.myheritage.com/deep-nostalgia \n\n# Play the video to start the animations.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1269,"value":"video = {\n const video = htl.html`