ARTICLE AD BOX
I am learning dithering, and the best way for me to do this is to play around in processing. My end goal is to create something that mimics the aesthetic of The Return of Obra Dinn.
My code so far does 2 things:
detect edges and change the color of edge pixels to white complete bayer dithering (though i think I may have done it a little differently than true bayer dithering. but this is not my issue, i'm fine the way it is and learning this on my own).The issue I am having is that the white edge pixels are not rendering. If I remove all the bayer dithering pieces in the draw function, it does draw correctly. However, with the bayer dithering it disappears. I sense it has to do with the order of how I'm rendering this, but I can't seem to figure out what I should change.
So far, I have tried moving things around in the draw function so that the whole chunk of changing edges happens at the end of the draw function rather than the start. I've also tried adding an if statement so that any white pixels on img are skipped when going through the loops of dithering. Maybe I'm loading and updating pixels incorrectly?
PImage img; color white= color(255); color black=color(0); IntList seed; int starter=0; int z=0; int v= 0; int gCols=0; int gRows=0; int [][]gMatrix; color light= #e5ffff; color dark= #333319; float pRound= 0; float gRound=0; void setup (){ size (800,500); img= loadImage("nosferatu.jpg"); noLoop(); img.loadPixels(); seed= new IntList(0,32,8,40,2,34,10,42,48,16,56,24,50,18,58,26,12,44,4,36,14,46,6,38,60,28,52,20,62,30,54,22,3,35,11,43,1,33,9,41,51,19,59,27,49,17,57,25,15,47,7,39,13,45,5,37,63,31,55,23,61,29,53,21); for (int k=0; k<seed.size();k++){ int newK= seed.get(k); int newS= (newK/63)*255; seed.set(k,newS); } int cols= 8; int rows= 8; int [][]matrix= new int [cols][rows]; for (int i = 0; i <rows; i++){ for (int j = 0; j<cols; j++){ matrix[j][i]= seed.get(starter); starter=starter+1; } } int fCols= img.width; int fRows= img.height; int [][]fMatrix = new int [fCols][fRows]; for (int t=0; t<fRows; t++){ if (v>7){ v=0; } for (int s=0; s<fCols; s++){ if (z>7){ z=0; } fMatrix[s][t]= matrix[z][v]; z=z+1; } v=v+1; } gCols= img.width; gRows= img.height; gMatrix= new int [gCols][gRows]; for (int q=0; q<gRows; q++){ for (int p=0; p<gCols; p++){ gMatrix[p][q]= fMatrix[p][q]; } } } void draw () { image(img,0,0); img.filter(GRAY); img.loadPixels(); PImage grayImg = img.copy(); grayImg.filter (BLUR,13); grayImg.loadPixels(); for (int y=1; y<grayImg.height-1; y++) { for (int x=1; x<grayImg.width-1; x++){ color gValue= grayImg.get (x,y); float g2Value= red(gValue); color lValue= grayImg.get(x-1,y); float l2Value= red(lValue); color rValue= grayImg.get(x+1,y); float r2Value= red(rValue); color bValue= grayImg.get(x, y+1); float b2Value= red(bValue); float rSub= abs(g2Value-r2Value); float lSub=abs(g2Value-l2Value); float bSub= abs(g2Value-b2Value); if ((rSub>5) || (lSub>5) || (bSub>5)){ img.set(x,y,white); } } } for (int yy =0; yy<img.height; yy++){ for (int xx=0; xx<img.width;xx++){ color iValue= img.get(xx,yy); float pValue= red(iValue); if (pValue != white){ if (pValue>255/2){ pRound = 255; } else { pRound=0; } if (gMatrix[xx][yy]>255/2){ gRound = 255; } else { gRound=0; } if (pValue>gMatrix[xx][yy]){ if (pRound==255){ img.set(xx,yy,light); } else { img.set(xx,yy,dark); }} else if (pValue < gMatrix[xx][yy]) { if (gRound == 255){ img.set(xx,yy,light); } else { img.set(xx,yy,dark); } } else{ img.set(xx,yy,gMatrix[xx][yy]); } } } } img.updatePixels(); image(img,0,0); }I know my code is not written efficiently. Again, I'm learning dithering so it's easier for me to first start by breaking up my challenge before optimizing.
Looking for some help to figure out what I am doing wrong. Can you point me in the right direction at least?
