Send a few examples of code to learn how to use it. Try not to use methods and skills that did not appear. No need to design very powerful programming. Just learn the methods used in the examples and design some simple things.
Require:
Create an animation using HTML and the canvas element
Create a new page on your website
DO NOT add user interaction for this project (such as mouse/keyboard events )
Using an animation loop that uses requestAnimationFrame, create an animation that explores the deterministic and indeterministic processes that have been covered through the course content. Explore animating the position of the shapes/patterns but also other properties such as colour, size, alpha, etc. All points on the rubric are ranges, with high/full marks showing a deeper understanding of the concepts than simply including them.
1.You are to implement a strategy that bounds your shapes/patterns to the screen such as with bounce, toroidal, or some other strategy.
This will include not have unnecessary drawing occuring outside the border of the canvas.
2.A function, or functions, that push a JavaScript object to an array, or arrays, and has been implemented with no errors or redundancy Use this functionality to manage the data of the "shapes" that are to be drawn.
You must use functions to organize your code.
3.As we have discussed, you are trying to write code that you understand, and not "code that just works". Using functions allows for semantic descriptions to be applied to blocks of code. Use this strategy with the convention of declaring functions at the bottom, global variables at the top - and executable code in the middle. Also, don't forget that creating a function can provide a way to more efficiently understand and interact with the code.
4.Use requestAnimationFrame to create your animation loop.
5.Cosine and Sine have been implemented.
You could use the Cosine and Sine strategies for creating your animation, or to some degree that is not trivial (such as logging them to the console) or redundant in a way that does not affect the visuals)
6.Your HTML, CSS, and JavaScript pages have been setup correctly with no errors or redundancy.
7.Your animation is to include both deterministic and random elements.
In relation to the ongoing conversation on generative art we have discussed deterministic and indeterministic (random )techniques. In this project you must implement both strategies.
8.avaScript has been implemented in a way that shows an exploration of the concepts beyond what has been shown in the course content.
This might include canvas context methods that have not been explored in the class content, but more specifically, the use of code that has been presented in a personalized way that is not simply a replication of the course content. Show you understand the core course concept and that you have explored them. Do not add user interaction for this project.
9.Aesthetic: clear, consistent and well-articulated execution of a design strategy showing creativity and originality, and that you have explored and played with the content covered.
10. Html and css only copy the examples. You only need to design in the JavaScript.