Assignment 3: project oriented programming

inspiration & CONCEPT: Haunting Questions, Bursting Emotions

I intended to create repeating shapes and have them follow around the cursor. The mushrooming question marks describe the unfading nature of problems that never seem to go away. It shows how questions and emotions can loom in our minds and pulsate with time.


the codes

Twist [] myTwist;            

void setup() {
  size(1280, 720);
  myTwist = new Twist[25];
  for (int i=0; i<myTwist.length; i++){
    myTwist[i] = new Twist(i);

void draw() {
  for (int i = 0; i < 1280; i += 128) {
    fill(0+i/64*16*random(-10, 10)*noise(frameCount*0.01),49+i/64,156+i/64, 30);
    rect(0+i, 0, 128, 720);
  //bursting emotions (two groups of circles )
  for (int i = 0; i<myTwist.length/2; i++){
    pushMatrix();               //save current coordinate system to the stack
    translate(50, 75);          //take the anchor coordinates from (0,0) to (width/2, height/2)               
  for (int l = myTwist.length/2; l<myTwist.length; l++ ) {
    tint(255, 156);
    popMatrix();                //restore coordinate system
class Twist{ 
  float posX, posY;     //inital coordinate of the circles
  float easing = 0.05;  //speed of the circles
  float diameter;       //size of circles
  color circleColor;    //color of the circles
  float speed;          //dictates how fast the circles move
Twist(float _speed){
  circleColor = color(200, 100, 100, 30);
  diameter = 100;
  speed =_speed;

//executes all functions 
void runTwist(){

void drawCircles(){
 //makes circles follow the cursor
  float targetX = mouseX;
  float dx = targetX - posX;
  posX += dx * easing * speed;
  float targetY = mouseY;
  float dy = targetY - posY;
  posY += dy * easing*speed;
  circle(posX+random(-10, 10)*noise(frameCount*0.01), posY+random(-10, 10)*noise(frameCount*0.01), diameter);

  //generates random question marks and the text in the middle of the circle
void drawText(){
  text("why", mouseX, mouseY);
  fill(255, 180);
  text("?", random(width)-50, random(height/2)+400);

  //controls the size of circles
void sizeCircles(){
     diameter +=3;
  if (diameter>250){
    diameter = 100;


Initially, I tried to create a group of circles that enlarges and shrinks to mimic a heart pulsating with its left ventricle. It does look like it’s pumping and it doesn’t look like a heart to begin with. I ay have to control the speed of the size changing and draw better next time.

Leave a Reply