Teaching (with) OOCSI

OOCSI was designed and developed for education, from the ground up. And it has been used in education for years in the department of Industrial Design at Eindhoven University of Technology.

The video lectures were produced to allow for scalable teaching. On this page we show two introductory exercises that you can try with a group of participants, in a lecture, hands-on tutorial or workshop setting.

Paint the canvas

As a quick introduction you can use the “paint the canvas” exercise in small to large groups. This exercise can be run out of the box with Processing and the OOCSI library installed into Processing. Participants will learn how to make their first connection to OOCSI and send data successfully. They will also get a feeling for different data attributes in OOCSI messages and how quick feedback loops help in prototyping with the OOCSI middleware.

How-to

Run the canvas code on your own computer that should be connected to a large projector or display in the room visible to all participants. You can share the following code with the participants. Note: Instruct all participants to replace the OOCSI server "localhost" with the server address that you use in your teaching:

import nl.tue.id.oocsi.*;

OOCSI oocsi;

void setup() {
  size(600, 600);
  background(10);
  frameRate(10);

  oocsi = new OOCSI(this, "senderName", "localhost");
}

void draw() {
  filter(BLUR, 1);
  ellipse(mouseX, mouseY, 5, 5);
  
  oocsi
    .channel("OOCSI_Tutorials_Paint_the_Canvas")
    .data("x", mouseX)
    .data("y", mouseY)
    .data("colorR", 50)
    .data("colorG", 100)
    .data("colorB", 200)
    .send();
}

What happens next

• first static dots will be appear on the canvas
• one more dots are coupled to the mouse position and start to move around the canvas
• participants draw fots with for or while loops
• participants find the “easter egg”, the hidden attribute for controlling the size of the dots
• it gets wild!

Troubleshooting

• check that the participant laptops havea working Internet connection
• check that the right server is being used, with the right spelling
• check that the channel is spelled right
• check that variables are sppeeled right
• check that all variables are sent together (and that send() is not missing at the end)

You can use the main canvas code and project it on a big screen in the room.

The chain

Another quick exercise, for smaller groups, is The Chain. Essentially, every participant picks another participant to whom they send the OOCSI messages that they receive from someone else. You should arrange the sending as a chain, so that everyone in the class is an essential link in transmitting data. The teacher should be part of this chain and change the data every round, e.g., counting up by one. The code is similar for everyone and adapted from the DirectSender and DirectReceiver examples in the Processing OOCSI library:

import nl.tue.id.oocsi.*;

OOCSI oocsi;

void setup() {
  size(200, 200);
  background(255);

  // connect to the OOCSI network with a unique client handle
  oocsi = new OOCSI(this, "my client handle", "localhost");
}

void draw() {
}

void handleOOCSIEvent(OOCSIEvent event) {
  // take the counter from the incoming message
  int counter = event.getInt("counter", 0);

  // each participant needs to insert the client handle of the next client here
  oocsi.channel("client handle")
    // send the counter value increased by 1
    .data("counter", counter + 1).send();

  // print the current counter value
  println(counter);
}

Note: Instruct all participants to replace the OOCSI server "localhost" with the server address that you use in your teaching, and every participant needs to pick their own unique client handle and give this to the participant that comes previous in the chain. Finally, someone needs to kick off the chain by sending the first message with a counter value of 0.

What to expect?

The Chain takes a bit of work to get right and set up properly, so that the events flow circular in the chain of connected clients. There will be some people who need a bit more help in getting it right and then there will be a broken link someone, which can be fun to track down. Once it’s working, it can be quite fun to watch and it certainly gives the group of participants a sense of achievement. ;-)

Note that this exercise will not work well with very large groups, the debugging will take too much time and the chain might break unexpectedly. Try this with groups of 5-15 participants.

Racing the chain

A variant of The Chain is played with two independent counters and potentially two different chains. You can let the participants use counterA and counterB, and see if they can increase independently. There are many more possibilities once the basic concept of a chain is established. Just keep in mind that the exercise should not be too competitive as connectivity is built conceptually on cooperation–and that’s what the participants should pick up from the session.

This page is work-in-progress; we will extend the teaching resources as new material is produced.