Images, Pixels, ART!! Natural Language and Dialogue Systems Lab

Images, Pixels, ART!! Natural Language and Dialogue Systems Lab

Compression Examples Tools winzip, pkzip, compress, gzip Formats Images.jpg,.gif Audio.mp3,.wav Video mpeg1 (VCD), mpeg2 (DVD), mpeg4 (Divx) General.zip,.gz

text, image, video, audio, building, imaginary world, 01101010010010 10100101010001 01010010101001 01010101011110 10110101001010

What s in the model? omit details the number of bits used determines how much of reality must be omitted from the model House

Arty Image sample code Colors as functions Making things smaller etc ARTY IMAGE SAMPLE CODE // Example 1. PImage img; void setup() { size(320,240); // Make a new instance of a PImage by loading an image file img = loadimage("egypt.jpg"); } In 1, image is fixed In 2, have functions we can call returning different images In 3 we make it smaller and smaller. Recalling the function multiple times void draw() { background(0); } // Draw the image to the screen at coordinate (0,0) image(img,0,0);

Bits and Bytes of Color Natural Language and Dialogue Systems Lab

Return To RGB Recall that the screen (and other video displays) use red- green- blue lights, arranged in an array of picture elements, or pixels Coffee Cup Pixels 2/9/12 7

Combining Colored Light The Amazing Properties of Colored Light! Caution: It doesn t work like pigment 2/9/12 8

Green + Red = Yellow? Colored light seems to violate our grade school rule of green = blue + yellow What gives? In pigment, the color we see is the reflected color from white light; the other colors are absorbed 2/9/12 2010 Larry Snyder, CSE 9

White, Gray, Black You know that gray is just different degrees of white as the light is turned down till we get to black Black = [ 0, 0, 0] 0000 0000 0000 0000 0000 0000 Gray = [128,128,128] 1000 0000 1000 0000 1000 0000 White = [255,255,255] 1111 1111 1111 1111 1111 1111 White-gray-black all have same values for RGB 2/9/12 2010 Larry Snyder, CSE 10

Colors Colors use different combinations of RGB BLOOD RED is my favorite color 2/9/12 11

Positional Notation: More after the midterm The RGB intensities are binary numbers Binary numbers, like decimal numbers, use place notation 1101 = 1 1000 + 1 100 + 0 10 + 1 1 = 1 10 3 + 1 10 2 + 0 10 1 + 1 10 0 except that the base is 2 not 10 1101 = 1 8 + 1 4 + 0 2 + 1 1 = 1 2 3 + 1 2 2 + 0 2 1 + 1 2 0 1101 in binary is 13 in decimal Base or radix 2/9/12 2010 Larry Snyder, CSE 12

Positional Notation Logic: Base 10 vs. Base 2 (binary) Recall that the place represents a power of the base value d 7 10 7 d 7 2 7 d 6 10 6 d 6 2 6 d 5 10 5 d 5 2 5 d 4 10 4 d 4 2 4 d 3 10 3 d 2 10 2 d 3 2 3 d 2 2 2 d 1 10 1 d 1 2 1 d 0 10 0 d 0 2 0 13

Steganography: Once things are encoded, can do some tricky things Natural Language and Dialogue Systems Lab

Steganography http://en.wikipedia.org/wiki/steganography The process of hiding information Two Greek roots meaning: stego == roof stega == cover 2/7/12 15

Why Hide Information? Most common reason to hide information is to avoid being caught with it Military and spy documents Repressive governments restricting news/info Avoid others snooping privacy Hiding is different than encryption Encryption you can see: You can tell that it doesn t make sense Hiding uses the fact that the searcher doesn t know it s there 2/7/12 16

Illustrate A Way To Do It The Plan hide subversive protest picture in calendar art Host Image Guest Image 2/7/12 2011 Larry Snyder, CSE 17

Step 1: Reduce Bits of Guest We don t need all of the bits in RGB to get a decent picture All bits Left 2 bits of each color 1011 0100 1101 0011 0001 1100 1011 0100 1101 0011 0001 1100 2/7/12 2011 Larry Snyder, CSE 18

