Due: 2014-01-09 10:30a
For the first part of this assignment, I want you to extend the bouncing ball example we looked at yesterday. The bouncing ball that I gave you drops straight down and bounces off the floor. I would like you to give the ball a little horizontal velocity.
Start by creating a new variable vx to hold the ball’s new velocity component and set it to some reasonable number like 2. Now, where we update v based on vy, add a line that updates x in the same way. You don’t have to worry about updating vx, because gravity doesn’t act on the horizontal component of velocity. If you run your sketch now, the ball should arc down to the right and eventually bounce off screen.
Obviously, the next step is to write some condition statements to keep the ball on screen. The condition should look just like the condition we wrote for y, only this time, you are making sure that x hasn’t gotten too close to the right wall (which is at width). Like we did for y, set the x value so that the ball stays on the screen, and then reverse the direction of vx. This condition will have no else, because there is nothing we want to do if the ball hasn’t reached the right wall. Run the sketch and make sure the ball is bouncing off the right wall.
Once you have the ball bouncing off of the right wall, repeat the process with a third condition statement (or an else-if if you know how) that makes the ball bounce off of the left wall (which is, of course, at 0).
Once the ball is bouncing all over like crazy and not leaving the canvas, it is time to mess around with it a bit. I want to see at least one addition to the base requirements above. I’ve listed some ideas that can be mixed and matched below, or you could come up with something entirely different.
Here are some ideas: Stop updating the canvas and let the ball leave tracks. Try a little transparency. Turn off the stroke, or turn off the fill (don’t turn them both off at the same time, or you will have a very boring canvas). Have the size of the ball adjust based on its position, or maybe its color (these could be done discretely using condition statements to make changes at set intervals or locations, or they could be continuous, where the size or color is a direct function of the ball’s position). Another possibility would be changing the ball based on its velocity. You could even make the ball more ball-like by having it compress a bit when it hits a surface.
I would like you to name the sketch using this pattern: username_hw3a.
Our starburst is going to be based on the for loop that we looked at in class for iterating around a circle. The general principle of the starburst is to iterate around a circle, drawing lines at set intervals. If, for example, I wanted a shape that had six spines, it would look like this:
We have broken the circle up into 6 equal angles (in this case π/3) and drawn lines at each angle. We will make this more interesting, but for the time being, just try to draw this figure.
Create three variables in your draw() function: circleResolution, radius, and angle. Set radius to be some reasonable value like 50, and set circleResolution to be 6. The angle is simply 2π / circleResolution.
Now, you are going to write a for loop to draw each of the lines in the shape (this will basically look like our shape example). For each multiple of the angle, you will draw a line from the center of the shape out to x and y, remembering that we can use cos() and sin() to find locations on a circle. To make things easier, use translate(width/2, height/2) to move the origin of the coordinate system to the center of the canvas. Once you have done that your lines will all start at (0,0).
Run your code and make sure you get the shape above. Try some different values for circleResolution and make sure that it continues to work.
Once that is working, it is time to get a little more interesting. The first step is to use mouseX to adjust the length of the lines (i.e., the radius). Figure out a formula so that the radius shrinks as you move the mouse towards the center of the canvas. You will want to make sure you have background() in your draw function so you can actually see the changes.
Now, we will use mouseY to adjust the circleResolution. Once that is working, you should get dense small balls when the mouse is at the bottom of the screen in the middle, and only a line or two that stretches across the canvas when you are in one of the upper corners of the canvas.
As with the bouncing ball, I would like you to have some fun now. I suggest moving background() into setup() so you leave traces for some complex shapes. It would be nice to see some colors with transparency used here. You might also connect the tips of the lines together. This could be complex and interesting, or just a big hairball – try it and see.
I would like you to name the sketch using this pattern: username_hw3b.
You can create proper star patterns using the same process as the one we went through to make our regular polygons and the starburst above. The trick is to alternate the lengths of the radius every other time. Since we would want symmetric stars, the easiest thing to do is to pick an initial number of subdivisions, which would correspond to the number of points on the star. When you iterate, you will multiply this number by two to get the troughs. So, for example, if we picked six, we would actually divide 2π by 12 for the angle between each peak and trough.
For a real challenge, look into curve() or bezier() and make the “points” of your star rounded.
For both sketches, you should include the documentation block below at the top of your sketch. Make sure that you specify what you did that was cool and interesting.
/**
Assignment three
A description of the sketch.
Your name
The date
**/
I would like this code turned in in the DROPBOX on MiddFiles. You can refer to the reference on the LIS wiki to help you connect to the file server.