CMSC B110: Introduction to Computing
Fall 2012 - Section 2
-
- Mark F. Russo, Ph.D.
- Email: mfrusso@brynmawr.edu, russomf@gmail.com
-
-
Lectures
Tues/Thurs 4-5:30 pm in Park 336
-
Labs
Tues/Thurs 5:30-6:30 pm in Park 231
-
Office Hours
Tues/Thurs 1-4 pm by arrangement in Park 250
CMSC B110: Introduction to Computing
Fall 2012 - Section 2
-
Grading
-
| 7 Assignments | | (8% each) 56% |
| Exam 1 | | 20% |
| Exam 2 | | 24% |
| | Total |
Links
-
The Internet
- Web
- Email
- Facebook
- Twitter
- LinkedIn
- ...
Search for planets that can support life
Deciphering the Human Genome
http://biology.kenyon.edu/courses/biol114/Chap08/Chapter_08a.html
Art
Protobytes, Ira Greenburg
Computer science is no more about computers than astronomy is about telescopes.
Edsger Dijkstra
What can be programmed?
- Computers
- Cell Phones
- Game Consoles
- Robots
- Cars?
Google's Self-Driving Car
Robotics in the Laboratory
Photo: Matthew Cahn
Robotics in the Laboratory
Our Goal
- Use computing to create works of art
- Explore computing using graphics, images, animation, interactivity, visualizations
- Learn the basics of computer programming
- Have a little fun
What is a computer program?
A collection of human and machine readable statements that can be translated to instructions executable by a computing device.
A text file. For example...
# Mouse orbiter
from Processing import *
size(500, 300)
background(255)
# Orbit angle state variable
angle = 0
def draw(o, e):
global angle
background(255)
fill(0, 0, 255)
...
Computing Platform
- http://calicoproject.org/
- Languages
Python
- A simple, clean and consice programming language
- Freely available for all major platforms, including Windows, MacOS, Linux, ...
- A version is already on all Macs (Finder -> Applications/Terminal, then type "python")
- Official Python website: python.org
- We will use a version of python made available through the Calico Environment
Using Python Interactively
- Python is primarily interpreted - there is no explicit compile step.
- The Calico Shell allows Python to act as a kind of interactive calculator.
Calico Processing
- Processing is a popular programming environment for graphics, animation, image processing, etc., based on Java
- Calico Processing is a special library that implements the majority of the Processing API for the Calico family of languages.
- A reference for the Calico flavor of Processing is available.
- To use Calico Processing from Calico Python, start every program with the following statement:
from Processing import *
- You will be typing that line a lot...
Getting Started with Calico Processing
A first program
Getting Started with Calico Processing
A first program
Anatomy of a Function
Opening a new Processing Window
from Processing import *
window( width, height )
Drawing Primitives in Processing
line( x1, y1, x2, y2 )
triangle( x1, y1, x2, y2, x3, y3 )
quad( x1, y1, x2, y2, x3, y3, x4, y4 )
rect( x, y, width, height )
ellipse( x, y, width, height )
Coordinate System
coords.py
Colors
Colors can be composed of four elements:
- Red
- Green
- Blue
- Alpha (Transparency)
...all are assigned values in the range [0..255]
Colors
http://www.jswidget.com/lab/canvas-based-color-picker.html
Why 255?
Byte from 8 Bits - Click bit to flip
Fill/Stroke Color
Use the fill() command to set the fill color of all shapes.
Use the stroke() command to set the stroke color of all shapes.
from Processing import *
window(200, 200)
background(255)
fill(255, 0, 0)
stroke(0, 255, 0)
strokeWeight(5)
rect(50, 50, 100, 100)
|
|
fill() Command Options
fill(red, green, blue, alpha)
fill(red, green, blue)
fill(gray, alpha)
fill(gray)
noFill()
stroke() Command Options
stroke(red, green, blue, alpha)
stroke(red, green, blue)
stroke(gray, alpha)
stroke(gray)
noStroke()
background() Command Options
Fills the entire sketch with the specified color
background(red, green, blue, alpha)
background(red, green, blue)
background(gray, alpha)
background(gray)
ellipseMode() and rectMode()
Defines how the first two arguments of rect() and ellipse() are interpreted.
from Processing import *
window(225, 125)
background(255)
# Default setting
rectMode(CORNER)
fill(255, 0, 0)
rect(50, 50, 50, 50)
rectMode(CENTER)
fill(0, 255, 0)
rect(50, 50, 50, 50)
|
from Processing import *
window(225, 125)
background(255)
ellipseMode(CORNER)
fill(255, 0, 0)
ellipse(150, 50, 50, 50)
# Default setting
ellipseMode(CENTER)
fill(0, 255, 0)
ellipse(150, 50, 50, 50)
|
←
→
/
#
