Here’s a little sketch in Processing that does the following: loads an image, takes a horizontal and vertical 1px slice, multiplies each slice into an image off-screen, and blends the two images together and displays the original and blended one side by side. Each frame this is calculated dynamicaly, the slices are determined by the position of the mouse.
Note: the image must be in the folder where your sketch is saved and it must be in dimension of 300×300 pixels.
I still need to test this in a fullHD/1080p situation. I wonder if the CPU can take it at 60 frames per second. I actually suspect not. So many pixels and not on the GPU.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/* * code by nova@deviator.si */ PImage slices1; PGraphics slices2; PGraphics slices3; void setup () { size(600, 300); // load an image (should be inside the sketch forlder) slices1 = loadImage("storr1.jpg"); slices2 = createGraphics(300, 300); slices3 = createGraphics(300, 300); } void draw() { // get mouse data int my = constrain(mouseY, 0, 299); int mx = constrain(mouseX, 0, 299); // get slices from original image and draw two images off-screen slices1.loadPixels(); for (int x = 0; x < 300; x++) { // get color/pixels data color cx = slices1.pixels[my * 300 + x]; color cy = slices1.pixels[x * 300 + mx]; // draw first image of slices off-screen slices2.beginDraw(); slices2.stroke(cx); slices2.line(x, 0, x, 300); slices2.endDraw(); // draw second image of slices off-screen slices3.beginDraw(); slices3.stroke(cy); slices3.line(0, x, 300, x); slices3.endDraw(); } slices1.updatePixels(); // display original image image(slices1, 0, 0); // draw transparent lines where the slices are taken stroke(255, 30); line(mx,0,mx,300); stroke(255, 30); line(0, my, 300, my); // blend the hor+ver images and display // see http://processing.org/reference/blend_.html // for more ways how to blend two images slices3.blend(slices2, 0, 0, 300, 300, 0, 0, 300, 300, OVERLAY); image(slices3, 300,0); } |
