Link to Final Project:
https://editor.p5js.org/tina06c/sketches/_zEcwImlJ
Description:
This is a generative art where two types of motion was used to create motion in shapes. Angular motion is used in the little circles and the other shapes are moving back and forth through the use of sine and cosine functions.
Final Result:
Coding:
The following code is the most important in my code because they are in charge of all the motions that occur. The srx variable is in charge of moving the shapes side to side and sry is for up-down motion. The cosVal is in charge of angular motion in the generative art.
let freq = frameCount * 0.05;
// motions
let srx = 25 * sin(freq);
let sry = 50 * sin(freq);
let cosVal = 50 * cos(freq);
I referenced link 1 to understand how cosine and sine works within angular motion. Link 2 was used to generate the colors needed.
Link 1:
https://editor.p5js.org/MOQN/sketches/9tt43DeDY
Link 2:
https://www.rapidtables.com/web/color/RGB_Color.html
Reflections:
I used sine functions for sideways and up-down motions and combined those sine functions with cosine functions for angular motion. The functions were not difficult for me to understand. I was able to generate the motions that I wanted without much struggle. I chose not to use the map() function but I do understand the concept of map(). We can use the map function to change the values of a variable within a range to become values part of another range. The sine function allows our shapes to move up and down when we add the sine values to x and y coordinates. However, to create angular motion we need both sine and cosine value. By adding a cosine value to either x or y and adding sine to the left over coordinate that is not being added to cosine we get angular motion. Hence, the inclusion of both up-down and sideway motion creates angular motion.
Leave a Reply