>Week of 27th of October, 2020
- For the purpose of this Exercise Challenge, and a few following Exercises, we have been asked to create a pattern of our choice.
- Pattern that was an inspiration to this Exercise is carpet Pattern from the film Shining by Stanley Kubrick.
- Pattern is consisted of number of different colored hexagons layed on top of one another.
- V3 code is the continuing code for Excersise Challenge - Our Pattern and V2 of that code.
- In V3, another hexagon was created to be displayed at the top of first one.
- Both hexagons were put into separate functions outside of function draw() which are called createHex() and createHex2(). Functions are called in draw function and correctly displayed.
- The outcome of this V3 is the display of 6 hexagons across x-axis and y-axis, and at the top of them, another set of smaller red hexagons is displayed.
- Images of the outcome and inspiration can be seen in the Images folder of this Exercise.
- Required from us to create a canvas(500,500) and display grid which will show us the change of colors on the canvas.
- HSB color model is used to display colors in this exercise.
- Addition to Exercise 1.1 is code from Exercise 1.2 which allows us to move
canvas/grid around and to see the change of colors. Code also allows us to 'take screenshot' of the screen or save image everytime when we press ctrl+S.
- Exercise 1.2 is an add-on to Exercise 1.1 in which we worked with For Loops and Color.
- Exercise enables user to move the Canvas, by pressing the left key of the mouse.
It also allows user to 'take' a screenshot of the Canvas. If user presses ctrl+S, an Image (screenshot) will displayed as saved on users PC.
- Image that user saves will saved in format of date and time, telling us when user exactly pressed ctrl+S.
Example can be seen in Images folder of Exercise 1.2. .
- Exercise 1.3 required from us to create and display a Color Wheel.
- Exercise required from us to be familiar with Math of circle and importance of SOH,CAH,TOA - In this specific case Sin(y) and Cos(x).
- Sin and Cos helped us to position the circle on the canvas by adding the constant variable of radius to it. Example:
let vx= (radius * cos(a)) +250;
let vy= (radius *sin(a)) +250;
- Exercise also includes code for Translation and Mapping, which is greatly used in Exercise 1.4.
- In this exercise, we learned about translation, along with push() and pop().
- This fairly simple exercise required from us to display two rectangles which have the exact same measurements and use translate() to see how will each move slightly on the Canvas.
- Translate() specifies an amount to displace objects within the display window. It takes two parameters, x - for moving from left to right, and y - for moving up and down.
- In this Exercise, we learned how to use Lerp Color function provided by p5.
- Lerp Color function, lerpColor(), blends two colors to find a third color somewhere in between them. It takes three parameters: color1, color2 and amt.
- Amt parameter is the amount between the two values where 0.0 is equal to color1, 0.1 close to color1, 0.5 is in the middle, etc.
- Again for this exercise, we created Circle Wheel (Triangle fan), which we then later filled with colors we lerped using Lerp Color.
- In this Exercise, we were required to create our own Circle Wheel, based on previous Exercises we did for this module.
- For this Exercise, an if-else statement is created which is passing a mouseIsPressed parameter and drawGradient function. Statement will either display a triangle fan (circle wheel) or make it disappear.
- drawGradient function will change the color within the triangle fan in circular motion.
- In this Exercise, we started working on displaying various shapes (in this example circle in the middle of the canvas), which will lead us to work on learning how to create a pattern in further exercises.
- In this exercise, like in most of them, we are using variables that we used for creating Exercise 1.3 - Circle Wheel. numOfSegments, stepAngle, let radius.
- In function setup(), we created canvas, specified color and angle modes (In this exercise we worked in RADIANS).
- In function draw(), we used map function provided by p5 to map numOfSegments and radius values. Map function re-maps the number from one range to another. In example of radius in this exercise, map allowed us to increase or decrease radius as we move the mouse over canvas. If mouse key is closer to the center of the canvas, radius will be smaller, if its further away - radius will be greater.
- keyPressed function is added in this exercise again and it allows us to save a 'screenshot' of the Canvas if we press ctrl+S.
- In this Exercise, we learned how to use rotation (rotate()) function provided to us by P5 and Atan2 function.
- Rotation function, rotate(), rotates a shape by the amount that is specified by angle parameter. Angle mode is important for this function to work and we can use it in either RADIANS or DEGREES.
- Atan2 function, calculates the angle in radians from a specified point to the coordinate origin as measured from the positive point on x-axis.
- In this exercise, we also used dist() function which calculates the distance between two points, as well as map() function which re-maps number from one range to another.
- For this exercise, we worked with variables numOfSquares and squareSize - size of squares is determined by dividing the width of the Canvas, 500, with numOfSquares we want to display on it.
- A for loop was created which first looped throuhgh y-axis values (j) and then throuhg x-axis values (i) in order to draw shape across the Canvas.
- In this Exercise, we worked on displaying a random pattern, based on random() function provided to us by P5. We started by working with displaying random lines, but later finish product ended up being a display of two triangles filled with different colors - which later form a two-colored squares or one-colored squares displayed on the Canvas.
- Random() function takes either 0, 1 or 2 arguments.
If no argument is given, returns a random number from 0 up to (but not including) 1.
If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number.
If one argument is given and it is an array, returns a random element from that array.
If two arguments are given, returns a random number from the first argument up to (but not including) the second argument.
- For the purpose of this Exercise Challenge, and a few following Exercises, we have been asked to create a pattern of our choice.
- Pattern that was an inspiration to this Exercise is carpet Pattern from the film Shining by Stanley Kubrick.
- Pattern is consisted of number of different colored hexagons layed on top of one another.
- For creating a starting look of the pattern, four variables were created - numOfHex, hexSize, stepAngle and radius. Angle mode for this Exercise is set to DEGREES.
- In function draw(), nested for loop was created, to make sure hexagons are displaying across the canvas (6 of them, numOfHex determines hexagons and their shape).
- Inside function draw there is another for loop - put in between push() and pop() for creating hexagonal shape.
- The outcome of this starting code Exercise is the display of 6 hexagons across x-axis and y-axis, colored in orange with lerpColor().
- Images of the outcome and inspiration can be seen in the Images folder of this Exercise.
Week of 20th of October, 2020
- For the purpose of this Exercise Challenge, and a few following Exercises, we have been asked to create a pattern of our choice.
- Pattern that was an inspiration to this Exercise is carpet Pattern from the film Shining by Stanley Kubrick.
- Pattern is consisted of number of different colored hexagons layed on top of one another.
- V2 code is the continuing code for Excersise Challenge - Our Pattern.
- In V2, another hexagon was created to be displayed at the top of first one.
- Both hexagons were put into separate functions outside of function draw() which are called createHex() and createHex2(). Functions are called in draw function and correctly displayed.
- The outcome of this V2 is the display of 6 hexagons across x-axis and y-axis, which under the change of angleMode from DEGREES to RADIANS turned into a star-like shape.
- Images of the outcome and inspiration can be seen in the Images folder of this Exercise.
Week of 27th of October, 2020
- For the purpose of this Exercise Challenge, and a few following Exercises, we have been asked to create a pattern of our choice.
- Pattern that was an inspiration to this Exercise is carpet Pattern from the film Shining by Stanley Kubrick.
- Pattern is consisted of number of different colored hexagons layed on top of one another.
- V3 code is the continuing code for Excersise Challenge - Our Pattern and V2 of that code.
- In V3, another hexagon was created to be displayed at the top of first one.
- Both hexagons were put into separate functions outside of function draw() which are called createHex() and createHex2(). Functions are called in draw function and correctly displayed.
- The outcome of this V3 is the display of 6 hexagons across x-axis and y-axis, and at the top of them, another set of smaller red hexagons is displayed.
- Images of the outcome and inspiration can be seen in the Images folder of this Exercise.
Week of 28th of October, 2020
- For the purpose of this Exercise Challenge, and a few following Exercises, we have been asked to create a pattern of our choice.
- Pattern that was an inspiration to this Exercise is carpet Pattern from the film Shining by Stanley Kubrick.
- Pattern is consisted of number of different colored hexagons layed on top of one another.
- Final code is the continuing code for Excersise Challenge - Our Pattern, V2 and V3 of that code.
- In Final Version, another hexagon was created to be displayed at the top of first one, as well as two triangles that are added in between larger hexagons.
- Both hexagons were put into separate functions outside of function draw() which are called createHex() and createHex2() and createHex3(). Functions are called in draw function and correctly displayed.
- The outcome of this V3 is the display of 6 hexagons across x-axis and y-axis, and at the top of them, in between them two smaller triangles are displayed.
- Images of the outcome and inspiration can be seen in the Images folder of this Exercise..
- In first exercise of Term 2, we were required to write an algorithm which will make an ellipse move in 'random' directions on canvas.
- In this case, an ellipse is only moving either left or right on canvas. That is achieved by using it-statements which say that if variable direction is either -1 or 1, movement is either in left or right direction.
- This Exercise folder contains code that is addition to previous Random Agent Exercise.
- In this Exercise, we were required to make object move in 'random' direction (based on optionsX and optionsY provided).
- We were also required to allow object (an ellipse, which ended up creating a line with its movements) to appear on the other side of Canvas when it 'disappears' on the other.
- We also added keyReleased function which allows us to, by pressing certain keys on keyboard, display different circles which then end up displaying different formation of lines (large, small, bold...).
- This Exercise folder contains code that is similar to previous Random Agent Exercises but this time we worked on the random movement of circle.
- In this Exercise, we were required to make object move in 'random' direction (based on optionsX and optionsY provided). Basically to make circle bounce around the canvas at the random angle.
- We also had to use Sin and Cos, for moving circle randomly across the Canvas.
- This Exercise folder contains code that is similar to previous Random Agent Exercises but this time we worked on the random movement of circle.
- In this Exercise, we were required to make object move in 'random' direction (based on optionsX and optionsY provided). Basically to make circle bounce around the canvas at the random angle.
- We also had to use Sin and Cos, for moving circle randomly across the Canvas.
- In this exercise we worked with curveVertex() and vectors to display shape on the canvas.
- This exercise also required from us to use the array which would store all of the required points for the shape to be drawn onto.
- In this exercise, we started introducing the use of arrays.
- In this and for the future exercises, we will using arrays to record/save the points of the object that is being drawn on the canvas or has to be drawn on the canvas.
- For this exercise we also used vectors and translate function to create shape.
- In this exercise, we learned how to combine classes, arrays and methods in order to display numerous circles that are docking to each other.
- In this exercise, we learned how to combine classes, arrays and methods in order to display numerous circles that are packing to each other and with that they all filling up all the empty and blank spaces in between already created circles.
- For the purpose of this exercise, an array has been crated which has an intention to store the position of every circle created and displayed on the Canvas.
- Inside of the function draw (), there is a for loop which creates circles and pushes them into the array.
- There is also a generateCircles function, which is then continuously adding circles to the array and displaying them. Purpose of this function is also to see if circles are anywhere near each other (to detect their edge), to see if circle is already created in certain position and then display the circle.
- In this exercise, we learned how to work with letters and text.
- This exercise required from us to import libraries and fonts which will allow us to display letters on the screen.
- For certain for to work, we had to make sure that we are importing them in either .otf or .ttf form.
- In the function draw() then, we worked with beginShape() in order to generate the shape of letter and also while creating shapes, we imported fonts again.
- For the Final Project we have been required to create an example of Generative Agency.
- For this project, I have created a generative loop animation on the basis of Transformations, with the use of Sin and Cos.
- Loop is consisted of lines that generate to form the circle and move in and out of the centre of the canvas with the help of low frameCount(), polygons that are being generated at the outer end of each line and are also positioned to form a circle (they also rotate with the use of frameCount), and finally an ellipse which move in and out of the canvas (users view point).
- The speed of their movement increases as they approach the centre of the canvas where they rotate and then slowly start to disappear of the canvas. Initial idea for the project was to create a shape which would be created of only lines and circles that are strictly attached to the lines and move at the same pace as them.
- User would not have been able to control the movement of the object on the screen (object would move by itself, but in the Version 2 and Version 3 of this project the size of the object is increasing and decreasing based on the mouse movement of user.
- It worked in a way that once mouse is far away from the centre of the canvas, radius of the object would be greater), but user would have been able to control the change of colour of the object and colour would change every time when user moves the mouse over the canvas.
- The end result enables the colour change of the object, but only if users is pressing the mouse key on the canvas, otherwise colour would not be changing by itself.