CS110 - Lecture 2

Review

What is Computing?
What can be programmed?
What is a computer program?
Calico
Python
Calico Processing
Python Resources
Dropbox

functions
opening a window
drawing primitives
coordinate system
colors
shape formatting

Commenting your code

Comments are non-executable text that is added to your program to provide brief explanations
Multi-line comments are blocks of text that start and end with matching triple-quotes
- ' ' ' or " " "
Single-line comments start with a # character and extend through the end of the line
The Calico Editor colors multi-line comments blue, and single-line comments green

Commenting your code

''' My Awesome Program
    Mark F. Russo
'''
from Processing import *

# This is a single-line comment
window(500, 500)

background(255, 0, 0) # End-of-line comment

Commenting your code

Comments should be brief and informative

# This loop calculates the sum of squares
# of all x values
s = 0
for x in xarray:
    s = s + x*x
print(s)

Commenting your code

Comments should NOT state the obvious

s = 0               # Init s to 0
for x in xarray:    # Loop over all x values
    s = s + x*x     # Add x*x to s
print(s)            # Print s

More Calico Processing

Calico Processing provides many useful utility functions

Print one or more items to the output window
```
print(items)
```
Return the current height and width of the current sketch window
```
h = height()
w = width()
```
Compute radians given degrees
```
rad = radians(degrees)
```

Random Numbers

Compute a random number in the range [ min, max )
(Note the inclusive lower bound and exclusive upper bound)
```
r = random(min, max)
print(r)
```
Compute a random number in the range [ 0.0, max )
```
r = random(max)
print(r)
```
Reset the random number generator seed
```
randomSeed(seed)
```

Random Numbers

Draws an ellipse at a random location with a random fill color

from Processing import *
window(500, 500)

# Random color components
r = random(255)
g = random(255)
b = random(255)
fill(r, g, b)

# Random locations
x = random(500)
y = random(500)
ellipse(x, y, 50, 50)

Draw Text

Set the size of text in points using textSize( pts )
```
textSize(20)
```
Draw text with the lower-left corner at x, y with text( words, x, y)
```
text( "x-axis", 100, 150 )
```
Draw the text txt within the box with upper left corner at x,y and width w, height h with text(words, x, y, w, h)
```
text( "y-axis", 10, 10, 100, 30 )
```

Draw Text

from Processing import *
window(300, 300)

text("Moe", 10, 100)

textSize(20)
text("Larry", 10, 150)

textSize(30)
text("Curly", 10, 200)

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 )

Arcs

An arc is a section of an ellipse.
The arc extent is defined by start and end angles

from Processing import *
window(500, 500)

# Draw an ellipse
strokeWeight(5)
stroke(200)
ellipse(250, 200, 300, 200)

# Draw an arc over the ellipse
stroke(255, 0, 0)
rads = radians(90)
arc(250, 200, 300, 200, 0, rads )

Shapes

Shapes are freeform paths defined by a sequence of x,y points.
Begin a new shape with beginShape()
Add a point to a shape with one of the following
- vertex(x, y)
- curveVertex(x, y)
- bezierVertex(cx1, cy1, cx2, cy2, x, y )
End an open shape with endShape()
End an closed shape with endShape(True)
Set line snoothness with curveTightness(squishy)

Shapes

from Processing import *
window(500, 500)

fill(255, 0, 0)
curveTightness(0.3)

# Draw a heart
beginShape()
curveVertex(250, 400)
curveVertex(400, 200)
curveVertex(300, 150)
curveVertex(250, 200)
curveVertex(200, 150)
curveVertex(100, 200)
curveVertex(250, 400)
endShape(True)

Draw Images

Load an image from a file and save in a variable
```
img = loadImage("natura.jpg")
```
Draw an image full-size at x,y position
```
image(img, 50, 40)
```
Draw an image at x,y position with given width, height
```
image(img, 50, 40, 25, 25)
```

Draw Images

from Processing import *

window(500, 400)
img = loadImage("natura.jpg")
image(img, 50, 40)

Review

Commenting your code

Commenting your code

Commenting your code

Commenting your code

More Calico Processing

Random Numbers

Random Numbers

Draw Text

Draw Text

Drawing Primitives in Processing

Arcs

Shapes

Shapes

Draw Images

Draw Images

Examples

Assignment #1