Skip to content

Latest commit

 

History

History
43 lines (35 loc) · 4.07 KB

README.md

File metadata and controls

43 lines (35 loc) · 4.07 KB
Raw

Flatiron Learning Code - P5 JS

Learning code created in connection with The Flatiron School in NYC.

This project was initiated after attending a 2 day free class through the Access Labs initiative of The Flatiron School. Different versions of the P5 JavaScript code are presented in this project:

/static - first they show us in class how to create the static shape that will be animated by the end of class
/original - the animated circle in a box that gets created by the end of the 2 hour class
/ - TheMitchWorksPro coding enhancements and modifications I made after class are in the root folder of this project

  • this final version reuses the circle-in-box shape in a function
  • provides some different behaviors for the animation
  • integrates the behavior with URL parameters
  • under the covers, it reduces the risk of the same color being randomly generated twice in a row w/ test logic

To test the final code, these hyperlinks include appropriate parameters to test all the variations:

  1. circle behavior 1, each click affects the circle and randomly changes its color
  2. circle behavior 1, same as previous, but click once to stop and again to continue animation
  3. circle behavior 2, each click affects the circle and randomly changes its color
  4. circle behavior 2, same as previous, but click once to stop and again to continue animation
  5. circle behavior 3, each click affects the circle and randomly changes its color
  6. circle behavior 3, same as previous, but click once to stop and again to continue animation

You can also download the index code files from the root and test them locally using your web browser. Instructions for how to set the parameters is included in the comments on the index.js file.

Editing This Code

There is a web tool you can use for free to experiment with the original code and the static code provided in this project. This UI was provided by the Flatiron school. Note that the enhancements made in the final version will not run in this web UI (parameters doe not get passed in correctly), but you can see the code in action by following the instructions in the .js file or clicking the demo links above.

Mitch