Develop Reference

Converting audio file to create an Image, and converting audio file into a format usable by class Picture

I have to write a program in Java that uses StdAudio and Picture to create a two-dimensional color visualization of a sound file while it is playing but I'm not really sure how to.
Can someone tell me everything that I need or tell me what I need to do to "convert" the sound file so that it's readable by Picture?
I could grab the samples from the sound file and return them as array of doubles, but then how would that even create an image? How could those values even sync with the image?
I have been playing around in eclipse just trying to figure out how this could possibly even work but my code just ends up being a whole mess.
private final static int SAMPLE_RATE = 44100;
private static int WIDTH = 500;
private static int HEIGHT = 100;
private static JFrame frame;
private static Picture pic;
public static void main(String[] args) throws IOException
{
pic = new Picture(WIDTH, HEIGHT); // <- blank black image
String audioFile = "SampleTest2.wav";
double[] audio = StdAudio.read(audioFile);
frame = new JFrame();
frame.setContentPane(pic.getJLabel());
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.setTitle("Sound Visualization");
frame.setResizable(false);
frame.pack();
frame.setVisible(true);
for (int k = 0; k < audio.length; k++)
StdAudio.play(audio[k]);
for (int i = 0; i < pic.width(); i ++)
{
for (int j = 0; j < pic.height(); j++)
{
pic.set(i, j, toColor(audio[SAMPLE_RATE + i]));
//frame.setContentPane(pic.getJLabel());
}
frame.repaint();
}
}
private static Color toColor(double colVal)
{
int r = (int) (((colVal + 1) / 2) * 255);
int g = (int) (((colVal + 1) / 2) * 255);
int b = (int) (((colVal + 1) / 2) * 255);
return new Color(r, g, b);
}

To use StdAudio you need wav file with sampling rate of 44100. It means every second of this sound consists of 44100 values(samples). When you load such file with duration of 1 second using method double[] read(String filename) you will obtain an array with 44100 elements. Javadoc of that method tells us the values will be between -1.0 and +1.0. We can iterate over every sample, map values from -1..1 range to 0..255 range (because colors need values from 0 to 255) and paint each pixel with this color. For better effect let's not paint single pixel but a column of 100 pixels.
I'll create image of 500x100. It will display only 500 samples so it will represent 500/44100 = only 0,01 of a second. To create empty picture of that size use:
Picture p = new Picture(500, 100);
To paint separate pixels along the image use:
for (int i = 0; i < 500; i++) {
p.set(i, 0, color);
}
and to display this picture use:
p.show();
Next, to create a color we need 3 values: red, green and blue components. Here we have only one value so the resulting image will be a greyscale image because saturation of every component will be the same value new Color(value, value, value). To quickly convert a range from -1..1 to 0..255 use such formula: (int) (((d + 1) / 2) * 255)
I used the first sound file from this site:
http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/index-e.html and the image I obtained is:
The code I used is:
import java.awt.Color;
import java.io.IOException;
public class StackOverflow58899141 {
private static int IMAGE_WIDTH = 500;
private static int IMAGE_HEIGHT = 100;
static String filename = "O:\\1.wav";
public static void main(final String[] args) throws IOException {
// reading sound file to samples
double[] samples = StdAudio.read(filename);
// creating empty image
Picture p = new Picture(IMAGE_WIDTH, IMAGE_HEIGHT);
// filling image from left to right
for (int i = 0; i < IMAGE_WIDTH; i++) {
// filling image from top to bottom
for (int j = 0; j < IMAGE_HEIGHT; j++) {
// adding 44100 to skip 1s of silence at the beginning
p.set(i, j, doubleToColor(samples[44100 + i]));
}
}
p.show();
}
// convert number from range -1.0..1.0 to 0..255
private static Color doubleToColor(double d) {
int val = (int) (((d + 1) / 2) * 255);
return new Color(val, val, val);
}
}
Now you have a solid start to understand how it works. Although Picture class allows easy saving of an image it doesn't allow animating. To achieve that you'd need to create own JFrame and draw image and delay drawing each column of pixels to get the animation effect.

Cannot find symbol - method setColor(java.awt.Color)?

