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.
VIDEO DEMO
the codes
Twist [] myTwist; void setup() { size(1280, 720); //constructor myTwist = new Twist[25]; for (int i=0; i<myTwist.length; i++){ myTwist[i] = new Twist(i); } } //EXECUTION void draw() { //background for (int i = 0; i < 1280; i += 128) { noStroke(); 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++){ myTwist[i].runTwist(); 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); myTwist[l].runTwist(); } popMatrix(); //restore coordinate system } }
//CLASS VARIABLES 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 //CONSTRUCTOR Twist(float _speed){ circleColor = color(200, 100, 100, 30); diameter = 100; speed =_speed; } //FUNCTIONALITY //executes all functions void runTwist(){ drawCircles(); sizeCircles(); drawText(); } void drawCircles(){ fill(circleColor); noStroke(); //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(){ fill(255); 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; } } }
PROBLEMS
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.