Differences

This shows you the differences between two versions of the page.

--- ascii_art [2023/03/24 10:44] – frchris
+++ ascii_art [2023/03/25 15:26] – [Step 3. Convert the RGB tuples of your pixels into single brightness numbers] frchris
@@ Line 1: / Line 1: @@
 ====== ASCII Art ======
+<code>
             $$$$$$$$              $$$$$$
            m$$$$$$$$$          m$"""" "$$m
@@ Line 32: / Line 32: @@
                 "$$$$$mm$""          ""
                    """"
+</code>
+This Lab is based on one of  [[https://robertheaton.com/2018/06/12/programming-projects-for-advanced-beginners-ascii-art/|Robert Heaton's Advanced Beginners Projects]].  I have made starter code for Java Students about to take the AP Computer Science A Exam.  You need to know somehting about 2D Arrays and String Objects.
+==== Step 0. Choose an image ====
+Choose the first image that you want to convert into ASCII art. It’s good to start with an image around 640x480.  It can be in color, a photo, or a drawing.  Light pixels will be represented by small characters like a dot (.), which leave lots of the background exposed. On the other extreme, dense characters like $ are used to cover up the background.
+<code PickPicture.java>
+import java.awt.Color;
+import java.awt.Font;
+import java.awt.Graphics;
+import javax.swing.JFrame;
+import javax.swing.JPanel;
+import java.awt.image.BufferedImage;
+import java.io.File;
+import java.io.IOException;
+import javax.imageio.ImageIO;
+import java.awt.*;
+/**
+ *   PickPicture is Step 0 of the ASCII Art Lab
+ *   @author Chris Thiel, OFMCap
+ *   @version 25 Mar 2023
+ */
+public class PickPicture extends JPanel
+{
+    private String fileName;
+    private BufferedImage source;
+    private Font titleFont, regularFont;
+    public PickPicture(String fileName)
+    {
+        titleFont = new Font("Roman", Font.BOLD, 32);
+        regularFont = new Font("Helvetica", Font.PLAIN, 24);
+        try
+        {
+            // the line that reads the image file
+            this.fileName = fileName;
+            this.source = ImageIO.read(new File(fileName));
+            System.out.println(fileName + " read ");
+            System.out.println(source.getWidth() + " by " + source.getHeight());
+        }
+        catch (IOException e)
+        {
+            System.out.println("Whoa... something's not right:\n"+
+                  "Make sure the file is \n 1. In the project folder,\n " +
+                  "2. The file name is perfect-including capital letters\n " +
+                  "3. The extension is right-like .png or .jpg\n " + e);
+        }
+    }
+    public int getWidth() {return source.getWidth();}
+    public int getHeight() {return source.getHeight();}
+    public void paintComponent(Graphics g){
+        super.paintComponent(g);
+        g.setColor(Color.WHITE);
+        g.fillRect(0, 0, getWidth(),getHeight());
+        g.drawImage(source, 0, 0, null);
+        g.setColor(Color.BLACK);// Use WHITE if the image is dark
+        g.setFont(titleFont);
+        g.drawString(fileName, 20, 40);
+        g.setFont(regularFont);
+        g.drawString ( getWidth() + " by " + getHeight(), 20, 60);
+    }
+    public static void main(String[] args) {
+        PickPicture pic= new PickPicture("myPicture.jpg"); // change this to the picute you picked
+        JFrame window = new JFrame("Pick Picture");
+        window.setSize(pic.getWidth(), pic.getHeight());
+        window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
+        window.getContentPane().add(pic);
+        window.setVisible(true);
+    }
+}
+</code>
+==== Step 1. Read your image and print its height and width in pixels ====
+<code Step1.java>
+import java.awt.image.BufferedImage;
+import java.io.File;
+import java.io.IOException;
+import javax.imageio.ImageIO;
+public class Step1
+{
+  private BufferedImage image;
+  private String fileName;
+  public Step1(String fileName)
+  {
+    try
+    {
+      this.fileName = fileName;
+      image = ImageIO.read(new File(fileName));
+      System.out.println(fileName + " read ");
+      System.out.println("Demensions of " + fileName + ": ");
+      // Print the width and height of the image using a BufferedImage method.
+    }
+    catch (IOException e)
+    {
+      System.out.println("Whoa... something's not right:\n"+e);
+    }
+  }
+  public static void main(String[] args)
+  {
+    new Step1("My_Picture.jpg");
+  }
+}
+</code>
+==== Step 2. Load your image’s pixel data into a 2-dimensional array ====
+<code Step2.java>
+import java.awt.image.BufferedImage;
+import java.io.File;
+import java.io.IOException;
+import javax.imageio.ImageIO;
+public class Step2
+{
+  private BufferedImage image;
+  private String fileName;
+  private int width,height;
+  private int[] rgb; // for 8bit RGB packed in an int array
+  private Color[][] px;
+  public Step2(String fileName)
+  {
+    try
+    {
+      // the line that reads the image file
+      this.fileName = fileName;
+      image = ImageIO.read(new File(fileName));
+      System.out.println(fileName + " read ");
+      width = image.getWidth();
+      height = image.getHeight();
+      System.out.println("Demensions of " + fileName + ": " + width + " by " + height);
+      rgb = image.getRGB(0,0, width, height, null, 0, width);
+      System.out.println(rgb.length);
+      // rgb is a 1D array, with the rows listed one after the other.
+      ///to convert to a 2D array use something like this:
+      // grid (x,y) = rgb[ y*width + x];
+      // Make a new 2D array of color name px, and fill it from the  1D rgb array
+      // for example, px[0][0] = new Color ( rgb[0] );
+    }
+    catch (IOException e)
+    {
+      System.out.println("Whoa... something's not right:\n"+e);
+    }
+  }
+  public Color[][] getPx() { return px;}
+  public static void main(String[] args)
+  {
+    new Step2("My_Picture.jpg");
+  }
+}
+</code>
+ You can see what your new 2D Array of Color looks like with {{ ::step2tester.java |Step2Tester.java}}
+==== Step 3. Convert the RGB tuples of your pixels into single brightness numbers  ====
+Now that you have a 2D Array of ''Color'', you can use the ''Color'' methods of ''getRed()'', ''getGreen()'', and ''getBlue()'' to assign a single brightness number.   There are many different ways to map RGB values to brightness, and each produces a slightly different style of transformed image. Think of them like Instagram filters. Some examples:
+  - Average: average the R, G and B values - ''(R + G + B) / 3''
+  - Lightness: average the maximum and minimum values out of R, G and B - ''max(R, G, B) + min(R, G, B) / 2''
+  - Luminance: take a weighted average of the R, G and B values to account for human perception - ''0.2126 R + 0.7152 G + 0.0722 B''
+  - Luminosity: Take the sqrt root of the weighted squares - ''sqrt( 0.299 R^2 + 0.587 G^2 + 0.114 B^2)''
+  - See [[https://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color|this stackoverflow thread]] for more detail
+==== Step 4. Convert brightness numbers to ASCII characters  ====
+==== Step 5. What if it looks your image looks squashed? ====
-[[https://robertheaton.com/2018/06/12/programming-projects-for-advanced-beginners-ascii-art/|Source]]
+[[https://robertheaton.com/2018/06/12/programming-projects-for-advanced-beginners-ascii-art/|This is from Robert Heaton's Advanced Beginners Projects]]