We Keep Coding

morph images effect in Processing

I would like to build a kind of image morphing tool in Processing. Similar to what you can see in this link:
https://giphy.com/gifs/painting-morph-oil-c8ygOpL64UDuw
My first step to achieve this was to build a two-dimensional grid of pixels. The pixels are filled with colour. The fill colour is created by reading colour from an image (PImage img1;) with the get(); function. This is how I recreated an image with my pixels. In the second step, I thought I would use the lerp(); function to give the respective pixels the colour of a second image (PImage img2;) - I thought this would create the desired morph effect. But I was wrong! The whole thing works - but the effect is only that a fade-in takes place between the two images. And no morphing. What exactly happens to pixels while this morph effect? How could I recreate it in Processing?
float pixel;
float pixelsize;
PImage img1;
PImage img2;
float counter;
void setup() {
size(1080, 1080);
pixel = 100;
pixelsize = width/pixel;
noStroke();
img1 = loadImage("0.jpg");
img2 = loadImage("1.jpg");
counter = 0;
}
void draw() {
background(255);
for (int y = 0; y < pixel; y++) {
for (int x = 0; x < pixel; x++) {
color c1 = img1.get(int(pixelsize*x), int(pixelsize*y));
color c2 = img2.get(int(pixelsize*x), int(pixelsize*y));
color from = c1;
color to = c2;
color interA = lerpColor(from, to, counter);
pushMatrix();
translate(pixelsize*x, pixelsize*y);
fill(interA);
rect(0, 0, pixelsize, pixelsize);
popMatrix();
}
}
counter= counter + 0.01;
}

Indeed it is not a straight forward task.
You're approach is not a bad start: it would result in a nice crossfade between the two images.
Bare in mind get() can be costly on the CPU.
You can however use the pixels[]:
PImage img1;
PImage img2;
// transition image
PImage imgT;
void setup() {
size(1080, 1080);
img1 = loadImage("0.jpg");
img2 = loadImage("1.jpg");
// copy the 1st image (copies width/height as well)
imgT = img1.get();
}
void draw() {
background(255);
// map transition amount to mouse X position
float t = map(mouseX, 0, width, 0.0, 1.0);
// make all pixels readable
imgT.loadPixels();
// lerp each pixel
for(int i = 0 ; i < imgT.pixels.length; i++){
imgT.pixels[i] = lerpColor(img1.pixels[i], img2.pixels[i], t);
}
// update all pixels in one go
imgT.updatePixels();
// display result
image(imgT, 0, 0);
}
Implementing a full morph image is non-trivial.
I can recomend two options to make use of existing algorithms, however these options are also not beginner friendly:
ImageMagick implements shepards distortion and there is a java library that interfaces with imagemagick: im4java. Note that you'd need to download the precompiled java library and drop the .jar file on top of your sketch and processing the output might take time: probably not feasible for realtime (however it should be possible to save individual frames to disk and assemble them as a gif/movie/etc.)
Using OpenCV: there's an OpenCV Face Morph tutorial with source code in c++ or Python and there is a Processing OpenCV library. It would be a matter of porting the c++/Python OpenCV calls to the Java OpenCV API.

Mimic JavaFX's ColorAdjust brightness using pure Java

I'm attempting to convert a color image to a useable monochrome image, but without the "jagged" edges.
From a similar question asking to convert an image from color to black and white, one of the accepted answers provides a simple trick from JavaFX's ColorAdjust class using a setBrightness(-1) technique. This technique has the benefit of maintaining the soft edges between black and white, such as supporting a high-contrast theme without creating all-new icons set.
Note: I do understand the inaccuracy of the word "monochrome" here (some grayscaling will occur) but I'm not sure how else to describe this technique.
What's a way to mimic the ColorAdust technique using pure Java?
Desired:
NOT Desired:

This is a pure Java approach. The Swing code is not needed to create the image. Instead of changing the image to black and white, we are changing the image to black and transparent. That is how we preserve those feathered edges.
result:
If you want a true grayscale image with no alpha, make a graphics2d object, fill it with the desired background color, then draw the image onto it.
As for preserving whites as white, this can be done, but one of two thing must be conceded. Either you give up the black and white aspect and adopt a true grayscale image, or you keep your black and white, but get a jagged edge where white feathers into any other color. This occurs because once we hit a light color pixel, how do we know whether it is a light colored feature, or a transition pixel between white and another color. I don't know of a way to fix that without edge detection.
public class Main {
private static void createAndShowGUI() {
//swing stuff
JFrame.setDefaultLookAndFeelDecorated(true);
JFrame frame = new JFrame("Alpha Mask");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setLayout(new BoxLayout(frame.getContentPane(), BoxLayout.PAGE_AXIS));
JLabel picLabel = new JLabel(new ImageIcon(getImg()));
frame.getContentPane().add(picLabel);
BufferedImage alphaMask = createAlphaMask(getImg());
JLabel maskLabel = new JLabel(new ImageIcon(alphaMask));
frame.getContentPane().add(maskLabel);
//Display the window.
frame.pack();
frame.setVisible(true);
}
public static BufferedImage getImg() {
try {
return ImageIO.read(new URL("https://i.stack.imgur.com/UPmqE.png"));
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
public static BufferedImage createAlphaMask(BufferedImage img) {
//TODO: deep copy img here if you actually use this
int width = img.getWidth();
int[] data = new int[width];
for (int y = 0; y < img.getHeight(); y++) {
// pull down a line if argb data
img.getRGB(0, y, width, 1, data, 0, 1);
for (int x = 0; x < width; x++) {
//set color data to black, but preserve alpha, this will prevent harsh edges
int color = data[x] & 0xFF000000;
data[x] = color;
}
img.setRGB(0, y, width, 1, data, 0, 1);
}
return img;
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(() -> createAndShowGUI());
}
}

What is the best way to read pixels of a JavaFX Canvas?

I want to get the color for specific coordinates inside a Canvas. I already tried getting a snapshot using this code:
WritableImage snap = gc.getCanvas().snapshot(null, null);
snap.getPixelReader().getArgb(x, y); //This just gets the color without assigning it.
But it just takes too much time for my application. I was wondering if there is any other way to access the color of a pixel for which I know the coordinates.

A Canvas buffers the drawing instructions prescribed by invoking the methods of a GraphicsContext. There are no pixels to read until the Canvas is rendered in a later pulse, and the internal format of the instruction buffer is not exposed in the API.
If a snapshot() of the Canvas is feasible, a rendered pixel may be examined using the resulting image's PixelReader.
int aRGB = image.getPixelReader().getArgb(x, y);
This example focuses on a single pixel. This example displays the ARGB BlendMode result in a TextField and a Tooltip as the mouse moves on the Canvas. More examples may be found here.
As an alternative, consider drawing into a BufferedImage, illustrated here, which allows access to the image's pixels directly and via its WritableRaster. Adding the following line to this complete example outputs the expected value for opaque red in ARGB order: ffff0000.
System.out.println(Integer.toHexString(bi.getRGB(50, 550)));

public class Pixel
{
private static final SnapshotParameters SP = new SnapshotParameters();
private static final WritableImage WI = new WritableImage(1, 1);
private static final PixelReader PR = WI.getPixelReader();
private Pixel()
{
}
public static int getArgb(Node n, double x, double y)
{
synchronized (WI)
{
Rectangle2D r = new Rectangle2D(x, y, 1, 1);
SP.setViewport(r);
n.snapshot(SP, WI);
return PR.getArgb(0, 0);
}
}
public static Color getColor(Node n, double x, double y)
{
synchronized (WI)
{
Rectangle2D r = new Rectangle2D(x, y, 1, 1);
SP.setViewport(r);
n.snapshot(SP, WI);
return PR.getColor(0, 0);
}
}
}

How to Change ImageIcon's Black Pixels to White Pixels?

I know I could just change it in a photo manipulation software, but I want to learn to do it programmatically so I can change it to any color I wish.
First off, I'd like to say that I've been searching for the solution around two hours and I couldn't find one that works for me, or one that deals with my exact problem.
I've downloaded some icons from the internet and they're originally black with transparent background, which is good for menu bars and stuff. But, they're hard to notice on my tool bar and I want to change the black color on those icons to white color. Here's an edited screenshot of what I'm trying to achieve and here's a screenshot of what I achieve. (Sorry for links, I need at least 10 reputation to post images.)
Here's my Utility class that's responsible for the failed work:
public final class Utility{
public static ImageIcon replaceIconColor(ImageIcon icon, Color oldColor, Color newColor){
BufferedImage image = iconToImage(icon);
for(int y = 0; y < image.getHeight(); y++){
for(int x = 0; x < image.getWidth(); x++){
Color pixel = new Color(image.getRGB(x, y));
if((pixel.getRed() == oldColor.getRed()) && (pixel.getGreen() == oldColor.getGreen()) && (pixel.getBlue() == oldColor.getBlue()) && (pixel.getAlpha() == oldColor.getAlpha())){
image.setRGB(x, y, newColor.getRGB());
}
}
}
return new ImageIcon(image);
}
public static BufferedImage iconToImage(ImageIcon icon){
return Resources.loadImage(icon.getDescription());
}
}
I'm not sure if you need resource loading class code, but I thought it could only help you to understand my problem fully and to be able to help me the best of your abilty. So, here's my Resources class code snippet:
public static ImageIcon loadImageIcon(String fileName){
URL imageURL = Resources.class.getResource("/Resources/Images/" + fileName);
ImageIcon imageIcon = new ImageIcon(imageURL);
imageIcon.setDescription(fileName);
return imageIcon;
}
public static BufferedImage loadImage(String fileName){
URL imageURL = Resources.class.getResource("/Resources/Images/" + fileName);
BufferedImage image = null;
try{
image = ImageIO.read(imageURL);
}catch(IOException e){
e.printStackTrace();
}
return image;
}
My apologies if there actually is a solution somewhere on the internet for this, but I couldn't find it. Well, that's all. I think I was specific enough.
Thank you in advance!

Two approaches are common:
Loop through the BufferedImage using getRGB() and setRGB() as needed, for example.
Use a LookupOp, as shown in the examples cited here.

Opacity in images with Processing

Very simple thing I'm trying to do here. I would like to have 2 images on top of one another. When i use my mouse event dragged and clicked on the top image, the area of the top level image selected will fade and make the lower image visible.
The way I see it, there are 2 ways I can do this:
I can make the top image Transparent over time (within the selected area)
or
I can delete the pixels individually in a spray can style fashion. Think the spray can tool from MS paint back in the day.
Heres some very basic code that i started which just lays the images on top of eachother
PImage sand;
PImage fossil;
void setup()
{
size(400,400);
background(255,255,0);
frameRate(30);
fossil = loadImage("foss.jpg");
sand = loadImage("sand.jpeg");
}
void draw()
{
image(fossil, 0, 0, width,height);
image(sand, 0, 0, width,height);
smooth();
if (mousePressed) {
fill(0);
tint(255,127); //the opacity function
} else {
fill(255);
}
}
So has anyone any comments on these 2 ways of creating opacity or perhaps there an easier way I've overlooked?
Perhaps I wasn't clear in my Spec as the 2 comments below are asking for clarification.
In its simplest terms, I have 2 images on top of each other. I would like to be able to make some modification to the top level image which would make the bottom image visible. However I need to make this modification to only part of the top level image.
I would like to know which is the better option. To make part of the top image become transparent using tint() or to delete the pixels from the top layer.
Then I will proceed with that approach. Any indication as to how to do it is also appreciated.
I hope this clears up any confusion.

If you simply want to crossfade between images, it can be with tint() as you code suggest. You were in fact quite close:
PImage sand;
PImage fossil;
void setup()
{
size(400, 400);
fossil = loadImage("CellNoise.jpg");
sand = loadImage("CellVoronoi.jpg");
}
void draw()
{
//tint from 255 to 0 for the top image
tint(255,map(mouseX,0,width,255,0));
image(fossil, 0, 0, width, height);
//tint from 0 to 255 for the bottom image - 'cross fade'
tint(255,map(mouseX,0,width,0,255));
image(sand, 0, 0, width, height);
}
For the "spray can style " erosion you can simply copy pixels from a source image into the destination image. It's up to you how you loop through pixels (how many, what order, etc.) to get the "spray" like effect you want, but here's a basic example of how to use the copy() function:
PImage sand,fossil;
int side = 40;//size of square 'brush'
void setup()
{
size(400, 400);
fossil = loadImage("CellNoise.jpg");
sand = loadImage("CellVoronoi.jpg");
}
void draw()
{
image(fossil, 0, 0, 400, 400);
if(mousePressed) {
for(int y = 0 ; y < side ; y++){
for(int x = 0; x < side; x++){
//copy pixel from 'bottom' image to the top one
//map sketch dimensions to sand/fossil an dimensions to copy from/to right coords
int srcX = (int)map(mouseX+x,0,width+side,0,sand.width);
int srcY = (int)map(mouseY+y,0,height+side,0,sand.height);
int dstX = (int)map(mouseX+x,0,width+side,0,fossil.width);
int dstY = (int)map(mouseY+y,0,height+side,0,fossil.height);
fossil.set(dstX, dstY, sand.get(srcX,srcY));
}
}
}
}
Note what I am simply looping to copy a square (40x40 in my case), but you can find other fun ways to loop and get different effects.
Have fun!