by Isabella Micallef


Two specific sources gave me inspiration for my animation. The first inspiration was a sculptural piece at Wilkinson. This piece is interesting and I thought as it was a main element in the building would be nice to incorporate into my design. I have taken the element of the triangles all being connected into my design. Another source of inspiration for my animation was several animations on The one in which inspired me was the work of Dan Berman in his piece 'Octoplay'. The different shapes evident in the piece and how they all related was interesting and aesthetically pleasing.

Design Brief

The aim of the brief was to redesign the banner for the faculty's Design lab. My deisgn focused on the process of the design in which designers undergo in which each element connects and a final product is produced. But also the range of activity which is udnergone in the Design Lab. The Design Lab undergoes a range of different design processes in which I thought would be interesting to highlight through the use ofinterconnecting lines. At first I wanted to create lightbulbs in the background of an animation floating randomly, but then was inspired by the sculptural piece in Wilkinson. Also within my animation I have incorporated the Design Lab's trademakk yellow to draw connections.

Design Process

My final design is not exactly how I would have liked it to look, as the design lab logo was suppose to be present infront of the aniamtion and not have two seperate flames. One in which is a flash with the header. Another element which I would have changed is if the animation is run for a long period of time, the lines become bolder due to them gatehring altogether and not creating an even spread of triangles. My design process included a range of steps to create interconnecting lines. At first I was trialling with cricles floating around the screen as I was initially coding for floating lightbulbs, but then I decided to add lines in the middle of the circles in which when the circles touched, a line would connect. When evaluating my design the circles looked to much and looked for more inspiration on openprocessign in which I then came up with the idea of using just lines. Therefore I still kept the method of when the circles touched the lines would connect but made the circles transparent.

Step 1

I initially created random circles floating around the screen which consisted of the colour scheme of the Design Lab. This design started to look messy and generic so I started to play around with the speed and time in which the circles would appear.Then it was at this stage that I gathered inspiration from a range of sources in which I created the idea of triangular prism like figures connecting to one another. A large element of my design process was to research several methods for the lines to joing together to form the pyramid like shapes. Therefore this was a large part of my design process trialling each method.

Step 2

At first, the lines were a different colour and stroke width, so the animation looked even more clustered than the circles, as it then became apparent that when the circles touched and a new line emerged, they were starting to form onto of each other. This meant that the stroke lines were become bolder which did not look aesthetically pleasing. Lastly I added the font of the Design Lab in which failed so I opted for a header, but it would not become on top of the animation but instead flashed at the beginning.

  • Show Sketch
//Creating number of circles and the shape of circles.
int NUM_CIRCLES = 102;
float MIN_RADIUS = 10;
float MAX_RADIUS = 20;
float DELTA_ANGLE = TWO_PI/100;
Circle[] circles;
//Manipulate speed of transparent circles and yellow lines.  
void setup() {
size(600, 110);
//Uploading header image 
  /* @pjs preload="/uploads/16089/designlabheader.png"; */
/** @peep sketchcode */
size(600, 110);
PImage img;
// Image must be preloaded by the browser
img = loadImage("/uploads/16089/designlabheader.png");
image(img, 0, 0);
  circles = new Circle[NUM_CIRCLES];
  for (int i = 0; i < circles.length; i++) {
    circles[i] = new Circle(random(width), random(height), random(MIN_RADIUS, MAX_RADIUS));
void update() {
  for (int i = 0; i < circles.length; i++) {
void draw() {
  for (int i = 0; i < circles.length; i++) {
//Create class circle
class Circle {
  float x;
  float y;
  float radius;
  float heading;
  float speed;
 //Change circles_speed therefore affecting the lines connecting. 
  Circle(float _x, float _y, float _radius) {
    x = _x;
    y = _y;
    radius = _radius;
    heading = random(TWO_PI);
    speed = 0.5;
 //Creating lines which will appear when circles touch each other. 
  void draw() 
    stroke(253, 213, 37);
    for (int i = 1; i < circles.length; i++) {
      Circle other = circles[i];
      if (touching(other)) {
        line(x, y, other.x, other.y);
  void update() {
  void behaviour1() {
    // Constant linear motion
    float dx = speed * cos(heading);
    float dy = speed * sin(heading);
    x += dx;
    y += dy;
 //keep to frame
  void behaviour2() {
    if (x < radius) x = radius;
    if (y < radius) y = radius;
    if (x > width - radius) x = width - radius;
    if (y > height - radius) y = height - radius;
  void behaviour3() {
    // While touching another circle, line will change direction
    for (int i = 0; i < circles.length; i++) {
      if (circles[i] != this) {
        if (touching(circles[i])) {
          heading += random(-DELTA_ANGLE, DELTA_ANGLE);
  void touching(Circle other) {
    return (distance(other) < radius + other.radius);
  float distance(Circle other) {
    return dist(x, y, other.x, other.y);


Nobody has said anything yet.