Morrison's 2018 Miniterm

The Processing Pilot Miniterm

What is Processing? Processing is computer language created by the MIT Media lab that is "graphics-centric." It is freely available for you to download and try. Get it here!

An animation such as this bouncing ball is fairly simple to produce. You can copy the code and paste it into a Processing window to run it. You can also modify and run it, changing the color of the ball, background, or the size of the ball.

Get a modern browser, Dude!

This is the code that does it.

float framerate = 24; // our "sketch" will have a framerate of 24 frames per second.

int ball_x;           // ball administration: x coordinate
int ball_y;           // ball administration: y coordinate
int ball_radius = 20; // ball administration: ball radius

void setup() {
  size(500,500);        // set draw area size
  frameRate(framerate); // set animation framerate
  ball_x = width/2;     // set the initial ball coordinates
  ball_y = ball_radius; // set the initial ball coordinates
  stroke(#FF0000);      // set the default shape outline colour
  fill(#FF0000);        // set the default shape fill colour
}

void draw() {
  // compute the ball height for this frame
  float bounce_height = height/2 * abs(sin(PI*frameCount/framerate));
  // because the top of the screen is 0, and the bottom is "height",
  float ball_height = height - (bounce_height+ball_radius);
  // clear the drawing area
  background(#000000);
  // set the new ball y position
  ball_y = (int) (ball_height);
  // draw the ball
  ellipse(ball_x,ball_y,ball_radius,ball_radius);
}

Here we are generating pickup sticks.

Get a modern browser, Dude!

This is the code.

void setup()
{
frameRate(1);
size(200,200);
}
void draw()
{
  background(0xFF);
  fill(0);
  stroke(#FF0000);

  for(int k = 0; k < 100; k++)
  {
    line(random(width),random(height),random(width),random(height));
  }
}

Along the way, you will also learn enough about HTML and CSS to create web pages that will hold your processing sketches. Sketches will live inside of HTML5 canvas elements.

Get a modern browser, Dude!

What is the goal of this Miniterm? The ECE department is interested in having a variety of courses that serve as entry points to programming. Two examples of this are WebDev and Robotics Programming. Students who take these are prepared to take Procedural Programming.

We would like to create a new course that will appeal to visual artists and to people who gain understanding of things visually. The aim of this miniterm is experiment with this idea.

What kind of students are you looking for? Principally, two types. One is programmers who have an interest in art and graphics. The other is students with a big interest in art, and who may never have programmed before.

We want to pair the art and programming students to work together. The programmers will help the art students to learn how to write programs that generate interesting images and animations.

The art students will get a taste of programming and a new creative outlet. The programming students will gain the benefit of getting artistic input on what they create.

This will be a learning community. We will share knowledge and learn from each other.

What will be the product? We can use Processing.js to display a gallery of works on the web. We are hoping to create works, and to have their creators shed insight on how they made their creations and what they learn. The bouncing ball animation show here was placed on the page using Processing.js.

This page will host our gallery of goodies.

How many students will we have? I would like for this group to be small, about 8. Half will be "programmers" and half "artists."

What will be the format of this Miniterm? We will have a morning and afternoon session where we all meet in a common place. You are also encouraged to further your efforts in the evenings and afternoons. Most mornings will consist of sharing new things we have discovered. When you learn something new, you will be encouraged to lead a discussion where everyone tries it and pushes its boundaries.