# Week 2

Song: John Zorn / Cobra
http://en.wikipedia.org/wiki/Cobra_(Zorn)

## Review Homework

– What did everyone else do?
– Which projects did you like best? Least? Why?
– What techniques/content/decisions did you find interesting?
– How would you do your project differently if you did it agian now?

## Syntax is Power

Your first assignment is an example of a computer program, but it not a very powerful one. It is little more than data. As we introduce new elements of syntax your programs will become more powerful. Today we will introduce the first power: variability. Repetition, calculation, and decision making will follow. Even with just a few basic powers, you can create powers that can do anything and everything possible to compute. Additional powers will make complex projects easy to create and manage.

## Common Elements of Syntax

What to Do What to Know
operators literals
experessions variables
statements arrays
flow control structs*
functions
What to Do + Know
Classes
Objects

*structs don’t exist in Processing.

## Example Code: Cityscape

``````    //Draws a Cityscape, demonstrates several processing language features
// literals, variables, arrays
// operators, expressions, statements, blocks, loops ('for'), conditinonal statements ('if')

//declare array to hold building heights
float[] buildingHeights;

//set up canvas
size(640, 480);
background(75, 75, 120);

//manually set height of buildings
buildingHeights = new float[10];
buildingHeights[0] = 2; buildingHeights[1] = 3;
buildingHeights[2] = 2; buildingHeights[3] = 3;
buildingHeights[4] = 4; buildingHeights[5] = 6;
buildingHeights[6] = 2; buildingHeights[7] = 2;
buildingHeights[8] = 6; buildingHeights[9] = 5;

//set up drawing state
noStroke();

//loop through building heights, draw buildings
for (int i = 0; i < 10; i++) {
float xPos = i*64; //where to draw the building, horizontally

//randomly choose value of building color, set
float colorBase = random(100, 200);
fill(colorBase + 50, colorBase, colorBase);

//draw building
rect(xPos, 480, 64, -buildingHeights[i]*50);

//draw elevator on tall buildings
if (buildingHeights[i] > 4) {
rect(xPos + 10, 480 -buildingHeights[i]*50, 10, -10);
}
}
``````

## Variables in Depth

In a computer program, variables are named pieces of data. Using variables allows you to create code that is more general and reusable. For example: A piece of code that can add 2 and 3 together is specific; a piece of code that can add any two numbers you provide it is general, and much more useful.

There are many benefits to variables:

• Variables allow you to create general, reusable code.
• Variables let you store a value so you can use it later.
• Variables are used as parameters in functions.
• Naming values in your code makes it easier to understand.

All variables have a name, a value and a type.

The name of a variable doesn’t really matter to the computer, but choosing good names is a very important part of creating readable code.

The value of a variable can be changed while the program runs. The value stays the same until your code changes it.

The type of the variable determine what kind of value the variable holds. For example, `int` variables hold integer number values. `float` variables hold number values with a decimal part. There are types to hold colors, words, and even more complex concepts like images or videos.

Variables also have a scope which we will talk about more next week.The variable’s scope determines how much of the code knows about the variable. With a few exceptions the scope of a variable is limited to the pair of braces it is declared within. Variables will not be visible to the program outside these braces.

## The Life of a Variable

To create a variable you declare it. This code declares a variable named age, of type int:

``````    int age;
``````

This code also initializes the variable with a starting value:

``````    int age = 3;
``````

Once a variable is declared you can assign it a new value:

``````    age = 5;
``````

You can assign a variable with the result of an expression:

``````    age = 5 + 1;
``````

When you use the variables name as a parameter or part of an expression, its value will be read and used in its place. The following expression would add the current value of age to 2:

``````    2 + age
``````

This code will make the value go up by 1, this happens in multiple steps. First the value of age is read, then it is added to 1, then the result is assigned to age:

``````    age = age + 1;
``````

## Example Code: Bird

``````    //Draws a Bird, demonstrates use of variables, random, and math to make a parameterized drawing.

//choose a random size for the body
float bodySize = random(20, 60);

//calculate the vertical position of the body based on its size
float bodyPosY = 100 - bodySize/2;

//choose a random headsize, smaller than the body
float headSize = bodySize * random(.6, 1.1);

//calculate a head position with a 10 pixel overlap
float headPosY = bodyPosY - (bodySize * .5) - (headSize * .5) + 10;

//set up to draw
size(100, 100);
background(100, 100, 100);
noStroke();

//draw body
fill(200, 200, 255);
ellipse(50, bodyPosY, bodySize, bodySize);

//wing
fill(170, 170, 240);
arc(50 + 5, bodyPosY, bodySize + 5, bodySize, -PI *.5, PI * .25);
arc(50 - 5, bodyPosY, bodySize + 5, bodySize, PI * .75, PI * 2);