I am attempting to create a new color palette for an image turned to gray scale, and then apply the palette to the gray scale image. I began the method that I wanted to use to apply the palette, but I ran into the error mentioned in the title. I used "java.awt.Color" already in my code, so I am not sure why I am getting the error. Also, as you will see, I placed a color inside the parenthesis.
/**
* This program takes an image, converts it to grayscale, and uses a color palette to create new colors for the image.
*
* #author Dylan Hubbs
* #version 08/02/16
*/
import java.awt.Color ;
class ColorPalette
{
public void grayscaleEffect(Picture pictureObj)
{
int redValue = 0; int greenValue = 0; int blueValue = 0;
Pixel grayscaleTargetPixel = new Pixel(pictureObj, 0,0);
Color grayscalePixelColor = null;
for(int y=0; y < pictureObj.getHeight(); y++)
{
for(int x = 0; x < pictureObj.getWidth(); x++)
{
grayscaleTargetPixel = pictureObj.getPixel(x,y);
grayscalePixelColor = grayscaleTargetPixel.getColor(); //gets the color of the target pixel
grayscalePixelColor = new Color((grayscaleTargetPixel.getRed() + grayscaleTargetPixel.getGreen() + grayscaleTargetPixel.getBlue()) / 3, (grayscaleTargetPixel.getRed() + grayscaleTargetPixel.getGreen() + grayscaleTargetPixel.getBlue()) / 3, (grayscaleTargetPixel.getRed() + grayscaleTargetPixel.getGreen() + grayscaleTargetPixel.getBlue()) / 3);
grayscaleTargetPixel.setColor(grayscalePixelColor); //sets the new color of the target pixel
}//end of the inner for loop
}//end of the outer for loop
pictureObj.explore(); //explore the Picture object which is now the altered image
pictureObj.write("grayscaleWashingtonMonument.jpg"); //write the altered Picture object to a new file
pictureObj.show();
}
public void paletteEffect(Picture pictureObj)
{
int redValue = 0; int greenValue = 0; int blueValue = 0;
Pixel paletteTargetPixel = new Pixel(pictureObj, 0,0);
Color palettePixelColor = null;
Color [] palette = {Color.RED, Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW, Color.GRAY, Color.PINK, Color.ORANGE};
for(int y=0; y < pictureObj.getHeight(); y++)
{
for(int x = 0; x < pictureObj.getWidth(); x++)
{
paletteTargetPixel = pictureObj.getPixel(x,y);
palettePixelColor = paletteTargetPixel.getColor();
if(paletteTargetPixel.getRed() >= 1 && paletteTargetPixel.getRed() <= 31)
palettePixelColor.setColor(palette[0]);
else if(paletteTargetPixel.getRed() >= 32 && paletteTargetPixel.getRed() <= 62)
palettePixelColor.setColor(palette[1]);
else if(paletteTargetPixel.retRed() >= 63 && paletteTargetPixel.getRed() <=93)
palettePixelColor.setColor(palette[2]);
}
}
}
}
public class ColorPaletteTester
{
public static void main(String[] args)
{
Picture pictureObj = new Picture("washingtonmonument.jpg"); //creates a new Picture object representing the file in the parameter list
pictureObj.explore();
ColorPalette cp = new ColorPalette();
cp.grayscaleEffect(pictureObj);
cp.paletteEffect(pictureObj);
}
}
So, the error is coming at
palettePixelColor.setColor(palette[0]);
Does anyone know why this would be happening?

palettePixelColor is declared as java.awt.Color, which happens to be an immutable class with no setters. Depending on what Pixel is, it may have such a method.
You are probably trying to do something like
palettePixelColor = palette[0];
or
paletteTargetPixel.setColor(palette[0]);

Splitting an Image Object into a 2D Array in Java

