Noise ellipses with color and alpha

float p = 0.0;

void setup() {
  size(300,300);
  smooth();
}

void draw() {
  noStroke();
  background(255);

  float n = noise(p) * 20;
  fill(0,0,255,100);
  ellipse(mouseX - 20 + n, mouseY - 20 + (5 * n), n * 20, n * 20);

  fill(255,0,0,100);
  float t = noise(p + 3.02) * 20;
  ellipse(mouseX - 20 + t, mouseY - 20 - (t * 5), t * 20, t * 20);

  fill(255,255,0,100);
  float u = noise(p + 5.01) * 20;
  ellipse(mouseX - 20 - (5 * u), mouseY - 20 + u + 5, u * 20, u * 20);

  fill(0,255,0,100);
  float v = noise(p + 2.02) * 20;
  ellipse(mouseX - 20 + (5 * v), mouseY - 20 + v + 5, v * 20, v * 20);

  p += 0.01;
}


/**
 * for saving frames
 */
void keyPressed() {
  String myTime = year()
    + "-" + month()
      + "-" + day()
        + "_" + hour()
          + "." + minute()
            + "." + second();
  if (key=='s') {
    saveFrame("noise_random-" + myTime + "_F#####.png");
  }
}

Save a frame to an image

void keyPressed() {
  String myTime = year()
    + "-" + month()
      + "-" + day()
        + "_" + hour()
          + "." + minute()
            + "." + second();
  if (key=='s') {
    saveFrame("random-" + myTime + "_F#####.png");
  }
}

Minimal steps for adding an image to your sketch

If you want to add an image to your sketch, do the following. Be sure to add the image file in the sketch's folder.

PImage img;

void setup() {
  size(300,300);
  smooth();
  img = loadImage("mondrian.jpg");
}

void draw() {
  image(img,0,0, 300,300);
}

Color in short

color c1 = color(255,0,0); // r = 255 g = 0 b = 0 values
color c2 = color(127); // r = b = g = 127 -> grey
color c3 = color(127,60); // r = b = g = 127 -> grey, with alpha channel of 60
color c4 = color(0,255,0,100); // r = 0 g = 255 b = 0 and alpha channel of 100
// the alpha channel ranges from 0 to 255. 0 is transparent, 255 opaque

Different color notations

Processing supports different color notations. RGB for colorvalues in Red, Green and Blue, ranging from 0 to 255. HSB for Hue, Saturation, Brightness in different ranges: hue from 0 to 360, the other two from 0 to 100.

// different color notations
size(300,300);

// RGB notation
colorMode(RGB);
color c = color(203,145,245);
background(c);

// HSB notation
colorMode(HSB);
color c2 = color(20,255,255);
fill(c2);
ellipse(120,40,40,40);

for (int g = 0; g < 12; g++) {
  fill(g * 12,255,255);
  ellipse(g * 20,g * 20,20,20);
}

// hex notation
color r = color(#22ffff);
fill(r);

rect(50,170,30,30);

Hex notation is also used a lot on the internet, mainly in CSS files; they represent a RGB color value in hex. 00 represents 0, FF represents 255. 127 is 7F. Here a small example. You can use for-loops to change color values to make gradients.

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.

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

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:

1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2
6 % 3 = 0
7 % 3 = 1
8 % 3 = 2
9 % 3 = 0
10 % 3 = 1

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

Lesson 1

The first lesson consisted of an explanation of the language Processing,
the Processing IDE (Interactive Development Environment), which is
the editor we work in, and why you should learn programming.
I showed you the basic idea of an instruction and of the syntaxis of
the language. The small program we wrote was:

void setup() {
    size(400, 400);
}

void draw() {
    background(235,113,123);
    ellipse(mouseX, mouseY, mouseX / 2, mouseY / 2);
}

Code explained

The setup function will be called first when you run the program. Here's the place to define the basis of your application. What needs to be done in the first place comes here.
The draw function is an eternal loop, which will run continuously until either you quit the program or turn of your computer. Setting the background function in the draw function will make Processing to draw the background each frame, each time it's being called. In other words: every frame of your program will be drawn with a fresh background. If you don't do this, the former frame will be visible also (and the former, and the former, etc.).
Dependent on your program you can do this or not.

Drawing an ellipse expects four parameters. You can find more information about basic shapes in the book, page 28.

Processing comes with some internal variables which are always available. Two of them are mouseX and mouseY. These variables change each frame and represent the position of the mouse pointer.

The semicolon is called statement terminator. It instructs the Processing interpreter that you ended a statement and that it can continue reading a next statement.

Processing pt. 2

The Openprocessing.org website features a lot of cool code, really handy to learn from, and also a good show off of the posibilities of Processing. Small list of great things out there:

• Kaleidoscope
• Magnet ink
• Colde Sore Generator

Processing pt. 1

Processing is a Java based programming language which will be the main language I'll be teaching the first semester at the Frank Mohr Institute in Groningen. Processing website
Processing is extendable to arduino and is also capable of doing 3D stuff with an OpenGL library. There'll be code examples printed here in the near future. An example is shown below.

Extending Mootools

Mootools lacks an easy way of checking events on objects. This is a Mootools extension to do so.

/**
 * mootools additions
 */
Native.implement([Element, Window, Document], {
    hasEvent: function(type) {
        var events = this.retrieve('events', {});
        if (events && events[type]){
            return true;
        } else {
            return false;
        }
    },
    getEvents: function() {
        var events = this.retrieve('events', {});
        if (events) {
            return events;
        } else {
            return null;
        }
    }
});

A short history on Computer Literacy

Douglas Adams - Hyperland

An old documentary, made in 1990 by the BBC, on the concept of internet.

Ted Nelson pt. 2

I found another part of the interview with Ted Nelson in my notes for the lessons of March 2009. Here he illustrates a working version of Project Xanadu.

Ted Nelson

During the lessons last March, I showed this interview. It's on hypertext and internet. In his eyes, the internet has become something he did not have in mind while thinking about hypertext. He has his own conception of it, where he is still working on. One of his bigger projects is Project Xanadu, in his eyes a real implementation of the concept of hypertext.

Syntax highlighting

When you want to share code, it'd be nice if your code can be highlighted in pretty colors, because it makes code much more readable. I found a link how to implement syntax highlighting in Blogger, which I'll try to do soon. I found it googling: http://codeblog.kello.se/ I also use the highlighter on my code-projects website: http://www.vincentbruijn.nl It's javascript based and supports many languages. You can find it on Google Code: http://code.google.com/p/syntaxhighlighter/

c0d3l4b started

First codelab article. I ordered a book written by Edsger Dijkstra, titled "A Discipline of Programming". It's around for a while, but I never saw it. I ordered it second hand from Amazon and I heard it's ben shipped today. Can't wait to see it!