//***************************************************************************************** // Author: Shieu-Hong Lin, MATH/CS Deprtment, Biola University. 2018 // Permission is given to students/educators for adapting the code below. //***************************************************************************************** // The drawFish functio below is variant that allows more control for drawing the fish // using 9 pieces of information priovided when you call the function: // // float headX, headY, tailX, tailY: // fish body centered at the middle point between (headX, headY) and (tailX, tailY) // // float length: length of the fish body // float width: width of fish body // float fin: distance from head to the middle point of the tips of two fins // float tailLength: length of the fish tail // float tailWwidth: width of fish tail //***************************************************************************************** void drawFish(float headX, float headY, float tailX, float tailY, float length, float width, float fin, float tailLength, float tailWidth) //void drawFish(float headX, float headY, float tailX, float tailY, float length, float width, float fin) { //********************************** //Determine the center of the body //********************************** float centerX = (headX+tailX)/2; float centerY = (headY+tailY)/2; //********************************************************************* //Determine the orientation direction of the body: tail toward head //********************************************************************* float directionX = headX-tailX; float directionY = headY-tailY; //************************************************ //Determine the scaling factor of the body length //************************************************ float directionLength = sqrt( directionX*directionX + directionY*directionY ); float lengthScale = (length/directionLength) *0.5; //********************************************************************* //Determine the orientation direction of the body: side to side //********************************************************************* float widthDirectionX = headY-tailY; float widthDirectionY = (-1)*(headX-tailX); //************************************************ //Determine the scaling factor of the body width //************************************************ float widthScale = (width/directionLength) *0.5; //************************************************ //Determine the fin location along of the body (on head to tail line) //************************************************ float finScale = (length/2 -fin)/length; float finX = centerX + finScale*(2*lengthScale)*directionX; float finY = centerY + finScale*(2*lengthScale)*directionY; //************************* //Draw the body as a quad //************************* quad( centerX +lengthScale*directionX, centerY +lengthScale*directionY, finX + widthScale*widthDirectionX, finY + widthScale*widthDirectionY, centerX -lengthScale*directionX, centerY -lengthScale*directionY, finX - widthScale*widthDirectionX, finY - widthScale*widthDirectionY ) ; //********************************************************************* //Determine the directions of the fin #1 //********************************************************************* float finDirectionX1 = (finX + widthScale*widthDirectionX) - (centerX +lengthScale*directionX); float finDirectionY1 = (finY + widthScale*widthDirectionY) - (centerY +lengthScale*directionY); //************************* //Draw fin #1 //************************* line( finX + widthScale*widthDirectionX, finY + widthScale*widthDirectionY, finX + widthScale*widthDirectionX + finDirectionX1, finY + widthScale*widthDirectionY + finDirectionY1 ); //********************************************************************* //Determine the directions of the fin #2 //********************************************************************* float finDirectionX2 = (finX - widthScale*widthDirectionX) - (centerX +lengthScale*directionX); float finDirectionY2 = (finY - widthScale*widthDirectionY) - (centerY +lengthScale*directionY); //************************* //Draw fin #2 //************************* line( finX - widthScale*widthDirectionX, finY - widthScale*widthDirectionY, finX - widthScale*widthDirectionX + finDirectionX2, finY - widthScale*widthDirectionY + finDirectionY2 ); //************************************************************ //Determine the scaling factors of the tail: length and width //************************************************************ float tailLengthScale = tailLength/directionLength; float tailWidthScale = (tailWidth/directionLength) * 0.5; //********************************** //Determine the tip of the tail //********************************** float tipX = centerX -lengthScale*directionX; float tipY = centerY -lengthScale*directionY; //************************************************ //Determine the bottom location along of the tail (on head to tail line) //************************************************ float endX = centerX -(lengthScale + tailLengthScale)*directionX; float endY = centerY -(lengthScale + tailLengthScale)*directionY; //************************* //Draw the tail as a triangle //************************* triangle(tipX, tipY, endX + tailWidthScale * widthDirectionX, endY + tailWidthScale * widthDirectionY, endX - tailWidthScale * widthDirectionX, endY - tailWidthScale * widthDirectionY ); } //******************************************************************************************** //Define the setup function, which will be called once in the beginning // to set up some initial settings of the program //******************************************************************************************** void setup() { //Set the canvas size size(800, 800); //Set the stroke color as white stroke(255, 255, 255); } //********************************************************************************** //Declare the following variables to record the current location of a bouncing ball //********************************************************************************** float ballX = 20; float ballY = 20; //********************************************************************************** //Declare the following variables to record the velocity of the ball //********************************************************************************** float x_vel = 8; float y_vel = 2; float gravityOnY = 0.05; //******************************************************************************************** //For each circle, // declare two variables to store the X and Y coordinates of the center of the circle and // initilize the contents to represent the starting locations of the points //******************************************************************************************** float circleX1=400; float circleY1=400; float circleX2=430; float circleY2=450; float circleX3=500; float circleY3=520; //******************************************************************************************** //Define the draw function, which will be called repeatedly to draw pictures on the screen //******************************************************************************************** void draw() { //Clear the canvas background(192, 64, 0); //********************************************************************* //Set the fill color to the red color, and then draw a 20 x 20 rectangle, // with (ballX, ballY) as the center of the bouncing ball //********************************************************************* fill(255, 0, 0); ellipse(ballX, ballY, 20, 20); // Update the ball to the new position ballX += x_vel; ballY += y_vel; //Update velocity based on gravity on Y y_vel += gravityOnY; // Bounce off left & right wall if ((ballX <20) || (ballX> 800 -20)) { x_vel = x_vel* -1; } // Bounce off floor & ceiling if ((ballY<20) || (ballY> 800 -20)) { y_vel = y_vel * -1; } //********************************************************************* //Set the fill color to the green color, and then draw a fish with // body centered at the middle between (mouseX, mouseY) and (circleX1, circleY1) // length of the fish body: 60 width of fish body: 50 // distance from head to the middle point of the tips of two fins: 20 // length of the fish tail: 60 width of fish tail: 50 //********************************************************************* fill(0, 255, 0); drawFish(ballX, ballY, circleX1, circleY1, 60, 50, 20, 15, 30); //********************************************************************* //Set the fill color to anothern color, and then draw a fish with // body centered at the middle between (circleX1, circleY1) and (circleX2, circleY2) // length of the fish body: 60 width of fish body: 50 // distance from head to the middle point of the tips of two fins: 20 // length of the fish tail: 60 width of fish tail: 50 //********************************************************************* fill(0, 255,225); drawFish(circleX1, circleY1, circleX2, circleY2, 50, 40, 20, 15, 40); //********************************************************************* //Set the fill color tto another color, and then draw a circle with a radis of 20 // centered at (circleX3, circleY3). //********************************************************************* fill(225, 255, 0); ellipse(circleX3, circleY3, 30, 30); //******************************************************************************************** //Update the X and Y coordinates of the first circle to move it closer toward the current location // of the mouse at (mouseX, mouseY), //******************************************************************************************** circleX1= circleX1 + 0.04*(ballX-circleX1); circleY1= circleY1 + 0.04*(ballY-circleY1); //******************************************************************************************** //Update the X and Y coordinates of the second circle to move it closer toward the current location // of the first circle at (circleX1, circleY1), //******************************************************************************************** circleX2 = circleX2 + 0.02*(circleX1-circleX2); circleY2 = circleY2 + 0.02*(circleY1-circleY2); //******************************************************************************************** //Update the X and Y coordinates of the 3rd circle to move it closer toward the current location // of the 2nd circle at (circleX1, circleY1), //******************************************************************************************** circleX3 = circleX3 + 0.02*(circleX2-circleX3); circleY3 = circleY3 + 0.02*(circleY2-circleY3); }