Blogs - Socoder

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|640\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Blogs Home -> Blogs

Pakz	Created : 07 March 2024 Edited : 08 March 2024 Old computer
My mum has been trying to fix her home. Getting rid of lots of old stuff. She asked if I wanted my stepfathers old computer and monitor. An old desktop Celeron J3060 with 4gb of memory. It took me close to 2 days before it got updated. Old fashioned HDD. But it has a 1tb drive. Next year Windows 10 wil no longer get updates. So one year of use left. I got the idea to use it for a kind of 'fishing'. I wanted to see if I could create a program that could convert a canvas its content to drawing instructions. My idea was to use a genetic algorithm for that. The old Celeron is only about 5x times slower than my fastest device. But it can be left on for days if needed. I got to the point where I did all the population and mutation and lots of testing. In about 10.000.000 passes it gets close to turning a letter from the alphabet in a series of line instructions. It is not very smart. Just brute force and looking at the highest scoring sets of line instruction scripts. I need to further tweak the code. Make a nice interface. Turn the line coordinates into javascript code. And put this into a text area when the percentage similarity is close to 99.99. Quite fun and educative. I got new insights in how to do things like ocr and genetic algorithms. The corrent html page with the code and a visual animated progress display is here : (It might take 5 to 10 minutes before it begins to look like the inputted letter) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas Draw and Compare</title> </head> <body> <canvas id="canvasLetter" width="32" height="32" style="border:1px solid #000;"></canvas> <canvas id="canvasLines" width="32" height="32" style="border:1px solid #000;"></canvas> <canvas id="canvasHighest" width="32" height="32" style="border:1px solid #000;"></canvas> <script> //document.addEventListener('DOMContentLoaded', function() { const canvasLetter = document.getElementById('canvasLetter'); const ctxLetter = canvasLetter.getContext('2d'); const canvasLines = document.getElementById('canvasLines'); const ctxLines = canvasLines.getContext('2d'); const canvasHighest = document.getElementById('canvasHighest'); const ctxHighest = canvasHighest.getContext('2d'); function calculateSimilarity(arr1, arr2) { if (arr1.length !== arr2.length) { throw new Error("Input arrays must have the same length."); } let count = 0; for (let i = 0; i < arr1.length; i++) { if (arr1[i] === arr2[i]) { count++; } } const similarityPercentage = count / arr1.length; return similarityPercentage; } function convertToGrayscale(imageData) { for (let i = 0; i < imageData.length; i++) { const pixel = imageData[i]; // Extract the red, green, and blue components from the pixel const red = (pixel >> 16) & 0xff; const green = (pixel >> 8) & 0xff; const blue = pixel & 0xff; // Calculate the grayscale value using the luminosity method const grayscale = Math.round(0.299 * red + 0.587 * green + 0.114 * blue); // Create a new pixel value with equal RGB components var newPixel = (grayscale << 16) \| (grayscale << 8) \| grayscale; // Replace the original pixel with the new grayscale pixel if(newPixel<1000){ newPixel = 5 }else{ newPixel = 16777215 } imageData[i] = newPixel; } return imageData; } // Function to draw a letter on a canvas function drawLetter(ctx, letter) { ctx.fillStyle = "white" ctx.fillRect(0,0,32,32) ctx.fillStyle = "#000"; ctx.font = "28px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(letter, canvasLetter.width / 2, canvasLetter.height / 2); } var script = [0,0,0,0,0] // Function to draw random lines on a canvas function drawHighest(ctx, loc=0) { ctx.fillStyle = "white" ctx.fillRect(0,0,32,32) ctx.fillStyle = "#000"; var l = script[0] //if(Math.random()<.001)console.log(topPopulation[loc]+","+loc) var numOfLines = l //if(Math.random()<0.01)console.log(numOfLines) var num = 0 //script.push(numOfLines) for (let i = 0; i < numOfLines; i++) { //const x0 = Math.random() * canvasLines.width; //const y0 = Math.random() * canvasLines.height; //const x1 = Math.random() * canvasLines.width; //const y1 = Math.random() * canvasLines.height; //script.push(x0) //script.push(y0) //script.push(x1) //script.push(y1) num+=1 var x0 = script[num]//+(Math.floor(Math.random()2)-2) num+=1 var y0 = script[num]//+(Math.floor(Math.random()2)-2) num+=1 var x1 = script[num]//+(Math.floor(Math.random()2)-2) num+=1 var y1 = script[num]//+(Math.floor(Math.random()2)-2) num+=1 var lw = script[num] //ctx.fillStyle = "#000"; ctx.lineWidth = lw//+//Math.floor(Math.random()3) ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); } } function drawLines(ctx, numOfLines) { ctx.fillStyle = "white" ctx.fillRect(0,0,32,32) ctx.fillStyle = "#000"; script = [] script.push(numOfLines) for (let i = 0; i < numOfLines; i++) { const x0 = Math.random() canvasLines.width; const y0 = Math.random() * canvasLines.height; const x1 = Math.random() * canvasLines.width; const y1 = Math.random() * canvasLines.height; script.push(x0) script.push(y0) script.push(x1) script.push(y1) //ctx.fillStyle = "#000"; var lw = Math.floor(Math.random()3+1) ctx.lineWidth = lw script.push(lw) ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); } } // Function to draw random lines on a canvas function drawLinesTopPopulation(ctx,loc=0) { ctx.fillStyle = "white" ctx.fillRect(0,0,32,32) ctx.fillStyle = "#000"; var l = topPopulation[loc][0] //if(Math.random()<.001)console.log(topPopulation[loc]+","+loc) var numOfLines = l //if(Math.random()<0.01)console.log(numOfLines) script = [] script.push(numOfLines) var adds = false // add a random line if(numOfLines<32 && Math.random()<.09){ var ll=Math.floor(Math.random()1) for(var j=0;j<ll;j+=1){ //numOfLines+=1 adds=true const x0 = Math.random() * canvasLines.width; const y0 = Math.random() * canvasLines.height; const x1 = Math.random() * canvasLines.width; const y1 = Math.random() * canvasLines.height; if(Math.random()<.99){ x1=x0+Math.random()3-1 y1=y0+Math.random()3-1 } script[0]+=1 script.push(x0) script.push(y0) script.push(x1) script.push(y1) var lw = Math.floor(Math.random()2+1) //ctx.fillStyle = "#000"; ctx.lineWidth = lw//+//Math.floor(Math.random()3) //if(Math.random()<.1)lw+=Math.floor(Math.random()3-3) script.push(lw) ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); } } //script.push(numOfLines) var num = 0 //script.push(numOfLines) for (let i = 0; i < numOfLines; i++) { //const x0 = Math.random() canvasLines.width; //const y0 = Math.random() * canvasLines.height; //const x1 = Math.random() * canvasLines.width; //const y1 = Math.random() * canvasLines.height; //script.push(x0) //script.push(y0) //script.push(x1) //script.push(y1) // every now and then shrink list //if(i<numOfLines-5 && Math.random()<.05 && numOfLines>1){ //num+=5 //numOfLines-=1 //script[0]-=1 //} num+=1 var x0 = topPopulation[loc][num]//+(Math.floor(Math.random()2)-2) num+=1 var y0 = topPopulation[loc][num]//+(Math.floor(Math.random()2)-2) num+=1 var x1 = topPopulation[loc][num]//+(Math.floor(Math.random()2)-2) num+=1 var y1 = topPopulation[loc][num]//+(Math.floor(Math.random()2)-2) // connect one point to a random point if(Math.random()<.009){ var s = Math.floor(Math.random()(numOfLines+1)5) var xx0 = topPopulation[loc][s] var yy0 = topPopulation[loc][s+1] var xx1 = xx0+Math.random()17-8 var yy1 = yy0+Math.random()17-8 script[0]+=1 script.push(xx0) script.push(yy0) script.push(xx1) script.push(yy1) //num+=1 var lw = 2 //ctx.fillStyle = "#000"; ctx.lineWidth = lw//+//Math.floor(Math.random()3) if(lw<3 && lw>1 && Math.random()<.1)lw+=Math.floor(Math.random()3-1.5) if(lw>4)lw=2 script.push(lw) ctx.lineWidth = lw ctx.beginPath(); ctx.moveTo(xx0, yy0); ctx.lineTo(xx1, yy1); ctx.stroke(); } // connect one point to a different point if(Math.random()<.01){ var s = Math.floor((Math.random()numOfLines)5) var e = Math.floor((Math.random()numOfLines)5) //var s = 1 //var e = 3 //s+=1 //e+=1 //if(Math.random()<.5){ //s+=2; //} //if(Math.random()<.5){ //e+=2; //} var xx0 = topPopulation[loc][s] var yy0 = topPopulation[loc][s+1] var xx1 = topPopulation[loc][e] var yy1 = topPopulation[loc][e+1] script[0]+=1 script.push(xx0) script.push(yy0) script.push(xx1) script.push(yy1) //num+=1 var lw = 2 //ctx.fillStyle = "#000"; ctx.lineWidth = lw//+//Math.floor(Math.random()3) if(lw<3 && lw>1 && Math.random()<.1)lw+=Math.floor(Math.random()3-1.5) if(lw>4)lw=2 script.push(lw) ctx.lineWidth = lw ctx.beginPath(); ctx.moveTo(xx0, yy0); ctx.lineTo(xx1, yy1); ctx.stroke(); } //mirror x var mirrored = false; var xx0 = x0; var yy0 = y0; var xx1 = x1; var yy1 = y1; if(Math.random()<.001){ xx0+=Math.abs((x1-x0)) mirrored = true } if(Math.random()<.001){ xx1+=Math.abs((x1-x0)) mirrored = true } if(Math.random()<.001){ xx0-=Math.abs((x1-x0)) mirrored = true } if(Math.random()<.001){ xx1-=Math.abs((x1-x0)) mirrored = true } if(mirrored && numOfLines<32){ script[0]+=1 script.push(xx0) script.push(yy0) script.push(xx1) script.push(yy1) //num+=1 var lw = 2//topPopulation[loc][num] //ctx.fillStyle = "#000"; ctx.lineWidth = lw//+//Math.floor(Math.random()3) if(lw<3 && lw>1 && Math.random()<.1)lw+=Math.floor(Math.random()3-1.5) if(lw>4)lw=2 script.push(lw) ctx.lineWidth = lw ctx.beginPath(); ctx.moveTo(xx0, yy0); ctx.lineTo(xx1, yy1); ctx.stroke(); } // randomize if(Math.random()<.001){ x0+=Math.floor(Math.random()17)-8 } if(Math.random()<.001){ y0+=Math.floor(Math.random()17)-8 } if(Math.random()<.001){ x1+=Math.floor(Math.random()17)-8 } if(Math.random()<.001){ y1+=Math.floor(Math.random()17)-8 } // randomize short (grow lines(or dots) into a better fit) if(Math.random()<.005){ x0+=Math.floor(Math.random()3)-2 } if(Math.random()<.005){ y0+=Math.floor(Math.random()3)-2 } if(Math.random()<.005){ x1+=Math.floor(Math.random()3)-2 } if(Math.random()<.005){ y1+=Math.floor(Math.random()3)-2 } // every now and then skip a line var nolin=true if(Math.random()<.09)nolin=false if(nolin){ script.push(x0) script.push(y0) script.push(x1) script.push(y1) num+=1 var lw = topPopulation[loc][num] //ctx.fillStyle = "#000"; ctx.lineWidth = lw//+//Math.floor(Math.random()3) if(lw>1 && Math.random()<.1)lw+=Math.floor(Math.random()3-1) if(lw>4)lw=2 if(lw<1)lw=1 script.push(lw) ctx.lineWidth = lw ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); }else{ script[0]-=1 } } } // Function to convert canvas content to an array function canvasToArray(ctx) { const imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); var arr = new Uint32Array(imgData.data.buffer); arr = convertToGrayscale(arr) //console.log(arr) return arr; } // Function to check if two arrays are identical function arraysMatch(arr1, arr2) { if (arr1.length !== arr2.length) return false; for (let i = 0; i < arr1.length; i++) { if (arr1[i] !== arr2[i]) return false; } return true; } // // Here you place the letter of the alphabet(or ??) and // then the genetic algorithm code wil try and turn // that letter into drawing instruction. This using up to 10+/- // lines of various width. // It might take 10 million passes at this point of development // (Graphics to drawing instructions - genetic algorithm) // (Letter to line script.) // // Draw a letter 'A' on the first canvas drawLetter(ctxLetter, 'R'); var linesArray = [] var highest = .7 var topPopulation = [] //}); //drawLinesTopPopulation(ctxLines,topPopulation.length-1) //console.log(i) //console.log(linesArray) var cnt=0 function gameLoop() { // Update game state for(var i=0;i<20000;i+=1){ // Get the array from the letter canvas const letterArray = canvasToArray(ctxLetter); // Draw random lines on the second canvas if(topPopulation.length>28)topPopulation.shift() const randomLines = Math.floor(Math.random() * 5) + 1; // 1 to 10 random lines if(topPopulation.length>4 && Math.random()<.99){ drawLinesTopPopulation(ctxLines,Math.floor(Math.random()*topPopulation.length)) }else{ drawLines(ctxLines, randomLines); } // Get the array from the lines canvas linesArray = canvasToArray(ctxLines); // Check if both arrays are identical and return the result const result = arraysMatch(letterArray, linesArray); //const result = arraysMatch(letterArray, letterArray); var t = calculateSimilarity(letterArray, linesArray) //if(t>highest){ var doit=false if(Math.random()<0.00001 && t>.985 && t>highest-0.025)doit=true if(t>highest){ doit=true highest = t drawHighest(ctxHighest); } if(t===highest && Math.random()<0.001) { doit=true highest = t drawHighest(ctxHighest); } if(doit){ topPopulation.push(script) drawLinesTopPopulation(ctxLines,topPopulation.length-1) console.log("New highest at :" + t + " num : "+topPopulation.length) } if(result===true)console.log('Are the two canvas arrays identical?', result); if(Math.random()<0.000005)console.log(cnt) cnt+=1 } //drawLinesTopPopulation(ctxLines,topPopulation.length-1) // Render game graphics if(highest>0.998){ console.log("close at :"+t); drawLinesTopPopulation(ctxLines,topPopulation.length-1) }else{ requestAnimationFrame(gameLoop); } } // Start the game loop requestAnimationFrame(gameLoop); </script> </body> </html> --v Stil tweaking. I have to check each letter. And discover tricks to speed it up.