The aim of this little project is to break down an image (in this case a flag) into pieces like a jigsaw and store each piece in part of a 2D array. I then want to be able to view each piece individually so that I know it has worked.
I have created an object class which loads and stores the image. I created the object in my main class and then pass it to my splitImage method which divides the image into chunks and stores in the array. I would like to be able to view a section of the array to check that the splitImage method has worked correctly. Long term however I do need to view the array as I will be determining the colour of the pixel in each image piece and counting how many of each colour is in the image. When I run the current code I get the following in the console,
Exception in thread "main" java.lang.ClassCastException: sun.awt.image.ToolkitImage cannot be cast to java.awt.image.BufferedImage
at sample.ImageFrame.splitImage(ImageFrame.java:28)
at sample.ImageFrame.main(ImageFrame.java:59)
28 is the line - BufferedImage image = (BufferedImage)((Image) icon.getImage());
59 is - ImageFrame.splitImage(imageSwing.label);
I have played around with these for some time, changing the position trying other options and have been unsuccessful. Help on this is much appreciated.
Code is below and thanks in advance.
public class ImageSwing extends JFrame
{
public JLabel label;
public ImageSwing()
{
super("Test Image Array");
setLayout(new FlowLayout());
Icon flag = new ImageIcon(getClass().getResource("Italy_flag.jpg"));
label = new JLabel(flag);
label.setToolTipText("Italian Flag");
add(label);
}//main
}//class
public class ImageFrame
{
//public ImageSwing imageSwing = new ImageSwing();
//ImageSwing imageSwing = new ImageSwing();
public static BufferedImage splitImage(JLabel i) throws IOException
{
//Holds the dimensions of image
int rows = 4;
int cols = 4;
ImageIcon icon = (ImageIcon)i.getIcon();
BufferedImage image = (BufferedImage)((Image) icon.getImage());
int chunks = rows * cols; //Total amount of image pieces
int partWidth = i.getWidth() / cols; // determines the piece width
int partHeight = i.getHeight() / rows; //determines the piece height
int count = 0;
BufferedImage[][] flagArray = new BufferedImage[rows][cols]; //2D Array to hold each image piece
for (int x = 0; x < rows; x++)
{
for (int y = 0; y < cols; y++)
{
//Initialize the image array with image chunks
flagArray[x][y] = new BufferedImage(partWidth, partHeight, image.getType());
// draws the image chunk
Graphics2D gr = flagArray[x][y].createGraphics();
gr.drawImage(image, 0, 0, partWidth, partHeight, partWidth * y, partHeight * x, partWidth * y + partWidth, partHeight * x + partHeight, null);
gr.dispose();
}
}
return flagArray[rows][cols];
}
public static void main(String[] args)
{
ImageSwing imageSwing = new ImageSwing();
try
{
ImageFrame.splitImage(imageSwing.label);
} catch (IOException e)
{
e.printStackTrace();
}
imageSwing.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
imageSwing.setSize(260,180);
imageSwing.setVisible(true);
}//main
}//class

Take a look at Java converting Image to BufferedImage
It provides a way to convert from Image to BufferedImage, which seems to be the problem.

Change color of non-transparent parts of png in Java

