2b:null 2c:["$","title",null,{"children":"Image Transformation Fun | jzhang621 | Observable"}] 31:T845,function transformationLatex(matrix, rgbVector) { if (matrix.length !== 3 || matrix.some((row) => row.length !== 3)) { throw new Error("The matrix must be 3x3."); } if (rgbVector.length !== 3) { throw new Error("The input vector must be a 3x1 RGB vector."); } // Function to calculate the dot product of a matrix row and the vector function dotProduct(row, vector) { return row[0] * vector[0] + row[1] * vector[1] + row[2] * vector[2]; } // Applying the dot product for each row in the transformation matrix let resultVector = []; let dotProductExpressions = []; for (let i = 0; i < 3; i++) { // Dot product for each row let dotResult = dotProduct(matrix[i], rgbVector); resultVector.push(dotResult); // Creating the LaTeX expression of the dot product let expression = `(${matrix[i][0]} \\cdot ${rgbVector[0]}) + (${ matrix[i][1] } \\cdot ${rgbVector[1]}) + (${matrix[i][2]} \\cdot ${ rgbVector[2] }) = ${dotResult.toFixed(2)}`; dotProductExpressions.push(expression); } // Creating the LaTeX formatted matrix const matrixLatex = ` \\begin{bmatrix} ${matrix[0][0]} & ${matrix[0][1]} & ${matrix[0][2]} \\\\ ${matrix[1][0]} & ${matrix[1][1]} & ${matrix[1][2]} \\\\ ${matrix[2][0]} & ${matrix[2][1]} & ${matrix[2][2]} \\end{bmatrix} `; // Creating the LaTeX formatted RGB vector const vectorLatex = ` \\begin{bmatrix} ${rgbVector[0]} \\\\ ${rgbVector[1]} \\\\ ${rgbVector[2]} \\end{bmatrix} `; // Creating the resulting vector in LaTeX const resultVectorLatex = ` \\begin{bmatrix} ${resultVector[0].toFixed(2)} \\\\ ${resultVector[1].toFixed(2)} \\\\ ${resultVector[2].toFixed(2)} \\end{bmatrix} `; // Creating LaTeX dot product steps const dotProductLatex = dotProductExpressions .map((exp) => `${exp}`) .join(" \\\\ "); // Combine the matrix, vector, and dot products into one LaTeX output const multiplicationString = `${matrixLatex}${vectorLatex} = ${resultVectorLatex}`; return { multiplicationString, dotProductLatex }; }32:T48a,function applyTransformation(matrix, rgbVector) { if (matrix.length !== 3 || matrix.some((row) => row.length !== 3)) { throw new Error("The matrix must be 3x3."); } if (rgbVector.length !== 3) { throw new Error("The input vector must be a 3x1 RGB vector."); } // Function to calculate the dot product of a matrix row and the vector function dotProduct(row, vector) { return row[0] * vector[0] + row[1] * vector[1] + row[2] * vector[2]; } // Applying the dot product for each row in the transformation matrix let resultVector = []; let dotProductExpressions = []; for (let i = 0; i < 3; i++) { // Dot product for each row let dotResult = dotProduct(matrix[i], rgbVector); resultVector.push(dotResult); // Creating the string representation of the dot product let expression = `(${matrix[i][0]} * ${rgbVector[0]}) + (${matrix[i][1]} * ${rgbVector[1]}) + (${matrix[i][2]} * ${rgbVector[2]}) = ${dotResult}`; dotProductExpressions.push(expression); } return { dotProductExpressions, // Array of expressions showing the dot products resultVector // The resulting transformed RGB vector }; }33:T4f9,function applyFilterToRGBMatrix(rgbMatrix, filterMatrix) { const height = rgbMatrix.length; const width = rgbMatrix[0].length; // Create a new matrix to store the filtered RGB values const filteredMatrix = []; for (let y = 0; y < height; y++) { const row = []; for (let x = 0; x < width; x++) { const [r, g, b] = rgbMatrix[y][x]; // Apply the filter matrix to the RGB values const newR = Math.min( 255, Math.max( 0, Math.round( filterMatrix[0][0] * r + filterMatrix[0][1] * g + filterMatrix[0][2] * b ) ) ); const newG = Math.min( 255, Math.max( 0, Math.round( filterMatrix[1][0] * r + filterMatrix[1][1] * g + filterMatrix[1][2] * b ) ) ); const newB = Math.min( 255, Math.max( 0, Math.round( filterMatrix[2][0] * r + filterMatrix[2][1] * g + filterMatrix[2][2] * b ) ) ); // Push the new RGB values to the row row.push([newR, newG, newB]); } filteredMatrix.push(row); } return filteredMatrix; }34:T557,filters = [ { name: "grayscale", matrix: [ [0.299, 0.587, 0.114], [0.299, 0.587, 0.114], [0.299, 0.587, 0.114] ] }, { name: "sepia", matrix: [ [0.393, 0.769, 0.189], [0.349, 0.686, 0.168], [0.272, 0.534, 0.131] ] }, { name: "darken", matrix: [ [0.5, 0, 0], [0, 0.5, 0], [0, 0, 0.5] ] }, { name: "brightness", matrix: [ [1.5, 0, 0], [0, 1.5, 0], [0, 0, 1.5] ] }, { name: "saturation", matrix: [ [1.2, 0, 0], [0, 1.2, 0], [0, 0, 1.2] ] }, { name: "red_to_green", matrix: [ [0, 1, 0], [0, 1, 0], [0, 0, 1] ] }, { name: "red_tint", matrix: [ [1.5, 0, 0], [0, 1, 0], [0, 0, 1] ] }, { name: "blue_only", matrix: [ [0, 0, 0], [0, 0, 0], [0, 0, 1] ] }, { name: "blue_tint", matrix: [ [1, 0, 0], [0, 1, 0], [0, 0, 1.5] ] }, { name: "green_tint", matrix: [ [1, 0, 0], [0, 1.5, 0], [0, 0, 1] ] }, { name: "black_and_white", matrix: [ [0.333, 0.333, 0.333], [0.333, 0.333, 0.333], [0.333, 0.333, 0.333] ] }, { name: "none", matrix: [ [1, 0, 0], [0, 1, 0], [0, 0, 1] ] } ]35:T11b0,function createSVGFromRGBArrayWithHover(rgbArray, width, factor = 1) { const height = width; const svgNS = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("width", width); svg.setAttribute("height", height); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); // Calculate the size of each square based on the array length const rows = Math.sqrt(rgbArray.length); // Assuming a square grid in the full array const cols = rows; const rowsToRender = Math.floor(rows * factor); // Render only the portion of rows based on the factor const colsToRender = Math.floor(cols * factor); // Render only the portion of columns based on the factor const rectWidth = width / colsToRender; const rectHeight = height / rowsToRender; // Create a group to hold the hover effect elements const hoverGroup = document.createElementNS(svgNS, "g"); // Create a text element for the RGB value display const rgbText = document.createElementNS(svgNS, "text"); rgbText.setAttribute("fill", "white"); rgbText.setAttribute("font-size", "14px"); rgbText.setAttribute("text-anchor", "middle"); rgbText.setAttribute("dominant-baseline", "hanging"); rgbText.textContent = ""; // Create a rectangle for the color preview on hover const hoverRect = document.createElementNS(svgNS, "rect"); const hoverRectWidth = rectWidth * 6; const hoverRectHeight = hoverRectWidth; hoverRect.setAttribute("width", hoverRectWidth); hoverRect.setAttribute("height", hoverRectHeight); // hoverRect.setAttribute("fill", "transparent"); hoverRect.setAttribute("rx", 4); hoverRect.setAttribute("ry", 4); // Vertical border radius // Create a rectangle for the color preview on hover const highlightRect = document.createElementNS(svgNS, "rect"); highlightRect.setAttribute("width", rectWidth); highlightRect.setAttribute("height", rectWidth); function showHighlightRect(rectWidth, col, row, color) { const rectHeight = rectWidth; const offest = rectHeight; const centerX = col * rectWidth + rectWidth / 2; const centerY = row * rectHeight + rectHeight / 2; hoverGroup.setAttribute("display", "block"); hoverGroup.setAttribute("pointer-events", "none"); hoverRect.setAttribute("fill", color); hoverRect.setAttribute("x", centerX - hoverRectWidth / 2); hoverRect.setAttribute("y", row * rectHeight + offest * 2); rgbText.textContent = color; rgbText.setAttribute("x", centerX); // Slight offset to the bottom left rgbText.setAttribute("y", row * rectHeight - offest * 2); highlightRect.setAttribute("x", col * rectWidth); highlightRect.setAttribute("y", row * rectHeight); highlightRect.setAttribute("stroke", "white"); highlightRect.setAttribute("stroke-width", "1"); highlightRect.setAttribute("fill", color); } const colors = []; // Nested for loop to iterate over the rows and columns for (let row = 0; row < rowsToRender; row++) { for (let col = 0; col < colsToRender; col++) { const index = row * cols + col; // Calculate the index in the rgbArray const [r, g, b] = rgbArray[index]; const color = `rgb(${r}, ${g}, ${b})`; // Create a rectangle element const rect = document.createElementNS(svgNS, "rect"); rect.setAttribute("id", `${row}-${col}`); rect.setAttribute("x", col * rectWidth); rect.setAttribute("y", row * rectHeight); rect.setAttribute("width", rectWidth); rect.setAttribute("height", rectHeight); rect.setAttribute("fill", color); // rect.setAttribute("stroke", "#a8b3c5"); // rect.setAttribute("stroke-width", ".25"); // // Add hover event // rect.addEventListener("mouseenter", () => { // showHighlightRect(rectWidth, col, row, color); // }); // rect.addEventListener("mouseleave", () => { // hoverGroup.setAttribute("display", "none"); // }); svg.appendChild(rect); colors.push(color); } } // hoverGroup.appendChild(rgbText); // hoverGroup.appendChild(hoverRect); // hoverGroup.appendChild(highlightRect); // svg.appendChild(hoverGroup); // This is how I target a specific rect const targetRow = 9; const targetCol = 12; const flatIndex = targetRow * rowsToRender + targetCol; const targetRect = svg.getElementById(`${targetRow}-${targetCol}`); // showHighlightRect(rectWidth, targetCol, targetRow, colors[flatIndex]); // Return the created SVG element return svg; }36:T1324,function renderCanvasWithEyedropper(rgbArray, width, factor = 1) { const height = width; const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; const rows = Math.sqrt(rgbArray.length); // Assuming a square grid const cols = rows; const rowsToRender = Math.floor(rows * factor); const colsToRender = rowsToRender; const rectWidth = canvas.width / colsToRender; const rectHeight = canvas.height / rowsToRender; // Draw the initial grid rgbArray.forEach((rgb, index) => { const row = Math.floor(index / cols); const col = index % cols; const [r, g, b] = rgb; ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; ctx.fillRect(col * rectWidth, row * rectHeight, rectWidth, rectHeight); ctx.lineWidth = 0.25; ctx.strokeStyle = "#a8b3c5"; ctx.strokeRect(col * rectWidth, row * rectHeight, rectWidth, rectHeight); }); // Create the eyedropper circle (hidden initially) const eyedropper = document.createElement("div"); eyedropper.style.position = "absolute"; eyedropper.style.width = `${rectWidth / 0.125}px`; eyedropper.style.height = `${rectHeight / 0.125}px`; eyedropper.style.borderRadius = "5%"; // eyedropper.style.border = "2px solid white"; eyedropper.style.pointerEvents = "none"; // Don't interfere with mouse events eyedropper.style.display = "none"; // Initially hidden document.body.appendChild(eyedropper); // Create an RGB display element const rgbDisplay = document.createElement("div"); rgbDisplay.style.position = "absolute"; rgbDisplay.style.backgroundColor = "rgba(255, 255, 255, 0.8)"; rgbDisplay.style.padding = "2px"; rgbDisplay.style.borderRadius = "2px"; rgbDisplay.style.fontSize = "12px"; rgbDisplay.style.border = "1px solid #ccc"; rgbDisplay.style.display = "none"; // Initially hidden document.body.appendChild(rgbDisplay); let lastCol = null; let lastRow = null; canvas.addEventListener("mousemove", (event) => { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const col = Math.floor(x / rectWidth); const row = Math.floor(y / rectHeight); const index = row * cols + col; if (lastRow !== row || lastCol !== col) { // Remove previous stroke by redrawing the previous rectangle if (lastRow !== null && lastCol !== null) { const lastIndex = lastRow * cols + lastCol; const [r, g, b] = rgbArray[lastIndex]; ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; ctx.fillRect( lastCol * rectWidth, lastRow * rectHeight, rectWidth, rectHeight ); ctx.lineWidth = 0.25; ctx.strokeStyle = "#a8b3c5"; ctx.strokeRect( lastCol * rectWidth, lastRow * rectHeight, rectWidth, rectHeight ); } // Draw white stroke on the current pixel ctx.lineWidth = 2; ctx.strokeStyle = "#ffffff"; ctx.strokeRect(col * rectWidth, row * rectHeight, rectWidth, rectHeight); lastCol = col; lastRow = row; } // Get the corresponding RGB value from rgbArray const [r, g, b] = rgbArray[index] || [0, 0, 0]; // Default to black if no value found // Calculate center of the current rectangle const centerX = rect.left + col * rectWidth + rectWidth / 2; const centerY = rect.top + row * rectHeight + rectHeight / 2; // Move the eyedropper circle to the current rectangle eyedropper.style.left = `${centerX - rectWidth / 4}px`; eyedropper.style.top = `${centerY - rectHeight / 4}px`; eyedropper.style.display = "block"; // Show the eyedropper eyedropper.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; // Display the RGB value rgbDisplay.innerHTML = `rgb(${r}, ${g}, ${b})`; rgbDisplay.style.left = `${event.clientX - 27.5}px`; rgbDisplay.style.top = `${event.clientY + 32.5}px`; rgbDisplay.style.display = "block"; }); canvas.addEventListener("mouseleave", () => { eyedropper.style.display = "none"; // Hide the eyedropper when mouse leaves canvas rgbDisplay.style.display = "none"; // Hide the RGB display when mouse leaves canvas // Remove the stroke when leaving the canvas if (lastRow !== null && lastCol !== null) { const lastIndex = lastRow * cols + lastCol; const [r, g, b] = rgbArray[lastIndex]; ctx.fillStyle = `rgb(${r}, ${g}, ${b})`; ctx.fillRect( lastCol * rectWidth, lastRow * rectHeight, rectWidth, rectHeight ); ctx.lineWidth = 0.25; ctx.strokeStyle = "#a8b3c5"; ctx.strokeRect( lastCol * rectWidth, lastRow * rectHeight, rectWidth, rectHeight ); } lastCol = null; lastRow = null; }); return canvas; }37:T8b6,function interpolatePixelArrays(pixels2D, transformMatrix, interpolationValue) { // Input validation if ( !Array.isArray(pixels2D) || !pixels2D.every( (row) => Array.isArray(row) && row.every( (pixel) => Array.isArray(pixel) && pixel.length === 3 && pixel.every( (val) => Number.isInteger(val) && val >= 0 && val <= 255 ) ) ) ) { throw new Error("Invalid 2D pixel array format"); } if ( !Array.isArray(transformMatrix) || transformMatrix.length !== 3 || !transformMatrix.every((row) => Array.isArray(row) && row.length === 3) ) { throw new Error("Transform matrix must be 3x3"); } if ( typeof interpolationValue !== "number" || interpolationValue < 0 || interpolationValue > 1 ) { throw new Error("Interpolation value must be between 0 and 1"); } // Function to transform a single pixel function transformPixel(pixel, matrix) { const [r, g, b] = pixel; return [ Math.round(r * matrix[0][0] + g * matrix[0][1] + b * matrix[0][2]), Math.round(r * matrix[1][0] + g * matrix[1][1] + b * matrix[1][2]), Math.round(r * matrix[2][0] + g * matrix[2][1] + b * matrix[2][2]) ].map((val) => Math.min(255, Math.max(0, val))); // Clamp values between 0 and 255 } // Function to interpolate between two values function interpolate(start, end, factor) { return Math.round(start + (end - start) * factor); } // Transform each pixel and store transformed pixels in the same 2D structure const transformedPixels2D = pixels2D.map((row) => row.map((pixel) => transformPixel(pixel, transformMatrix)) ); // Interpolate between original and transformed pixels return pixels2D.map((originalRow, rowIndex) => { return originalRow.map((originalPixel, colIndex) => { const transformedPixel = transformedPixels2D[rowIndex][colIndex]; return [ interpolate(originalPixel[0], transformedPixel[0], interpolationValue), interpolate(originalPixel[1], transformedPixel[1], interpolationValue), interpolate(originalPixel[2], transformedPixel[2], interpolationValue) ]; }); }); }38:T62f,function* interpolatePixelTransform(pixels, transformMatrix, steps) { const dim = pixels.length; const identityMatrix = [ [1, 0, 0], // Identity matrix for the RGB transformation [0, 1, 0], [0, 0, 1] ]; // Function to interpolate between two matrices function interpolateMatrix(identityMatrix, transformMatrix, t) { const resultMatrix = [[], [], []]; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { resultMatrix[i][j] = identityMatrix[i][j] * (1 - t) + transformMatrix[i][j] * t; } } return resultMatrix; } // Function to apply a transformation matrix to a [r, g, b] pixel function applyMatrix(pixel, matrix) { const [r, g, b] = pixel; const newR = matrix[0][0] * r + matrix[0][1] * g + matrix[0][2] * b; const newG = matrix[1][0] * r + matrix[1][1] * g + matrix[1][2] * b; const newB = matrix[2][0] * r + matrix[2][1] * g + matrix[2][2] * b; return [ Math.min(Math.max(Math.round(newR), 0), 255), // Clamp to [0, 255] Math.min(Math.max(Math.round(newG), 0), 255), Math.min(Math.max(Math.round(newB), 0), 255) ]; } // Interpolation process for (let step = 0; step <= steps; step++) { const t = step / steps; // Fraction of progress for each step const currentMatrix = interpolateMatrix(identityMatrix, transformMatrix, t); // Apply the current transformation matrix to each pixel const transformedPixels = pixels.map((row) => row.map((pixel) => applyMatrix(pixel, currentMatrix)) ); yield transformedPixels; } } 39:T5ea,function renderImageWithSquare( rgbMatrix, squareSize, // The size of the square (outline) startRow, // Starting row of the square (outline) startCol, // Starting column of the square (outline) w = 512, // Width of the canvas h = 512, // Height of the canvas canvasId = "canvas" // Optional canvas ID ) { const canvas = html`