Comments
Saturday, 09 March 2024, 23:34
Pakz	Ok. So I spend 8 hours yesterday tweaking and modifying the weights to get different results. Made it so it does al important characters of the alphabet. Broke the code at places though. There are various NaNs and undefined variables in the scripts. Which will cause the progress to get stuck. For getting a stylized font out of the tool might be a use. Skip out before .999 percent identical. Comparing was easy. I let Gemini make a function that compares 2 arrays and give a score between 0.0 and 1. Do random stuff and pick the highest score to add to population every time and continue. I let a older version run for maybe 16 hours on the old pc. Did a 100.000.000 passes. But did not complete the first character. I was able to learn stuff about ocr through Gemini. Path tracing and the option to discus scientific papers on approaches . Figured some new Debugging ideas. And more xp gained. Back to fixing my back problems. Got a whole series of new exercises the last 2 weeks. My upper back has never felt this great since I was diagnosed with scoliosis.
Tuesday, 12 March 2024, 13:54
Pakz	The old computer got replaced with a new computer. A small, almost pocket size mini pc from amazon. It has 16gb of memory, a intel n100 cpu and 512 gb of ssd storage. Was only around 200 euro's. It is only 20% slower in single core than my main (4500u 8gb amd) laptop. And 50% of the multi core performance. Wil be using it to run various slow gfx generator's for hours on end. Without it costing to much electricity. It has windows 11 pro.
Tuesday, 12 March 2024, 13:58
Jayenkai	Gosh! Just goes to show what tech they can cram into a tiny box, nowadays.
Tuesday, 12 March 2024, 14:03
Pakz	The usb? or hdmi? stick pc's are kind of nice too. But spec and price is not that great.
Tuesday, 12 March 2024, 14:35
Jayenkai	The whole mini Windows pc that can generate art, but is pocket sized! So cool!!
Tuesday, 12 March 2024, 14:43
Pakz	I think Samsung recently announced a kind of low powered neuromorphic chip. This for those neural net ai's that can generate art like Dali does. These use hundreds of times less energy than the current chips. Chaptgpt and dali and even movie ai might get real cheap pretty soon.

Old computer

Comments