//Playing with pixels p5.disableFriendlyErrors = true; let Sketch = []; let f1 = function(a1){ let cnv,img,dpi,Width, imgHeight,sdpi,sr,sg,sb; //p5.disableFriendlyErrors = true; dpi = 3; let col = []; a1.preload = function(){ img =a1.loadImage('https://images.pexels.com/photos/129743/pexels-photo-129743.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260'); } a1.setup = function(){ Width = a1.windowWidth; imgHeight = (Width * img.height)/img.width; cnv = a1.createCanvas(Width, imgHeight*2 + 4*dpi); sdpi = a1.createSelect(); sdpi.option('1. Quality Low'); sdpi.option('2. Quality Med'); sdpi.option('3. Quality Good'); sdpi.option('4. Quality High'); sdpi.selected('2. Quality Med'); sr = a1.createSelect(); sr.option("1. red <=> red") sr.option("2. red <=> green"); sr.option("3. red <=> blue"); sr.option("4. red <=> average"); sg = a1.createSelect(); sg.option("4. green <=> average"); sg.option("2. green <=> green"); sg.option("3. green <=> blue"); sg.option("1. green <=> red"); sb = a1.createSelect(); sb.option("2. blue <=> green"); sb.option("3. blue <=> blue"); sb.option("1. blue <=> red"); sb.option("4. blue <=> average"); sr.changed(a1.render); sb.changed(a1.render); sg.changed(a1.render); sdpi.changed(a1.render); a1.render(); } a1.render = function(){ dpi = parseInt(sdpi.value().split('')[0]); a1.pixelDensity(dpi); a1.image(img, 0, 0, a1.width, imgHeight); a1.loadPixels(); for ( let y = 0; y < imgHeight * dpi; y++){ for( let x =0; x < a1.width*dpi; x++){ let index = (x + y * a1.width*dpi ) * 4; let nindex = (x + (y +4*dpi+ parseInt( imgHeight * dpi ))* a1.width * dpi ) * 4; col[1] = a1.pixels[index + 0]; col[2] = a1.pixels[index + 1]; col[3] = a1.pixels[index + 2]; col[4] = (col[1]+col[2]+col[3])/3; a1.pixels[nindex + 0] = col[sr.value()[0]] a1.pixels[nindex + 1 ] = col[sg.value()[0]] a1.pixels[nindex + 2] = col[sb.value()[0]]; a1.pixels[nindex + 3] = 255; }} a1.updatePixels(); // sketch2 = new p5(f2) } } let f2 = function(a2){ let cnv, img,dpi,imgHeight,sdpi,opt; //p5.disableFriendlyErrors = true; dpi = 1; opt = 'B&W'; a2.preload = function(){ img =a2.loadImage('https://images.pexels.com/photos/302478/pexels-photo-302478.jpeg?auto=compress&cs=tinysrgb&h=650&w=940'); } a2.setup = function(){ imgHeight = (a2.windowWidth * img.height)/img.width; cnv = a2.createCanvas(a2.windowWidth, imgHeight*2 + 4*dpi); sdpi = a2.createSelect(); sdpi.option('1. Quality Low'); sdpi.option('2. Quality Med'); sdpi.option('3. Quality Good'); sdpi.option('4. Quality High'); sdpi.selected('2. Quality Med'); sdpi.changed(a2.render); opt = a2.createSelect(); opt.option('B&W'); opt.option('Sepia'); opt.option('Invert color'); opt.option("Only Red"); opt.option("Only Blue"); opt.option("Only Green"); opt.option("Solarize"); opt.selected('B&W'); opt.input(a2.render); a2.render(); } a2.render = function (){ dpi = parseInt(sdpi.value().split('')[0]); a2.pixelDensity(dpi); a2.image(img,0,0,a2.width, imgHeight); a2.loadPixels(); for ( let y = 0; y < imgHeight * dpi; y++){ for( let x =0; x < a2.width*dpi; x++){ let index = (x + y * a2.width*dpi ) * 4 let nindex = (x + (y +4*dpi+ parseInt( imgHeight * dpi ))* a2.width * dpi ) * 4; let r = a2.pixels[index + 0]; let g = a2.pixels[index + 1]; let b = a2.pixels[index + 2]; let avg = (r+g+b)/3; switch(opt.value()){ case 'Sepia': r = 0.393*r + 0.769*g + 0.189*b; g = 0.349*r + 0.686*g + 0.183*b; b = 0.272*r + 0.534*g + 0.131*b; break; case 'B&W': r = avg;g = avg;b = avg; break; case 'Invert color': r = 255 - r; g = 255 - g; b = 255 - b; break; case 'Only Red': r = r;g=0;b=0;break; case 'Only Green': g = g;r=0;b=0;break; case 'Only Blue': b=b;g=0;r=0;break; case 'Solarize': if(avg<138){ r=255-r;g=255-g;b=255-b; } break; } a2.pixels[nindex + 0] = r; a2.pixels[nindex + 1 ] = g; a2.pixels[nindex + 2] = b; a2.pixels[nindex + 3] = 255; }} a2.updatePixels(); } //new p5(f3) } let f3 = function(a3){ let cnv, img,dpi,r,g,b,imgHeight,slider; //p5.disableFriendlyErrors = true; dpi = 1; let blur = 1; //let blurAvg = Math.pow(blur*2+1, 2); let blurAvg; a3.preload = function(){ img =a3.loadImage('https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?auto=compress&cs=tinysrgb&h=650&w=940'); } a3.setup = function(){ imgHeight = (a3.windowWidth * img.height)/img.width; cnv = a3.createCanvas(a3.windowWidth, imgHeight*2 + 4*dpi); sdpi = a3.createSelect(); sdpi.option('1. Quality Low'); sdpi.option('2. Quality Med'); sdpi.option('3. Quality Good'); sdpi.option('4. Quality High'); //sdpi.selected('2. Quality Med'); let btype = a3.createSelect(); btype.option("1. Box blur"); btype.option("2. Gaussian blur"); btype.option("3. Motion blur"); btype.option("4. Zoom blur"); let opt = a3.selectAll("option", "#f4"); for(let el of opt){ el.attribute("disabled","true"); } let temp = a3.selectAll('option', '#f4'); for(let i = 1;i<=temp.length-1;i++){ temp[i].attribute('disabled', 'true');} sdpi.changed(a3.render); a3.createElement("br"); slider = a3.createSlider(0,5,1); a3.createButton("Apply").mousePressed(a3.render); slider.input( function(){ blur = slider.value(); }); a3.render(); } a3.render = function(){ dpi = parseInt(sdpi.value().split('')[0]); a3.pixelDensity(dpi); a3.image(img, 0, 0, a3.width, imgHeight); a3.loadPixels(); for ( let y = 0; y < imgHeight * dpi; y++){ for( let x =0; x < a3.width*dpi; x++){ r=0;g=0;b=0;blurAvg=0; for (let j =-blur; j<=blur; j++){ for(let i =-blur; i<=blur; i++){ let xx = x+i ;let yy = y+j; if(xx>=0 && xx=0 && yyval[0] &&g>val[1]&&rval[3]&&bval[5]){ r=buffer.pixels[index]; g=buffer.pixels[index+1]; b=buffer.pixels[index+2]; }else{ //a11.print(`${r} ${g} ${b}`) } a12.pixels[nindex + 0] = r-50; a12.pixels[nindex + 1 ] = g-50; a12.pixels[nindex + 2] = b-50; a12.pixels[nindex + 3] = 255; }} a12.updatePixels(); } } //Sketch9 = new p5(f9, 'f9'); //Sketch8 = new p5(f8, 'f8'); //Sketch4 = new p5(f4, 'f3'); //Sketch1 = new p5(f1, 'f2'); //let sketch2 = new p5(f2, 'f1'); //let sketch3 = new p5(f3, 'f4'); //let sketch5 = new p5(f5, 'f5'); //let sketch6 = new p5(f6, 'f6'); //let sketch7 = new p5(f7, 'f7'); //if(!Sketch7)Sketch7 = new p5(f7, 'f7'); const enable = (a,b,c) =>{ if(!Sketch[a])Sketch[a] = new p5(b, c); } let prevScroll =0; let diff =0; window.onscroll = function (){ let h = document.getElementById('h'); let scroll = window.scrollY; if(diff<-10 && scroll >30){ prevScroll = scroll; h.style.top = '-60px'; } else if(diff>30){ prevScroll = scroll; h.style.top = '0px'; } diff = prevScroll - scroll; } setTimeout(function(){ document.getElementById('logo').style.display = 'none'},1000); //alert('it takes about 10-15 seconds to load');

Basic image processing