ascii_art
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
ascii_art [2023/03/25 14:21] – [Step 5. What if it looks your image looks squashed?] frchris | ascii_art [2023/03/25 15:34] – [Step 4. Convert brightness numbers to ASCII characters] frchris | ||
---|---|---|---|
Line 33: | Line 33: | ||
"""" | """" | ||
</ | </ | ||
+ | |||
+ | This Lab is based on one of [[https:// | ||
+ | |||
==== Step 0. Choose an image ==== | ==== Step 0. Choose an image ==== | ||
Line 198: | Line 201: | ||
==== Step 3. Convert the RGB tuples of your pixels into single brightness numbers | ==== Step 3. Convert the RGB tuples of your pixels into single brightness numbers | ||
+ | |||
+ | Now that you have a 2D Array of '' | ||
+ | - Average: average the R, G and B values - '' | ||
+ | - Lightness: average the maximum and minimum values out of R, G and B - '' | ||
+ | - Luminance: take a weighted average of the R, G and B values to account for human perception - '' | ||
+ | - Luminosity: Take the sqrt root of the weighted squares - '' | ||
+ | - See [[https:// | ||
+ | <code Step3.java> | ||
+ | import java.awt.Color; | ||
+ | import java.awt.Font; | ||
+ | import java.awt.Graphics; | ||
+ | import javax.swing.JFrame; | ||
+ | import javax.swing.JPanel; | ||
+ | import java.awt.*; | ||
+ | /** | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | */ | ||
+ | public class Step3 extends JPanel | ||
+ | { | ||
+ | |||
+ | private String fileName; | ||
+ | private Font titleFont, regularFont; | ||
+ | private Color[][] clr; | ||
+ | private int[][] brightness; | ||
+ | |||
+ | public Step3(String fileName) | ||
+ | { | ||
+ | this.fileName = fileName; | ||
+ | this.clr = new Step2(fileName).getPx(); | ||
+ | titleFont = new Font(" | ||
+ | regularFont = new Font(" | ||
+ | | ||
+ | // Make a 2D int array that same number of rows and columns | ||
+ | // as the Color array | ||
+ | | ||
+ | |||
+ | | ||
+ | | ||
+ | //Fill the brightness array with yout choice of conversion method | ||
+ | // (like Average, Lightness, Luminocity, or your own) | ||
+ | | ||
+ | |||
+ | |||
+ | } | ||
+ | public int average(Color c) | ||
+ | { | ||
+ | // your code here | ||
+ | } | ||
+ | public int luminance(Color c) | ||
+ | { | ||
+ | // your code here | ||
+ | } | ||
+ | public int lightness(Color c) | ||
+ | { | ||
+ | //your code here | ||
+ | } | ||
+ | public int luminosity(Color c){ | ||
+ | // your code here | ||
+ | } | ||
+ | public int getWidth() { | ||
+ | return brightness.length;// | ||
+ | } | ||
+ | |||
+ | public int getHeight() { | ||
+ | return brightness[0].length; | ||
+ | } | ||
+ | |||
+ | public void paintComponent(Graphics g){ | ||
+ | super.paintComponent(g); | ||
+ | g.setColor(Color.WHITE); | ||
+ | g.fillRect(0, | ||
+ | // | ||
+ | for (int y=0; y < getHeight(); | ||
+ | for(int x=0; x < getWidth(); x++) | ||
+ | { | ||
+ | int b = brightness[x][y]; | ||
+ | g.setColor( new Color(b, | ||
+ | g.fillRect( x, y, 1, 1); | ||
+ | } | ||
+ | |||
+ | g.setColor(Color.BLACK);// | ||
+ | g.setFont(titleFont); | ||
+ | g.drawString(fileName, | ||
+ | g.setFont(regularFont); | ||
+ | g.drawString ( getWidth() + " by " + getHeight() + "- Drawn from 2DColor Array", | ||
+ | |||
+ | } | ||
+ | |||
+ | public static void main(String[] args) { | ||
+ | Step3 pic= new Step3(" | ||
+ | JFrame window = new JFrame(" | ||
+ | window.setSize(pic.getWidth(), | ||
+ | window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); | ||
+ | window.getContentPane().add(pic); | ||
+ | window.setVisible(true); | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
==== Step 4. Convert brightness numbers to ASCII characters | ==== Step 4. Convert brightness numbers to ASCII characters | ||
+ | You can experiment with different ways to map brightnesses to characters, but a good place to start is the string below. The characters in it are ordered from thinnest to boldest, which means lightest to darkest. | ||
+ | |||
+ | |||
==== Step 5. What if it looks your image looks squashed? ==== | ==== Step 5. What if it looks your image looks squashed? ==== | ||
[[https:// | [[https:// |
ascii_art.txt · Last modified: 2023/03/27 10:46 by frchris