Interactive animation



The beetle I created in Processing can now move, change over time and respond to mouse interactions.
Its Y position is set by posY = posY-10, while its X position is determined by the mouse using posX = mouseX. I used rotate() and random()for the legs movements and dist() to set the color of its body.


float posX; float posY; float rotA; float rotB; float distance; void setup() { size(800, 800); frameRate(15); posX=width/2; posY=height+100; rotA=0.1; rotB=0.05; } void draw() { background(255); translate(posX, posY); rotate(PI/4); stroke(100, 0, 50); fill(100, 0, 50); //purple // Fore Legs pushMatrix(); rotate(random(-rotA, rotA)); strokeWeight(0); quad(45, 20, 45, -30, 60, -15, 60, 20); quad(20, 45, -30, 45, -15, 60, 20, 60); strokeWeight(4); line(47, -27, 58, -43); line(58, -43, 58, -71); line(-27, 47, -43, 58); line(-43, 58, -71, 58); popMatrix(); // Middle Legs pushMatrix(); rotate(random(-rotA, rotA)); strokeWeight(0); quad(75, 35, 75, -15, 90, 0, 90, 35); quad(35, 75, -15, 75, 0, 90, 35, 90); strokeWeight(4); line(78, -12, 118, -12); line(118, -12, 139, -34); line(-12, 78, -12, 118); line(-12, 118, -34, 139); popMatrix(); // Hind Legs pushMatrix(); rotate(random(-rotB, rotB)); strokeWeight(0); quad(85, 30, 165, 30, 150, 45, 100, 45); quad(30, 85, 30, 165, 45, 150, 45, 100); strokeWeight(4); line(161, 33, 161, 75); line(161, 75, 195, 75); line(33, 161, 75, 161); line(75, 161, 75, 195); popMatrix(); // Antenna pushMatrix(); rotate(random(-rotB, rotB)); strokeWeight(0); quad(20, 5, -7, -22, 7, -22, 35, 5); quad(5, 20, -22, -7, -22, 7, 5, 35); strokeWeight(3); line(-5, -22, -5, -65); line(-22, -5, -65, -5); line(-5, -65, 17, -90); line(-65, -5, -90, 17); line(17, -90, 30, -90); line(-90, 17, -90, 30); line(13, -84, 24, -84); line(-84, 13, -84, 24); line(9, -78, 18, -78); line(-78, 9, -78, 18); popMatrix(); // Distance from posX to center, 0 to 400 distance = dist(posX, 0, width/2, 0); // Body noStroke(); fill(200, distance/2, 50); //Change color by distance value, 0 to 200 //fill(200, 100, 50); //Original color, orange1 rect(15, 15, 75, 75); rect(90, 90, 45, 75); rect(90, 90, 75, 45); triangle(15, 89, 91, 89, 91, 165); triangle(89, 15, 89, 91, 165, 91); rect(0, 0, 60, 60); fill(250, 150, 50); //orange2 rect(0, 0, 30, 30); fill(150, 50, 0); //orange3 rect(15, 60, 60, 15); rect(60, 15, 15, 60); rect(135, 135, 15, 15); // Define position posX = mouseX; posY = posY-10; // Repeat animation if (posY <= -height+500) { posY = height+100; } }

Leave a Reply