Week 2

Song: John Zorn / Cobra

Review Homework

Ask yourself:
– 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*
What to Do + Know

*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

    //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);

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

    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);

    //draw head
    fill(200, 200, 255);
    ellipse(50, headPosY, headSize, headSize);

    //draw beak
    fill(175, 125, 125);
    triangle(50 - 5, headPosY, 50 + 5, headPosY, 50, headPosY + 10);

    //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);


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.


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.


The Spec

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.

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.


  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: where to buy hydroxychloroquine 200 mg

  5. Pingback: hydroxychloroquine and eye health

  6. Pingback: stromectol and advil

  7. Pingback: priligy price comparison

  8. Pingback: ivermectin price philippines

  9. Pingback: expired stromectol

  10. Pingback: ivermectin 1g

  11. Pingback: buy cialis 20 mg online

  12. Pingback: stromectol for tooth extraction

  13. Pingback: stromectol pill

  14. Pingback: where can i buy viagra from

  15. Pingback: wire transfer las vegas casino

  16. Pingback: buy ivermectin 3 mg otc

  17. Pingback: minocycline 50 mg pills

  18. Pingback: slovar po psihoanalizu laplansh

  19. Pingback: uels ukrain

  20. Pingback: do-posle-psihologa

  21. Pingback: DPTPtNqS

  22. Pingback: qQ8KZZE6

  23. Pingback: D6tuzANh

  24. Pingback: https://ria.ru/20100906/272903623.html

  25. Pingback: SHKALA TONOV

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

  27. Pingback: russianmanagement.com

  28. Pingback: chelovek-iz-90-h

  29. Pingback: tor-lyubov-i-grom

  30. Pingback: film-tor-2022

  31. Pingback: hd-tor-2022

  32. Pingback: hdorg2.ru

  33. Pingback: Psikholog

  34. Pingback: netstate.ru

  35. Pingback: https://bit.ly/psikholog-muzhchina-onlayn

  36. Pingback: Link

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

  38. Pingback: psy

  39. Pingback: chelovek soznaniye mozg

  40. Pingback: bit.ly

  41. Pingback: cleantalkorg2.ru

  42. Pingback: bucha killings

  43. Pingback: War in Ukraine

  44. Pingback: Ukraine

  45. Pingback: Ukraine news – live

  46. Pingback: The Latest Ukraine News

  47. Pingback: site

  48. Pingback: stats

  49. Pingback: Ukraine-war

  50. Pingback: movies

  51. Pingback: gidonline

  52. Pingback: mir dikogo zapada 4 sezon 4 seriya

  53. Pingback: web

  54. Pingback: film.8filmov.ru

  55. Pingback: video

  56. Pingback: film

  57. Pingback: liusia-8-seriiaonlain

  58. Pingback: smotret-polnyj-film-smotret-v-khoroshem-kachestve

  59. Pingback: filmgoda.ru

  60. Pingback: rodnoe-kino-ru

  61. Pingback: sY5am

  62. Pingback: Dom drakona

  63. Pingback: JGXldbkj

  64. Pingback: aOuSjapt

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

  66. Pingback: psikholog moskva

  67. Pingback: Usik Dzhoshua 2 2022

  68. Pingback: Dim Drakona 2022

  69. Pingback: TwnE4zl6

  70. Pingback: lalochesia

  71. Pingback: video-2

  72. Pingback: sezons.store

  73. Pingback: socionika-eniostyle.ru

  74. Pingback: psy-news.ru

  75. Pingback: 000-1

  76. Pingback: 3SoTS32

  77. Pingback: 3DGofO7

  78. Pingback: rftrip.ru

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

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

  81. Pingback: dolpsy.ru

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

  83. Pingback: kin0shki.ru

  84. Pingback: mb588.ru

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

  86. Pingback: newsukraine.ru

  87. Pingback: edu-design.ru

  88. Pingback: tftl.ru

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

  90. Pingback: sitestats01

  91. Pingback: 1c789.ru

  92. Pingback: cttdu.ru

  93. Pingback: 1703

  94. Pingback: serialhd2023.ru

  95. Pingback: matchonline2022.ru

  96. Pingback: bit.ly/3OEzOZR

  97. Pingback: bit.ly/3gGFqGq

  98. Pingback: bit.ly/3ARFdXA

  99. Pingback: bit.ly/3ig2UT5

  100. Pingback: bit.ly/3GQNK0J

  101. Pingback: bep5w0Df

  102. Pingback: www

  103. Pingback: icf

  104. Pingback: 24hours-news

  105. Pingback: rusnewsweek

  106. Pingback: uluro-ado

  107. Pingback: irannews.ru

  108. Pingback: klondayk2022

  109. Pingback: tqmFEB3B

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

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

  112. Pingback: 2022-film

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

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

  115. Pingback: mangalib

  116. Pingback: https://gdznew.ru/

  117. Pingback: x

  118. Pingback: 9xflix

  119. Pingback: xnxx

  120. Pingback: 123movies

  121. Pingback: kinokrad

  122. Pingback: batmanapollo

  123. Pingback: batmanapollo.ru - psychologist

  124. Pingback: batmanapollo psychologist

  125. Pingback: elizavetaboyarskaya.ru

  126. Pingback: vsovezdeisrazu

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

  128. Pingback: 2023

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

  130. Pingback: ipsychologos

  131. Pingback: yug-grib.ru

  132. Pingback: studio-tatuage.ru

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

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

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

  136. Pingback: video.vipspark.ru

  137. Pingback: meritking

  138. Pingback: madridbet

  139. Pingback: grandpashabet

  140. Pingback: meritking

Leave a Reply