I am trying to automatically change the color for a set of icons.
Every icon has a white filled layer and the other part is transparent.
Here is an example: (in this case it's green, just to make it visible)
I tried to do the following:
private static BufferedImage colorImage(BufferedImage image) {
int width = image.getWidth();
int height = image.getHeight();
for (int xx = 0; xx < width; xx++) {
for (int yy = 0; yy < height; yy++) {
Color originalColor = new Color(image.getRGB(xx, yy));
System.out.println(xx + "|" + yy + " color: " + originalColor.toString() + "alpha: "
+ originalColor.getAlpha());
if (originalColor.equals(Color.WHITE) && originalColor.getAlpha() == 255) {
image.setRGB(xx, yy, Color.BLUE.getRGB());
}
}
}
return image;
}
The problem I have is that every pixel I get has the same value:
32|18 color: java.awt.Color[r=255,g=255,b=255]alpha: 255
So my result is just a colored square.
How can I achieve to change the color of the non-transparent parts only? And why is it, that all pixels have even the same alpha value? I guess that's my main problem: That the alpha value isn't read correctly.

Why it doesn't work, I don't know, this will.
This changes all the pixles to blue, maintaining their alpha values...
import java.awt.image.BufferedImage;
import java.awt.image.WritableRaster;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
public class TestColorReplace {
public static void main(String[] args) {
try {
BufferedImage img = colorImage(ImageIO.read(new File("NWvnS.png")));
ImageIO.write(img, "png", new File("Test.png"));
} catch (IOException ex) {
ex.printStackTrace();
}
}
private static BufferedImage colorImage(BufferedImage image) {
int width = image.getWidth();
int height = image.getHeight();
WritableRaster raster = image.getRaster();
for (int xx = 0; xx < width; xx++) {
for (int yy = 0; yy < height; yy++) {
int[] pixels = raster.getPixel(xx, yy, (int[]) null);
pixels[0] = 0;
pixels[1] = 0;
pixels[2] = 255;
raster.setPixel(xx, yy, pixels);
}
}
return image;
}
}

The problem is, that
Color originalColor = new Color(image.getRGB(xx, yy));
discards all the alpha values. Instead you have to use
Color originalColor = new Color(image.getRGB(xx, yy), true);
to keep alpha values available.

If your bitmap is already set in an ImageView, just do :
imageView.setColorFilter(Color.RED);
to set all non transparent pixels to red.

Since we will always be replacing only the first three bands of the RGB pixel, more effective way to achieve the same without unnecessary allocation of new arrays would be:
private static void colorImageAndPreserveAlpha(BufferedImage img, Color c) {
WritableRaster raster = img.getRaster();
int[] pixel = new int[] {c.getRed(),c.getGreen(),c.getBlue()};
for (int x = 0; x < raster.getWidth(); x++)
for (int y = 0; y < raster.getHeight(); y++)
for (int b = 0; b < pixel.length; b++)
raster.setSample(x,y,b,pixel[b]);
}

Importing A Sprite from a sprite sheet

Well i have been watching a couple of videos of youtube on how take sprites from a spritesheet (8x8) and i really liked the tutorial by DesignsByZepher. However the method he uses results in him importing a sorite sheet and then changing the colors to in-code selected colours.
http://www.youtube.com/watch?v=6FMgQNDNMJc displaying the sheet
http://www.youtube.com/watch?v=7eotyB7oNHE for the color rendering
The code that i have made from watching his video is:
package exikle.learn.game.gfx;
import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
public class SpriteSheet {
public String path;
public int width;
public int height;
public int[] pixels;
public SpriteSheet(String path) {
BufferedImage image = null;
try {
image = ImageIO.read(SpriteSheet.class.getResourceAsStream(path));
} catch (IOException e) {
e.printStackTrace();
}
if (image == null) { return; }
this.path = path;
this.width = image.getWidth();
this.height = image.getHeight();
pixels = image.getRGB(0, 0, width, height, null, 0, width);
for (int i = 0; i < pixels.length; i++) {
pixels[i] = (pixels[i] & 0xff) / 64;
}
}
}
^This is the code where an image gets imported
package exikle.learn.game.gfx;
public class Colours {
public static int get(int colour1, int colour2, int colour3, int colour4) {
return (get(colour4) << 24) + (get(colour3) << 16)
+ (get(colour2) << 8) + get(colour1);
}
private static int get(int colour) {
if (colour < 0)
return 255;
int r = colour / 100 % 10;
int g = colour / 10 % 10;
int b = colour % 10;
return r * 36 + g * 6 + b;
}
}
^ and the code which i think deals with all the colors but im kinda confused about this.
My question is how do i remove the color modifier and just import and display the sprite sheet as is, so with the color it already has?

So you're fiddling with the Minicraft source, I see. The thing about Notch's code is that he substantially limited himself technically in this game. What the engine is doing is basically saying every sprite/tile can have 4 colors (from the grey-scaled spritesheet), he generates his own color palette that he retrieves colors from and sets accordingly during rendering. I can't remember exactly how many bits per channel he set and such.
However, you obviously are very new to programming and imo there's nothing better than fiddling with and analyzing other people's code.. that is, if you actually can do so. The Screen class is where the rendering takes place and hence it's what uses the spritesheet and therefore gives color accordingly to whatever tile you tell it to get. Markus is quite clever, despite poorly written code (which is completely forgiven as he did have 48 hours to make the damned thing ;))
if you want to just display the spritesheet as is, you can either rewrite the render function or overload it to something like this... (in class Screen)
public void render() {
for(int y = 0; y < h; y++) {
if(y >= sheet.h) continue; //prevent going out of bounds on y-axis
for(int x = 0; x < w; x++) {
if(x >= sheet.w) continue; //prevent going out of bounds on x-axis
pixels[x + y * w] = sheet.pixels[x + y * sheet.w];
}
}
}
This will just put whatever of the sheet it can fit into the screen for rendering (it's a really simple piece of code, but should work), the next step will be copying the pixels over to the actual raster for display, which I'm sure you can handle. (If you have copy-pasted all of the minicraft source code or some other slightly modified source code, you might want to change some things about that as well.)
All the cheers!

This basics would be to replace the get(int) method...
private static int get(int colour) {
//if (colour < 0)
// return 255;
//int r = colour / 100 % 10;
//int g = colour / 10 % 10;
//int b = colour % 10;
//return r * 36 + g * 6 + b;
return colour;
}
I'd also get rid of
for (int i = 0; i < pixels.length; i++) {
pixels[i] = (pixels[i] & 0xff) / 64;
}
From the main method
But to be honest, wouldn't it be easier to simply use BufferedImage#getSubImage?