Coding Art Workshop

A short workshop on Coding Art as part of the ADAF festival 2020.

by Yu Zhang in July 2020.

About the workshop

The workshop “Coding Art–Idea to Visuals” is based on the first part of the book “Coding Art” and will be taught through the Processing language and coding environment.

The “Coding Art–Idea to Visuals” workshop is to show how participants can translate their ideas into simple visual elements, and then work with these elements creatively, by animating them in motions and interaction.

In this three-hour workshop for the ADAF festival, I will leave half an hour for a brief introduction of the Processing software and its general capabilities, creative (computational) techniques in general, and a four-step creative process from the “Coding Art” book. In this main part of the workshop, I will explain how to (1) draw visual elements in Processing, (2) shape up visual elements in static to animate and scale them, and finally (3) make the step to interaction as input for animating visual elements.

With this step-by-step progression, the workshop participants can get hands-on experience with visual elements through creative exercises and personal explorations of animating visuals in motion and interaction. In the end, the workshop will give some time for participants to work out a small example in class and we will go through this example together and connect the example with the concluding workshop summary.

Your host

An artist by training, Yu Zhang finished her PhD in 2017 on the theory and artistic practice of interactive technologies for public, large-scale installations. She approaches visual art with mixed reality installations and projections, sensor-based interactives, and computational arts. She roots her artistic intent in the symbolism of Asian traditions and transforms the artistic unpacking of drama and cultural signifiers into experiences of interactivity and connectivity that ultimately bridge artistic expression and audience experience. Yu's teaching experiences cover over ten years and a board space including traditional classrooms and design-led project-based learning activities.

Example 1: Draw a rectangle

How to draw a rectangle in the center of the Processing canvas.


void setup() {
  size(800, 800);
  background(110, 68, 129);
  rectMode(CENTER);
}

void draw() {
  //noStroke();
  stroke(0, 255, 255);
  strokeWeight(4);
  fill(255, 0, 255);
  rect(width/2, height/2, 50, 50);
}
        

Example 2: Rotate rectangle

How to rotate a rectangle by 45 degrees in the center of the Processing canvas.


void setup() {
  size(800, 800);
  rectMode(CENTER);
}
void draw() {
  background(0);
  translate (width/2, height/2);
  rotate(radians(45));
  noStroke();
  fill(255);
  rect(0, 0, 50, 50);
}

        

Example 3: Rotate two rectangles

How to rotate two rectangles by different degrees in the center of the Processing canvas.


void setup() {
  size(800, 800);
  rectMode(CENTER);
}
void draw() {
  background(0);

  //draw and rotate the first rect
  pushMatrix();
  translate (width/2, height/2);
  scale(2);
  rotate(radians(45));
  noStroke();
  fill(255);
  rect(0, 0, 50, 50);
  popMatrix();  

  //draw and rotate the second rect
  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(45));
  fill(0);
  rect(0, 0, 30, 30);
  popMatrix();
}
        

Example 4: Move a rectangle

How to move a rectangle in the horizontal direction.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  frameRate(30);
}
void draw() {
  background(0);
  //println(frameCount);
  translate(frameCount, height/2);
  rect(0, 0, 50, 50);
}
        

Example 5: Rotate two rectangles

How to rotate two rectangles in different directions.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  frameRate(60);
}
void draw() {
  background(0);
  fill(255);
  noStroke();

  //animate the first rect in rotation
  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(frameCount));
  rect(0, 0, 50, 50);
  popMatrix();

  //animate the second rect in rotation
  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(-frameCount));
  rect(0, 100, 50, 50);
  popMatrix();
}
        

Example 6: Move and rotate

How to move and rotate a rectangle at the same time.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  frameRate(60);
}
void draw() {
  background(0);
  translate(frameCount, height/2);
  rotate(radians(frameCount));
  rect(0, 0, 50, 50);
}
        

Example 7: Looping animation

How to move and rotate a rectangle in a loop.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  frameRate(60);
}
void draw() {
  background(0);
  //println(frameCount); 
  translate(frameCount, height/2);
  rotate(radians(frameCount));
  if (frameCount>width) {
    frameCount=0;
  }
  rect(0, 0, 50, 50);
}
        

Example 8: Random values

How to use random values to create visual effects.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  //use the value of frameRate to control the speed of animation
  //frameRate(10);
}
void draw() {
  background(random(0, 255));
  translate(frameCount, height/2);
  rotate(radians(frameCount));
  if (frameCount>width) {
    frameCount=0;
  }
  rect(0, 0, random(0, 50), random(0, 50));
}
        

Example 9: Alternating movement

How to move and rotate a rectangle back and forth.


int position=0;
int change=1;

void setup() {
  size(800, 800);
  rectMode(CENTER);
}
void draw() {
  background(0);
  println(position);
  fill(255);
  position=position+change;
  if (position>width||position<0) {
    change=-change;
  }
  translate(position, height/2);
  rotate(radians(position));
  rect(0, 0, 50, 50);
}
        

Example 10: Simple interaction

How to add a simple mouse interaction to a visual element.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  //use the value of frameRate to control the speed of animation
  //frameRate(30);
}
void draw() {
  background(0);
  fill(0, random(0, 255), mouseX);
  rect(width/2, height/2, mouseX, mouseY);
  fill(0, mouseY, random(0, 255));
  rect(mouseX, height/4, 50, random(0, 50));
}
        

Example 11: Saving frames

How to save frames of an animated visual.


void setup() {
  size(800, 800);
  rectMode(CENTER);
  //use the value of frameRate to control the speed of animation
  //frameRate(30);
}
void draw() {
  background(0);
  fill(0, random(0, 255), mouseX);
  rect(width/2, height/2, mouseX, mouseY);
  fill(0, mouseY, random(0, 255));
  rect(mouseX, height/4, 50, random(0, 50));
}
void keyPressed() {
  saveFrame("line-######.png");
}
        

Workshop feedback

It will be great to have your feedback about the book. Just type your thoughts below.