1. Pixels

224 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
224
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

1. Pixels

  1. 1. From last time… • Temporary Office Hours! MW 6th Period (12:50pm – 1:40pm)! CSE 520 C, AKA “The Sky Labyrinth”! • If you’re new today, come see me now, after class, or in office hours! • Schedule is fixed!
  2. 2. Manipulating Light Pixels! & Color CAP
  3. 3. Y (10,10) Origin (0,0) X
  4. 4. Origin (0,0) X (10,10) Y
  5. 5. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3
  6. 6. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3 point(3,2)
  7. 7. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3 line(0,3,3,0)
  8. 8. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3 corner: rect(0,0,5,3)
  9. 9. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3 center: rect(2,1,5,3)
  10. 10. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3 corners: rect(0,0,4,2)
  11. 11. 0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1,3 2,3 3,3 4,3 center: ellipse(2,1,5,3)
  12. 12. Basic Shapes point(x, y); rect(x, y, w, h); rectMode(CORNER); (also CENTER,CORNERS)! ellipse(x, y, w, h); ellipseMode(CENTER);
  13. 13. Demo Shapes
  14. 14. Grayscale 0 0000 0000 255 1111 1111
  15. 15. Background Color background() fills the sketch with a color background(0); background(255);
  16. 16. Object Color stroke(0); fill(115); rect(x,y,w,h); noStroke(); noFill();
  17. 17. Demo Grayscale
  18. 18. RGB Color 0 255 fill(255,0,0); 0 255 fill(0,255,0); 0 255 fill(0,0,255);
  19. 19. Alpha Channel 0 255 0 255 0 255
  20. 20. Demo RGB(A)
  21. 21. colorMode(); • How does colorMode() work?! • Consult the reference!! • http://processing.org/reference/colorMode_.html
  22. 22. HSB (or V) Color • Hue: the “pure form” of a color! • Saturation: brightness or dullness! 100% • Brightness/Value: lightness or darkness! 100% • HSB Game 360°
  23. 23. Demo HSB
  24. 24. Hexadecimal • #ffffff • #000000 • #ff0000 • #0000ff • #a8a8a8 • Pro: one single code containing all 3 colors! • Con: cannot capture alpha
  25. 25. Retina Display • http://www.apple.com/macbook-pro/featuresretina/! • Cuts each pixel into 4 (“pixel depth” = 2)! • But images are often rasterized…! • Why might I like the term “retina display?”
  26. 26. mario.png (26 x 26) Standard (26 x 26) mario.png Retina (52 x 52)
  27. 27. refresh.png (30 x 30) refresh@2x.png (60 x 60) @2x to the rescue…
  28. 28. For next time… • Read Shiffman p. 3–16 (Pixels & Color)! • Read Shiffman p. 17–29 (Processing)! • We will install Processing on Friday

×