//draw chest
fill(170, 170, 240);
ellipse(50, bodyPosY - 4, bodySize * .8, bodySize * .8);

fill(200, 200, 255);

//draw beak
fill(175, 125, 125);

//draw eyes
fill(255, 255, 255);
ellipse(50 - 5, headPosY, 12, 12);
ellipse(50 + 5, headPosY, 12, 12);
fill(170, 170, 240);
ellipse(50 - 5, headPosY, 4, 4);
ellipse(50 + 5, headPosY, 4, 4);
``````

## Style

Variable Names

• Most importantly, variable names should accurately describe the data they hold.
• Longer, more descriptive names should be used for variables used widely in the program.
• Shorter names make sense when the variable is only used in a single area.
• Separate words an a variable using camel case: buildingHeights, hitPoints, maxFuel.
• Avoid abbreviations.
• Be consistent.

## Random

The random function returns an (effectively) random number between a high and low value you provide. Using this function lets you create variation in the results of your program. Random doesn’t necessarily mean crazy, chaotic looking results. Careful use of random values in a system can lead to orchestrated variations on a theme.

http://processing.org/reference/random_.html

## Screen Shots

 Command Shift 3 Take a shot of the whole screen. Save to file. Command Shift 4 Take a shot of part of the screen. Save to file. Command Control Shift 3 Take a shot of the whole screen. Copy to clipboard. Command Control Shift 4 Take a shot of part of the screen. Copy to clipboard.

On another OS? http://www.take-a-screenshot.org/

## Image Resolution

An image’s resolution refers to how much detail or information the image contains. One common way to describe resolution is stating width and height of the entire image in pixels. Another is to state the number of pixels or dots in one linear inch DPI.

Digital Images don’t really have an intrinsic DPI because they don’t have an intrinsic physical size. A digital image may be displayed on a screen with very small pixels (a mobile phone) or very large pixels (a video projection). A digital image’s DPI will be different depending on the size it is displayed.

Many formats allow you to specify a DPI for the image, but this doesn’t actually change the data in the image. It is simply a suggestion for how large the image should be displayed or printed.

When preparing images for display on screen, it is usually much more important to think about the whole image size in pixels.

## Saving Images for Web

To display an image on the web it must be saved in a format that a web browser can display. Two of the most useful formats are .png, which is usually best for graphic images with areas of solid color, and .jpg, which is usually best for photographs.

Use Adobe Photoshop to save images for use on the web.
http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/

## Posting Assignments to the Blog

Every student in the class will have an account on this class blog. You will post your homework assignments, code, writing, and documentation to the blog each week.

## Assignment

1. Read this week’s lecture notes.

2. Read chapter 4, and Appendix A, B and C of the Getting Started book.
Focus on the examples about variables, variable types, declaring variables, and basic arithmetic with variables.

Note: Pages 43-48 cover repetition. We havn’t discussed repetion yet, but we will next week.

3. Create a program that makes a variable drawing. Like last week, start with a paper sketch of what your program will draw. Think about what elements may change, how they will change (size, position, color, etc.) You may want to make a few sketches showing this variation. Making notes on your sketch will also help.

Create a processing program that draws an image similar to your sketch. Your program should use variables and the random function so that the drawing can be different every time it you run the program, like the example we looked at in class.

Your program should have the following features:

• It should include at least 5 variables.
• It should include random multiple times.
• At least two variables should be initialized with a random value.
• At least one variable should be assigned a random value after it is initialized and read.
• You must use at least 3 expressions to perform arithmetic on variables and literal values.
• Your drawing should demonstrate variance in size, position, and color.
• Your program should produce a different variation of your drawing every time you run it. Try to create a dramatic range of variation.
• Your drawing must be created completely in code. Do not use any image assets.

Run your code 3 times, and take screen shots of the resulting image each time.

Make sure your code meets the general assignment specification.

Post the screen shots and your zipped sketch to the class blog.

## 140 thoughts on “Week 2”

1. Pingback: Free Japan

2. Pingback: is hydroxychloroquine available otc

3. Pingback: durvet hydroxychloroquine pour on

4. Pingback: hydroxychloroquine and eye health

6. Pingback: priligy price comparison

7. Pingback: ivermectin price philippines

8. Pingback: expired stromectol

9. Pingback: ivermectin 1g

10. Pingback: buy cialis 20 mg online

11. Pingback: stromectol for tooth extraction

12. Pingback: stromectol pill

13. Pingback: where can i buy viagra from

14. Pingback: wire transfer las vegas casino

15. Pingback: buy ivermectin 3 mg otc

16. Pingback: minocycline 50 mg pills

17. Pingback: slovar po psihoanalizu laplansh

