c0d3l4b

6 oktober 2009

John Maeda talk

John Maeda wrote a foreword in the Processing book. He's kind of the godfather of the synergy between design, art and computer programming.

3 oktober 2009

Minimal steps for using a font in your sketch

The file FreeSerif-130.vlw, mentioned below in the loadFont function, should be created by clicking on the menu item Tools, followed by Create Font. This opens a window with a list of all fonts available on your computer. Choose one, define it's size and click Ok. This will save a .vlw-file in the data folder inside the folder of your sketch. One remark: save a new started sketch before creating a font!
Some computers ran into memory problems during the lesson. It appears that big fonts make Processing use a lot of memory. The solution is to open the Processing Preferences. Check the selectbox before the line "Increase maximum available memory to" and change the value to 512 (standard set to 256) MB. This should do the trick.
Some Processing apps would not save this setting and would return to the original state after restart of the application.

PFont f;

void setup() {
  size(300, 300);
  f = loadFont("FreeSerif-130.vlw");
  textFont(f);
}

void draw() {
  background(50, 0, 50);
  fill(255, 0, 255, 90);
  
  String message = "Put your text here..!";
  text(message, mouseY, mouseX);
  text("Hello World!", mouseX, 50);
  
  textSize(130);
  for (int i = 0; i < 10; i++) {
    text(i, 100 + (i * 20), 100 + (i*20));
  }
  
}

Three in one

Below the code of a file which covers the first three lessons.

int rectSize = 300;
/**
 * Everything up to now in one sketch
 */
void setup() {
  size(400, 400);
}

void draw() {
  // print mouseposition to console
  println("x: " + mouseX + " y:" + mouseY);
  // set framerate
  frameRate(30);
  // set background color
  background(233, 212, 123);

  // two colored square
  fill(157, 214, 45);
  stroke(212, 194, 44);
  strokeWeight(8);
  rect(20, 20, rectSize, rectSize);

  strokeWeight(1);
  // draw a set of lines to create a gradient
  for (int i = 0; i < 120; i = i +1) {
    stroke(255 - i, 0, 255 - i);
    float ypos = 150 + i;
    line(200, ypos, 350, ypos);
  }

  // mouse interactive ellipse
  noStroke();
  fill(231, 12, 43);

  int myx = 0;
  if (mouseX > 250) {
    myx = 250;
    fill(0,255,0);
  } else {
    myx = mouseX;
    fill(0,0,255);
  }
  println(myx);
  ellipse(myx, mouseY, 60, 50);
}

26 september 2009

Sin, cos and tan

Interview with creators of Processing

Also here

Thanks to Jan Klug for noticing.

Lesson 2

Stuff we lately did

So we did a lot of things. In short, I discussed data types, for-loops and functions. Defining a datatype for you variable is important. The computer is not that intelligent, you have to tell it whether your variable contains an integer, float, boolean value, etc.

int p = 12;
float q = 12.5;
boolean r = true;

You'll have errors concerning the mistake of forgetting the datatype often. Don't mind, in the end it'll help you be more precise.

For-loops

You'll use for-loops for repetitions. If you want to draw 100 ellipses, you're not going to write them line by line. You will grab a for-loop. For example:

for (int i = 0; i < 100; i++) {
  ellipse(i,i,10,10);
}

The statement says this:

in our initial state, i = 0.
the for-loop will repeat itself as long as i is smaller than 100.
after every loop, i will be added with 1.

int i = 0;
// the following three statements are identical.
// They all add 1 to i.
i = i + 1;
i += 1;
i++;

Modulus

In many programming languages, the modulus, represented by a percentage sign, does the following:

The value left of the modulus is divided by the value right of the modulus sign, and what remains after dividing is the result of the statement. In secondary school math in Holland, we used to do the 'staartdeling' and, as I learned, I also had to write down what remained after the division:

3 / 10 \ 3
     9
    --
     1 is the result of the modulus

or:
3 / 124 \ 41
    12
    --
     04
      3
     --
      1 is the result of the modulus