As a personal project, I wanted to create a Android app that loads an image, desaturates it, blurs it slightly, posterizes it to 5 levels, and overlays it with a grid. I know how to do most of this, but wanted to see how ChatGPT could assist in this task. I wanted to prototype this first using the Processing IDE.
TL;DR
To summarize the results:
- The commentary is awesome, and a useful starting point for commenting the code.
- In general, the prompt responses save a lot of typing.
- Got the type of a parameter wrong. This could be caused by incomplete documentation for the selectInput() function and lack of tutorial.
- Used a deprecated and removed function posterize().
- Ignored instructions about which version of the libraries to use.
- Hallucinated a tint to the image.
- Combining the prompts resulted in different code that fixed some of the problems, introduced another, and hallucinated.
Locate Image File
Write Java using processing.org to browse for a file from a starting directory and open it.
Sure! Here’s an example Java code using Processing to browse for a file from a starting directory and open it:
import processing.core.*;
import javax.swing.*;
import java.io.*;
public class FileBrowser extends PApplet {
private String selectedFilePath = "";
public void setup() {
selectInput("Select a file to open:", "fileSelected");
}
public void fileSelected(File selection) {
if (selection == null) {
println("Window was closed or the user hit cancel.");
} else {
selectedFilePath = selection.getAbsolutePath();
println("Selected file: " + selectedFilePath);
openFile(selectedFilePath);
}
}
private void openFile(String filePath) {
// Implement your code to open the file here
}
public static void main(String[] args) {
PApplet.main("FileBrowser");
}
}
This code uses Processing’s built-in selectInput() method to open a file selection dialog. When the user selects a file, the fileSelected() method is called and the selected file path is stored in the selectedFilePath variable. The openFile() method is then called with the selected file path as an argument to implement your code to open the file.
Note that you need to have Processing installed to run this code. Once you have installed Processing, you can save this code as a Java file and run it using the Processing IDE.
A couple things. First, is that ChatGPT wrapped this as if I was using a vanilla Java IDE, not the Processing IDE — not a big nit — but annoying. Second, is that ChatGPT ignored my instruction about the starting directory — selectInput() defaults to the sketch data directory.
Write Java using processing.org to browse for a file from ~/images/ directory and open it.
This resulted in a fixed setup() function.
public void setup() {
String initialDir = System.getProperty("user.home") + "/images/";
selectInput("Select a file to open:", "fileSelected", initialDir);
}
Almost there. Unfortunately initialDir needs to be a File type, not a String type. To be fair, the Processing documentation for selectInput() is not specific about the type of the third parameter. Line should have been:
File initialDir = new File(System.getProperty("user.home") + "/images/*.jpg");
Image Manipulation
Write Java using the Processing IDE version 4 to open an image, desaturate it, blur it slightly, posterize it to 5 levels, and display it with a grid overlay.
PImage img;
void setup() {
size(640, 480);
img = loadImage("path/to/image.jpg");
image(img, 0, 0);
filter(GRAY);
filter(BLUR, 2);
posterize(5);
drawGrid(10);
}
void draw() {
// This is left blank because we only need to show the image once
}
void drawGrid(int spacing) {
stroke(255, 0, 0);
strokeWeight(1);
for (int x = 0; x <= width; x += spacing) {
line(x, 0, x, height);
}
for (int y = 0; y <= height; y += spacing) {
line(0, y, width, y);
}
}
Got rid of the Java wrapper by specifying the Processing IDE rather than processing.org. There are two problems with this code:
- There is no posterize() function in the Processing libraries. This should have been filter(POSTERIZE,5). Initially I thought this was a hallucination, but realized that in an old version of the Processing core, there was a posterize() function, that was subsequently deprecated and removed. Summary: ChatGPT ignored my instructions about version.
- Once the compile issue with posterize() is fixed, there is a more subtle issue. The code should have moved the image drawing functions into draw(), verified that the img variable has been initialized, and used noLoop() to only perform the draw once. This will become more serious once the file system browse and load is merged with this code. Alternatively, it could have put the noLoop() at the end of the setup() function, assuming no interactive manipulation would be desired.
Write Java using the Processing IDE version 4 to open an image, desaturate it, blur it slightly, posterize it to 5 levels using filter(), and display it with a grid overlay.
This changed the posterize(5) call to something reasonable.
img.filter(POSTERIZE, 5);
Wondering I could have used ChatGPT to debug why this code didn’t work, ditto for the bad parameter in the openFile section. Fodder for another post.
Putting it together
So let’s see what happens when we combine these two pieces.
Write Java using the Processing IDE version 4 to browse for a file from the ~/images/ directory, open the image, desaturate it, blur it slightly, posterize it to 5 levels using filter(), and display it with a grid overlay.
PImage img;
void setup() {
size(500, 500);
selectInput("Select an image to process:", "fileSelected");
}
void draw() {
if (img != null) {
// Set the transparency of the image to 50%
tint(255, 128);
// Display the image
image(img, 0, 0, width, height);
// Draw the grid
drawGrid();
}
}
void fileSelected(File selection) {
if (selection == null) {
println("No file was selected.");
} else {
// Load the selected image
img = loadImage(selection.getAbsolutePath());
// Desaturate the image
filter(GRAY);
// Apply a slight blur
filter(BLUR, 2);
// Posterize the image to 5 levels
filter(POSTERIZE, 5);
}
}
void drawGrid() {
stroke(255, 128);
strokeWeight(1);
int gridSize = 50;
for (int x = 0; x < width; x += gridSize) {
line(x, 0, x, height);
}
for (int y = 0; y < height; y += gridSize) {
line(0, y, width, y);
}
}
Wow. It ignored the instruction about the starting directory, added a tint (?), and fixed the null pointer problem. It also eliminated the drawGrid() parameter.
Mastodon
Watatic Tech 