|
|
| Line 23: |
Line 23: |
|
| |
|
| After the training, the results are evaluated, and minor adjustments are made to reach the final accuracy of 89%. Finally, by feeding a batch of 45 photos taken between September 2021-2022, the privacy values are exported to be used for image processing at later steps. | | After the training, the results are evaluated, and minor adjustments are made to reach the final accuracy of 89%. Finally, by feeding a batch of 45 photos taken between September 2021-2022, the privacy values are exported to be used for image processing at later steps. |
|
| |
| =='''Pixel Sorting Algorithm for Image Processing'''==
| |
|
| |
| After trying many methods to alter the photos, such as style transfer or mapping them in a different concept like Lissajous figures, randomized geometric shapes etc. it was more appealing and fruitful to process them via the colors they already carry.
| |
|
| |
| A bubble sorting algorithm and p5.js library features are used to change the images with the aim of not showing the actual image but the "encrypted" version. First, the image's pixel values are retrieved and with the bubble sorting, pixels are sorted according to their hue values and relocated until they are neighbors with another with the same hue value. Additionally, a random color function is assigned to the photos to have slightly different results for each time program runs. The final look of the images shows flowing pixel paths and different color gradings.
| |
|
| |
| ''code: ''
| |
|
| |
| <source style="border:none; height:650px; overflow:scroll;" lang="c" line start="55" highlight="4">
| |
| let img;
| |
| let imgCornerx;
| |
| let imgCornerY;
| |
| let counter = 0;
| |
|
| |
|
| |
| function preload() {
| |
| img = loadImage("cover/cover11.jpeg");
| |
| }
| |
|
| |
| function setup() {
| |
| img.resize(600, 0);
| |
| createCanvas(windowWidth, windowHeight);
| |
| pixelDensity(1);
| |
|
| |
| imgCornerx = (windowWidth-img.width)/2;
| |
| imgCornery = (windowHeight-img.height)/2;
| |
|
| |
| frameRate(10);
| |
| }
| |
|
| |
|
| |
| function draw() {
| |
|
| |
|
| |
| img.loadPixels();
| |
|
| |
| for (let i = 0; i < img.width - 1; i++) {
| |
| for (let j = 0; j < img.height - 1; j++) {
| |
|
| |
| if (random(2)<1) {
| |
| vmovePixels(i, j);
| |
| } else {
| |
| hmovePixels(i, j);
| |
| }
| |
|
| |
| counter++; //not to change every pixel during the process.
| |
|
| |
| if (counter<img.width*img.height*50) {
| |
|
| |
| randomColor(parseInt(random(img.width)), parseInt(random(img.height)));
| |
| } else {
| |
| //console.log(counter);
| |
| }
| |
| }
| |
| }
| |
|
| |
| img.updatePixels();
| |
|
| |
| background(0);
| |
|
| |
| image(img, imgCornerx, imgCornery);
| |
| //filter(INVERT);
| |
|
| |
| }
| |
|
| |
| // assign random colors to random pixels on the canvas
| |
| function randomColor(i, j, density="low") {
| |
|
| |
| if (density == "high") {
| |
| randomValue= random(50);
| |
|
| |
| } else {
| |
| randomValue = random(100);
| |
| }
| |
|
| |
| if(randomValue<0.05) {
| |
| const index5 = 4 * (j * img.width +i);
| |
| img.pixels[index5]= random(200);
| |
| img.pixels[index5+1]= random(200);
| |
| img.pixels[index5+2]= random(200);
| |
| }
| |
| }
| |
|
| |
| function hmovePixels(x, y) {
| |
| let neighbour;
| |
| let pix;
| |
|
| |
| //locating the pixel values in the array of values
| |
| const index = 4 * (y * img.width + x);
| |
| const index3 = 4 * (y * img.width + (x+1));
| |
| neighbour = [img.pixels[index3], img.pixels[index3+1], img.pixels[index3+2]];
| |
| pix = [img.pixels[index], img.pixels[index+1], img.pixels[index+2]];
| |
|
| |
| //bubble sort algorithm to first check the values of the pixels inside if condition,
| |
| if (hue(pix) < hue(neighbour)) {
| |
| temp = [];
| |
|
| |
| temp[0]= img.pixels[index]; //then displacement by putting the first index to the temporary position in a new array and,
| |
| img.pixels[index] = img.pixels[index3]; //exchanging the locations according to the if condition.
| |
| img.pixels[index3] = temp[0];
| |
|
| |
| //repeating it for all r,g,b values of the pixels.
| |
| temp[1]= img.pixels[index+1];
| |
| img.pixels[index+1] = img.pixels[index3+1];
| |
| img.pixels[index3+1] = temp[1];
| |
|
| |
| temp[2]= img.pixels[index+2];
| |
| img.pixels[index+2] = img.pixels[index3+2];
| |
| img.pixels[index3+2] = temp[2];
| |
|
| |
|
| |
| }
| |
| }
| |
|
| |
| function vmovePixels(x, y) {
| |
| let neighbour;
| |
| let pix;
| |
|
| |
| const index = 4 * (y * img.width + x);
| |
| const index3 = 4 * ((y+1) * img.width + x);
| |
| neighbour = [img.pixels[index3], img.pixels[index3+1], img.pixels[index3+2]];
| |
| pix = [img.pixels[index], img.pixels[index+1], img.pixels[index+2]];
| |
|
| |
| let a = random([hue, brightness]); //vertical move method works with either hue or brightness.
| |
| if (a(pix) < a(neighbour)) {
| |
| temp = [];
| |
|
| |
| temp[0]= img.pixels[index3];
| |
| img.pixels[index3] = img.pixels[index];
| |
| img.pixels[index] = temp[0];
| |
|
| |
| temp[1]= img.pixels[index+1];
| |
| img.pixels[index+1] = img.pixels[index3+1];
| |
| img.pixels[index3+1] = temp[1];
| |
|
| |
| temp[2]= img.pixels[index+2];
| |
| img.pixels[index+2] = img.pixels[index3+2];
| |
| img.pixels[index3+2] = temp[2];
| |
|
| |
| }
| |
| }
| |
| </source>
| |
