Your SlideShare is downloading. ×
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Evolutionary Graphics - Class 02 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Evolutionary Graphics - Class 02 2014

209

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
209
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. VART3227 Evolutionary Graphics Class 02: Coordinates & geometry
  • 2. VART3227 Remember in last week. We described our patterns. Horizontal lines distributed evenly… Four squares, symmetric…
  • 3. VART3227 Any systematic way to describe, notate, analyze visual forms in everyday life?
  • 4. Euclid
  • 5. Euclidean Geometry Greek mathematician – Euclid (300 BC) Elements – first systematic text on the studies of geometry. Assuming a small set of axioms (assumptions), it proves other propositions by logical deduction. We focus on the Plane Geometry (2D)
  • 6. Straight line
  • 7. Circle
  • 8. Parallel lines
  • 9. Numbers We also learn numbers in primary school. Integer Rational number Real number
  • 10. Integer We are familiar with Integers, 1, 2, 3, 4, 5, …
  • 11. Integer Some number sequences are geometric in nature. For example, 1, 4, 9, 16, 25, 36, …
  • 12. Square number
  • 13. Square number In Context Free Art, we can have nested repetitions, startshapemyShape shape myShape { loop 5 [y 1] { loop 5 [x 1] CIRCLE [] } }
  • 14. Integer Another number sequence is, 1, 3, 6, 10, 15, 21, … Guess what shape it is?
  • 15. Integer Another number sequence is, 1, 4, 9, 16, 25, 36, … Can it be something else other than a square?
  • 16. Integer Hex numbers are, 1, 7, 19, 37, 61, … It arranges like a hexagon.
  • 17. Integer
  • 18. Fibonacci numbers One of the most interesting number sequence is the Fibonacci number. 1, 1, 2, 3, 5, 8, 13, 21, 34, …
  • 19. Golden section
  • 20. Golden section
  • 21. Typography
  • 22. Golden section
  • 23. Golden section The ratio of the golden section is roughly, 1:1.618 or 0.618:1 If we take a look at the Fibonacci sequence, 1, 1, 2, 3, 5, 8, 13, 21, 34, … When we divide two consecutive numbers …
  • 24. Fibonacci number Can you find the relation between the Fibonacci numbers and this?
  • 25. Coordinate system Remember the 2D plane with X and Y axis. It is a combination of geometry and the number system.
  • 26. Coordinate geometry y (+) sin (θ) angle θ x (-) centre (0, 0) y (-) cos (θ) x (+)
  • 27. Coordinate geometry y (+) x (-) centre (0, 0) y (-) x (+)
  • 28. Visual Design Conceptual elements Point Line Plane Volume
  • 29. Visual Design Visual elements Shape, e.g. SQUARE, TRIANGLE, SQUARE Size Colour, e.g. Hue, Saturation, Brightness Texture
  • 30. Visual Design Repetition
  • 31. Visual Design Structure
  • 32. Visual Design Gradation
  • 33. Visual Design Radiation
  • 34. CFA Implementation in Context Free Art
  • 35. Lines Two points give you a straight line. MOVETO (0, 0) LINETO (1, 1)
  • 36. Multiple lines When you have multiple lines, MOVETO (0, 0) LINETO (1, 2) LINETO (2, 0) LINETO (0, 0)
  • 37. Multiple lines You expect a triangular shape?
  • 38. Multiple lines Take this one again, MOVETO (0, 0) LINETO (1, 2) LINETO (2, 0) LINETO (0, 0) CLOSEPOLY ()
  • 39. Shape It looks better.
  • 40. Circular path Try the following circular path with ARCTO, MOVETO (0, 0) ARCTO (1, 0, 0.5)
  • 41. Circular path
  • 42. Circular path Try the following circular path with ARCTO, MOVETO (0, 0) ARCTO (1, 0, 0.5, CF::ArcCW) CF::ArcCW means clockwise.
  • 43. Circular path
  • 44. Circular path To complete the path as a circle, MOVETO (0, 0) ARCTO (1, 0, 0.5) ARCTO (0, 0, 0.5) CLOSEPOLY () STROKE () [] FILL [h 60 sat 1 b 1]
  • 45. Circular path
  • 46. Circular path To draw an ellipse, MOVETO (0, 0) ARCTO (1, 0, 0.5, 0.3, 180) ARCTO (0, 0, 0.5, 0.3, 180) CLOSEPOLY () STROKE () [] FILL [h 60 sat 1 b 1]
  • 47. Circular path
  • 48. Colour wheel – hue
  • 49. Example photo
  • 50. More path command We start from a simple LINETO with the use of sine and cosine functions we have learnt in secondary school. LINETO (cos(?), sin(?))
  • 51. Coordinate geometry y (+) sin (θ) angle θ x (-) centre (0, 0) y (-) cos (θ) x (+)
  • 52. More path command Let’s put it together. MOVETO (1, 0) LINETO (cos(30), sin(30)) STROKE () []
  • 53. More path command We do repetition within a path. MOVETO (1, 0) loop 2 [r 30] { LINETO (cos(30), sin(30)) } STROKE () []
  • 54. More path command We do more repetitions to form a polygon. MOVETO (1, 0) loop 12 [r 30] { LINETO (cos(30), sin(30)) } CLOSEPOLY () STROKE () []
  • 55. More path command We add a bit complication. MOVETO (1, 0) loop 12 [r (360/13)] { LINETO (cos(360/13), sin(360/13)} } CLOSEPOLY () STROKE () []
  • 56. More path command We add a bit complication. MOVETO (1, 0) loop 12 [r (4*360/13)] { LINETO (cos(4*360/13), sin(4*360/13)) } CLOSEPOLY () STROKE () []
  • 57. More path command We fill it with colour. MOVETO (1, 0) loop 12 [r (4*360/13)] { LINETO (cos(4*360/13), sin(4*360/13)) } CLOSEPOLY () FILL () []
  • 58. More path command We modify the fill effect. MOVETO (1, 0) loop 12 [r (4*360/13)] { LINETO (cos(4*360/13), sin(4*360/13)) } CLOSEPOLY () FILL (CF::EvenOdd) []
  • 59. Sample image
  • 60. Randomness We may from time to time to create something not that deterministic. That is, we want surprise. In mathematics, it is randomness and probability we have learnt in secondary school.
  • 61. Randomness Consider throwing a coin, we have Head or Tail. If we design a coin with one side red and other side blue, we can draw the coin. It can either be red or blue. By using Context Free Art, we achieve by using multiple rules of the same name.
  • 62. Randomness First, we define a red coin, path CoinRed { MOVETO (0, 0) ARCTO (1, 0, 0.5) ARCTO (0, 0, 0.5) STROKE () [] FILL [h 0 sat 1 b 1] }
  • 63. Randomness Then we define a blue coin, path CoinBlue { MOVETO (0, 0) ARCTO (1, 0, 0.5) ARCTO (0, 0, 0.5) STROKE () [] FILL [h 240 sat 1 b 1] }
  • 64. Randomness Then we have two definitions of a shape, shape MyCoin { CoinRed [] } shape MyCoin { CoinBlue [] }
  • 65. Randomness You test by creating a repetition of the MyCoin rule.
  • 66. Randomness You can control the ‘randomness’ by specifying a number for each rule with the same name. shape myCoin rule 10% { … } rule 90% { … }
  • 67. Exercise Using a grid of 3 x 3 to design a few graphical patterns.
  • 68. Exercise Using a grid of 3 x 3 to design a few graphical patterns.
  • 69. Exercise Create a tile of the basic graphical patterns with the use of randomness.

×