In this assignment you will create your own customized animated wave similar to the Wave created by Jerome Herr, here: https://www.openprocessing.org/sketch/152169.
PART 1: we set up the circles
- Fork this repo.
- paste the (broken) starter code from the repo's .pde file into processing
- fix the code, so it draws a set of concentric (inside each other) circles
- set your own stroke, fill (noFill?), background, strokeWeight, number of circles, width between circles.
- tinker with your code until you like the look of the circles.
PART 2: we make the circles move
- add
setup()`` anddraw() function. and put all your code in one or the other. - above (and outside) the
setup()function, declare two new variables as floats:arcStartandarcEnd - in the
setup()function, set their initial values toPI. - in the draw function, change the
ellipsefunction into anarcfunction, by just replacing the word "ellipse" with "arc", then add two more arguments, so the fifth argument is the variable calledarcStartand the sixth argument isarcEnd. - in the last line of the draw function, increment
arcEndby 0.05 - run your sketch: you should see a set of circles which start at nothing and wrap around to close themselves.
PART 3: we make them move like a wave
- we need a stopping point for the movement. declare a new global (above the setup function) variable as a
floatcalledmaxArcEndand set its initial value toTWO_PI. - in the same way, declare two more global (above setup) variables, both
floats, calledmovementandspeed. Set the initial value ofmovementto 0.0 and set the initial value ofspeedtoPI/60. - and we'll make the movement bounce like a wave. This part has some math which you don't need to worry about. Just paste this line into the
whileloop in the line above where you draw the arc:arcEnd = map(sin(movement + (maxArcEnd / num * i)), -1, 1, arcStart, maxArcEnd); - Remember above where you incremented
arcEndby 0.05? Replace that line with a line where you incrementmovementbyspeed. - test and tinker.
WRAP-UP:
- Copy your code into your (forked) WoodstockWave repo's
.pdefile - Update the header and footer text of
index.html. - Go to the
Settingspage for your repo, and scroll down to theGitHub Pagessection. Change theSourcetomaster branch, then click thesavebutton (which is next to the box you just changed). - Check your work at
<YourUsername>.github.io/WoodstockWave. (You can also find this link by scrolling down to the middle of your settings page.) - Create a new pull request.
This assignment is based on original work created by Jerome Herr.