Step 2: Replace Bits In Host Put guest bits into right 2 bits of host 1111 0100 1101 0011 1011 1101 1011 0100 1101 0011 0001 1100 1111 0110 1101 0011 1011 1100 2/7/12 2011 Larry Snyder, CSE 19

Let s go Do it. Code To Extract Image 2/7/12 2011 Larry Snyder, CSE 20

Compare fog.jpg with stegfog.png stegfog.png fog.jpg 2/7/12 2011 Larry Snyder, CSE 21

Let s Look At The Code and then we ll see the details 2/7/12 2011 Larry Snyder, CSE 22

Processing Code For Guestà Host (FOR LOOPS) Code To Save Result on Click Encoding Code 2/7/12 2011 Larry Snyder, CSE 23

How Does It Work After the pictures are loaded guest Clear right 2 bits of host New combined color Extract left 2 bits of 2/7/12 2011 Larry Snyder, CSE 24

Code To Extract Image FIRST, WHAT IS THIS % (MOD) operator if (i<wid && j<hi) { cprime=color(64*(int(red(c))%4), 64*(int(green(c))%4), 64*(int(blue(c))%4)); set(i,j, cprime); } else { set(i,j,c); } 25

How Does It Work Read in the file, and then on mouse click, pull out the bits and make a picture Remove right 2 bits New color Make them left 2 bits for each color 2/7/12 2011 Larry Snyder, CSE 26

How Much Is Coded Like Original? Run A Test http://www.tineye.com The Original 2/7/12 2011 Larry Snyder, CSE 27

Check The Steganized File Steganized 2/7/12 2011 Larry Snyder, CSE 28

A fun site? It s a game of some kind. Natural Language and Dialogue Systems Lab

Steganart http://www.steganart.com/page_3.html

More Pictures! Natural Language and Dialogue Systems Lab

But is it art? Mondrian, Pollack, Albers are stars 2/9/12 2010 Larry Snyder, CSE 32

IMAGES AND PICTURES http://www.processing.org/learning/pixels/ This tutorial is really fun.

Representing Images gif, jpg, tiff, png, RGB pixel compression lossy lossless

Art In A Click Computer art, that is, art generated by computers, not art created by people using computers, leads to some fun Web sites.. Google piet mondrian. He was a cubist and created pictures that look like this http://www.google.com/search? client=safari&rls=en&q="piet +Mondrian"&ie=UTF-8&oe=UTF-8 Could we generate this in processing?

How about something a little easier first? http://en.wikipedia.org/ wiki/josef_albers

What would we do in Processing? What does Random do?

Random Numbers Random numbers should be called random number sequences, because the definition requires that no matter how many numbers you already know in the sequence, it s not possible to predict the next one. A non-random sequence is 2, 4, 6, 8, 10, Computers cannot produce random numbers (because computers are completely predictable), but they can produce a sequence of numbers that passes all of the tests for randomness. These are called pseudo-random numbers, but everyone drops the pseudo part. To generate a random number in Processing we write: random(<smallest possible number>, <largest possible number>). We get back a number we can t predict which between the two limits, including the end points. To generate a random number between 0 and 255, write random(0, 255). To generate a number between 0 and 1, write random(0, 1).

Let s Try it!

How about something a little easier first? http://en.wikipedia.org/ wiki/josef_albers

How about Jackson Pollock? Google jackson pollock. http://www.google.com/search?source=ig&hl=en&rlz=&q=jackson +pollock&btng=google+search He was an abstract expressionist and created paintings that look like this! Circa 1950

Computer generated Jackson Pollock? I made this on this website. http://www.jacksonpollock.org.

lerpcolor() There is a very interesting function called lerpcolor( ). It uses a mathematical idea (that we don t need to know about) called linear interpolation to pick intermediate colors. Give it two colors, say gold and purple, and it finds a color in between. Where in between? We also give it a fraction between 0 and 1 that tells. Program fills in the black region in the middle with two colors between gold and purple. gold near_gold near_purple purple

POINTILISM http://www.processing.org/learning/pixels/

Transparency, Tints and More! http://www.processing.org/learning/pixels/