DOM-E5152 - Introduction to Creative Coding, 08.09.2020-25.09.2020

Topic outline

• Day 2
  Basic graphics with Processing

  See the Processing reference for a complete list of graphical primitives supported by the language – there’s a lot at your disposal. Get to know at least:

  • size
  • ellipse
  • rect
  • line
  • background
  • fill and noFill
  • stroke and noStroke

  
  

  One thing to note is that the graphics are not any objects you could move, scale and so on later, but pixels in the window: there's no way to edit them afterwards except drawing them again.

  Variables (muuttujat)

  We could consider variables “boxes”, where you can store things. During the following lectures they will be used for several purposes such as counters, for holding status information such as mouse coordinates and for making the code more readable. In Processing every variable has a type, a name, a value and a scope. Before we can use a variable we need to declare (esitellä) it, which looks like this:

  int whatever;

  The type in this case is int, an integer number (kokonaisluku). The name we can choose freely, except that it can’t overlap with reserved words of the language. The value is set through assignment (sijoitus):

  whatever=100;

  Finally, the scope is the area where a variable is visible. It can be global (yleinen) or local (paikallinen). More about that later.

  Homework

  Create the famous smiley face using Processing graphics. Make it so that you can place it anywhere on the screen by changing the values of variables x and y.

  
  

  Example solution: smiley.pde