DIGITAL BASICS 01
:::Introduction to Programming

Autor: rameshpallikara

Ramesh Pallikara
April 24, 2008
16:00 - 17:30 Hrs
MAID, Building 04, Room 208

The Course introduces the basics of programming concepts to designers. During the course, students will

  • design a clock interface using basic geometric forms to represent time and the progress of time in an abstract manner
  • gather basic math/geometry concepts required to implement their designs
  • learn basic programing concepts in Processing [www.processing.org] - a programming language for artists and designers
  • implement their clock interface in Processing
  • add interactivity to their clock interfaces in Processing

The primary objectives of the project are

  • to introduce the students to the basic concepts of programming
  • to create and manipulate design elements [form/space/color] using numbers

Recommended Reading

Reference Links

………………………………. WEEK 1 - 24.04.08 ……………………………….

PROBLEM SET 1

Design an abstract display of the time - 10h:09m:36s - based on the following rules

  1. Display size should be 100px wide and 100px high
  2. Designs should use only rectanular and/or square forms. No Numbers. No Alphabets
  3. Designs should be in only Black and White. No Greys. No Colors.
  4. Designs should represent the following information within the display
    • current hour with respect to the whole day ( 10th hour in our example, 1 Day = 24 Hours )
    • current minute with respect to the current hour ( 9th minute in our example, 1 Hour = 60 Minutes )
    • current second with respect to the current minute ( 36th second in our example, 1 Minute = 60 Seconds
  5. Designs should have a unique visual representation at any point of time during the day. For eg: 6:00hrs should not have the same display as 18:00hrs

Interesting trivia : Timex says the hands on timepieces are placed at ten-ten so the company logo on the face will be framed and not blocked by the hands. Timex says the industry standard used to be eight-twenty but that looked too much like a frown and created an unhappy look. Timex says in its ads, the clock hands are placed at ten-nine and thirty six seconds, exactly

PROBLEM SET 2

Create four diagrams based on this design, each representing the following time values

  1. 06h:00m:30s
  2. 12h:00m:15s
  3. 16h:30m:45s
  4. 21h:00m:15s

SUBMISSIONS

Email your designs - the clock diagram from Problem Set 1 and four clock diagrams from Problem Set 2 - as 100X100px 72dpi PNG files (without Alpha-Transparency), each file named after the time it represents: as in: 10h-09m-36s.png

EXAMPLES

Problem Set 1 : Solution

Problem Set 2 : Solution

FOR NEXT WEEK

Students shall present their design solutions for Problem Set 1 and Problem Set 2

Do bring your laptops with you. You can download and install Processing+Java from the link - http://processing.org/download/

………………………………. WEEK 2 - 03.05.08 ……………………………….

DESIGNS

Siverin Arndt

10h:09m:36s

06h:00m:30s__ 12h:00m:15s___ 16h:30m:45s___ 21h:00m:15s


Bertha Bintari

10h:09m:36s

06h:00m:30s__ 12h:00m:15s___ 16h:30m:45s___ 21h:00m:15s

DESCRIBING DESIGNS

Sample Description 1 - A Diagram

  1. Draw a Screen
    • width = 100
    • height = 100
    • background = black
  2. Draw a Rectangle
    • name = topLeftRectangle
    • origin = 10 , 10
    • width = 30
    • height = 20
    • color = white
  3. Draw a Rectangle
    • name = topRightRectangle
    • origin = 50 , 10
    • width = 40
    • height = 30
    • color = white
  4. Draw a Rectangle
    • name = bottomLeftRect
    • origin = 10 , 40
    • width = 30
    • height = 50
    • color = white
  5. Draw a Rectangle
    • name = bottomRightRect
    • origin = 50 , 50
    • width = 40
    • height = 40
    • color = white

Sample Description 2 - A Clock


  1. Draw Screen
    • width = 100
    • height = 100
  2. background = black
  3. varHour = Current Hour
  4. varMinute = Current Minute
  5. varSecond = Current Second
  6. height1 = 60 - ( varHour * 2.5 ) * is the symbol for multiplication
  7. Draw a Rectangle r1
    • origin = 40 , (100 - height1)
    • height = height1
    • width = 20
    • color = white
  8. Draw a Rectangle r2
    • origin = 70 , 0
    • height = varMinute
    • width = 20
    • color = white
  9. Draw a Rectangle r3
    • origin = 10 , 0
    • height = varSecond
    • width = 20
    • color = white
  10. Repeat again and again
    • From Step 3 to Step 9

PROBLEM STATEMENT 3

  1. Read, Analyze and try to understand the above two sample Diagrams and their Description.
  2. Based on the Sample Description 2 description, try to determine what time the given image represents

PROBLEM STATEMENT 4

  1. Describe how your Clock Interface works in a similar manner to the two descriptions above i.e as a numbered list description.
  2. Try to be as Precise and Accurate as possible in your Description
  3. Consider how many pixel a rectangle moves/grows every second/minute/hour
  4. Consider In which direction - Top/Left/Right/Bottom - the rectangle moves/grows
  5. Consider naming your rectangles with meaningful names such as hourRectangle or minuteRectangle or hourMinuteRectangle if it represents hours and minute

COURSE MATERIALS : Lecture Notes + Code Examples

Introduction to Proce55ing - Part 1 - [ 01_proce55ing.pdf - 184kb ]

size(), background(), point(), line(), int, float, boolean, string, for, while

Code Examples - Proce55ing - Part 1 [ ProcessingExamples_Part1.rar - 3kb ]

  • _01_point
  • _02_line_of_points
  • _03_line_of_points_with_one_variable
  • _04_line_of_points_with_two_variables
  • _05_line_of_points_with_loop
  • _06_grid_of_points_with_many_loops
  • _07_grid_of_points_with_two_loops
  • _08_lines

………………………………. WEEK 3 - 08.05.08 ……………………………….

Begins at 16:30 hrs