18. Pingback: uels ukrain

19. Pingback: do-posle-psihologa

20. Pingback: DPTPtNqS

21. Pingback: qQ8KZZE6

22. Pingback: D6tuzANh

23. Pingback: SHKALA TONOV

24. Pingback: Øêàëà òîíîâ

25. Pingback: russianmanagement.com

26. Pingback: chelovek-iz-90-h

27. Pingback: tor-lyubov-i-grom

28. Pingback: film-tor-2022

29. Pingback: hd-tor-2022

30. Pingback: hdorg2.ru

31. Pingback: Psikholog

32. Pingback: netstate.ru

34. Pingback: tor-lyubov-i-grom.ru

35. Pingback: psy

36. Pingback: chelovek soznaniye mozg

37. Pingback: bit.ly

38. Pingback: cleantalkorg2.ru

39. Pingback: bucha killings

40. Pingback: War in Ukraine

41. Pingback: Ukraine

42. Pingback: Ukraine news  live

43. Pingback: The Latest Ukraine News

44. Pingback: site

45. Pingback: stats

46. Pingback: Ukraine-war

47. Pingback: movies

48. Pingback: gidonline

49. Pingback: mir dikogo zapada 4 sezon 4 seriya

50. Pingback: web

51. Pingback: film.8filmov.ru

52. Pingback: video

53. Pingback: film

54. Pingback: liusia-8-seriiaonlain

55. Pingback: filmgoda.ru

56. Pingback: rodnoe-kino-ru

57. Pingback: sY5am

58. Pingback: Dom drakona

59. Pingback: JGXldbkj

60. Pingback: aOuSjapt

61. Pingback: ìûøëåíèå

62. Pingback: psikholog moskva

63. Pingback: Usik Dzhoshua 2 2022

64. Pingback: Dim Drakona 2022

65. Pingback: TwnE4zl6

66. Pingback: lalochesia

67. Pingback: video-2

68. Pingback: sezons.store

69. Pingback: socionika-eniostyle.ru

70. Pingback: psy-news.ru

71. Pingback: 000-1

72. Pingback: 3SoTS32

73. Pingback: 3DGofO7

74. Pingback: rftrip.ru

75. Pingback: https://bitbin.it/bn1QAiBO/

76. Pingback: https://bitbin.it/JI5X9Xvu/

77. Pingback: dolpsy.ru

78. Pingback: https://clck.ru/32JaEo

79. Pingback: kin0shki.ru

80. Pingback: mb588.ru

81. Pingback: history-of-ukraine.ru news ukraine

82. Pingback: newsukraine.ru

83. Pingback: edu-design.ru

84. Pingback: tftl.ru

85. Pingback: https://bit.ly/3Esup4r

86. Pingback: sitestats01

87. Pingback: 1c789.ru

88. Pingback: cttdu.ru

89. Pingback: 1703

90. Pingback: serialhd2023.ru

91. Pingback: matchonline2022.ru

92. Pingback: bit.ly/3OEzOZR

93. Pingback: bit.ly/3gGFqGq

94. Pingback: bit.ly/3ARFdXA

95. Pingback: bit.ly/3ig2UT5

96. Pingback: bit.ly/3GQNK0J

97. Pingback: bep5w0Df

98. Pingback: www

99. Pingback: icf

100. Pingback: 24hours-news

101. Pingback: rusnewsweek

103. Pingback: irannews.ru

104. Pingback: klondayk2022

105. Pingback: tqmFEB3B

106. Pingback: https://bit.ly/okaybaybay

107. Pingback: https://bit.ly/n39i18b

108. Pingback: 2022-film

109. Pingback: https://bitbin.it/yeCU06m7/

110. Pingback: https://bitbin.it/X5y9A1Fd/

111. Pingback: mangalib

112. Pingback: https://gdznew.ru/

113. Pingback: x

114. Pingback: 9xflix

115. Pingback: xnxx

116. Pingback: 123movies

118. Pingback: batmanapollo

119. Pingback: batmanapollo.ru - psychologist

120. Pingback: batmanapollo psychologist

121. Pingback: elizavetaboyarskaya.ru

122. Pingback: vsovezdeisrazu

123. Pingback: https://tinyurl.com/2lacn6n3

124. Pingback: 2023

125. Pingback: Äèçàéí ÷åëîâåêà

126. Pingback: ipsychologos

127. Pingback: yug-grib.ru

128. Pingback: studio-tatuage.ru

129. Pingback: bit.ly/pamfir-pamfir-2023-ua-pamfir

130. Pingback: poip-nsk.ru - Movie Watch

131. Pingback: film.poip-nsk.ru - film online

132. Pingback: video.vipspark.ru

133. Pingback: meritking