Project 1 - Algorithms
Exercise 1 - Combined Version
Run Combined Code in-class Version
See code for Combined Code in-class Version
In this exercise, I combined my code from example 1.1.3 with Courtney Spisak's code from example 1.1.2. My code creates the grid of ellipses and the grid of squares. Courtney's code creates the moving square and the background changing color. I combined the code so that the my grid of ellipses gets drawn behind the square from Courtney's code, and then my grid of squares gets drawn in front of everything. In my code, I practiced using nested for loops to create the grid of ellipses and another set of nested for loops to create the grid of squares.
Exercise 1 - Final Version
Run Final Version Exercise 1
See code for Final Version Exercise 1
In the final version of Exercise 1, I practiced using nested for loops and if statements, basic color functions, global properties such as mouseX and mouseY. I used nested if statements to determine when and where different shapes are drawn on the canavas by the value of the mouse X and Y position. I also used nested for loops to create the grid of ellipses in flashing colors, and to create the line of ellipses that follow the mouse Y position. I used the height and width properties in the random function to generate numbers up to the height or width, and I used them in the conditions of some for loops to control how far the shapes should be drawn. I also used the random function to generate rgb values to input into the color functions fill() and stroke(). I used an overloaded version of the fill() and stroke() functions by passing an alpha value.
The 2 new drawing commands I learned and used in this exercise were quad() and arc(). I used quad() to draw diamond shapes and arc() to draw a shape that looks like the upper half of an oval. Learning how to use quad() was a bit of a challenge because I had to figure out where the next point of the shape should be relative to its other points for the diamond shape I was trying to make. I like how this exercise turned out because there are many shapes being drawn on the canvas at once with many flashing colors, yet there is still some control given to the user for what gets drawn based on the mouse position.
Excercise 2 - Grids
Run Exercise 2
See code for Exercise 2
In this exercise, I practiced using a grid based positioning system, external assets such as images & fonts, and mouse & keyboard events with built-in functions such as mousePressed() and keyPressed(). I used a grid-based positioning system to move an image based on A W S D key presses, captured by key event functions and key properties. I used a switch statement to make a selector between 3 different images (a turtle, dolphin, or a fish) using key presses. I also added a light purple tint on the images. I incorportated text with a custom font and allowed it to show up on the canvas at the mouse position using the mousePressed() function. I used global variables to keep track of counting states for the background colors and I reset them using if statements. I used toggle logic with key presses to have global variables alternate between true/false or toggle betweeen certain color values. For example, the border can be toggled between sqaures and diamonds, and the red value in the background color can be toggled between 20 and 255. Lastly, I used the && logical operator so that the large moving text only shows when both the mouse and any key are pressed.
I found the grid-based positioning system easy to work with in the code. I was able use control statements to keep the image within the canvas by checking if the next move would make the image go past the edge of the canvas. In the case that it would move off the canvas, I did not allow the key presses to affect the position of the image.
Project 1 - Algorithmic Brushes
Run Project 1
Code for Project 1
In this project, I used the paint template to create 4 custom drawing tools. My overall theme was flowers with a red/maroon, greyscale, and gold color scheme. I approached this assignment with the idea of wanting randomness in my algorithmic brushes while still giving control to the artist. I incorporated randomness into my brushes by creating them so that shapes are drawn at varying locations surrounding the mouse position and having variation in the shades of fill color.
What I found successful about this project is being able to give the user more ways to use the 5 brushes through change of color and size. I did this by allowing the color of each brush to be switched between greyscale and a red/maroon shade with a toggle key. I also allow the user to increase and decrease the size of the ocSpots, ocDiamonds, and eraser tools. What I like most about my color scheme is how the gold accent contrasts with the red and gives the drawings a pop of color. What I feel could be improved is adding another toggle key to switch to a different color, such as green or blue, so that the user can have more color options.
I have made a detailed and intricate art style with my brushes and my 12 drawings because of the thin stroke borders for the shapes. The subject matter that my drawing tool seems to be good for is flowers, especially because of the tool that creates lotus-like petals. The ocSpikes and ocSpots tools also seem to be good for drawing flower-like subjects because of the petal-like shapes that can be created with them. The ocDiamonds tool seems to be good for creating a geometric background for the subject, especially when the brush is increased to a large size.
Details about the tools:
ocPetals draws the petals of a lotus-like flower. This drawing tool uses the vertex and bezier vertex drawing commands to anchor the shape at the bottom of the canvas and have the tip of the petal follow the mouse position.
ocSpikes draws spikes that change its orientation depending on the location it is drawn on the canvas. The tip of the spike is orientented downward when drawn at the middle of the canvas and is oriented towards the middle of the canvas when drawn at the edge of the canvas. This tool also uses the vertex and bezier vertex drawing commands but it connects each spike to the last based on the previous mouse position.
ocSpots draws slightly transparent ellipses of varying width and height surrounding the mouse position within 50 pixels. The random number generated within 50 pixels is also used to alter the width and height of the ellipses. Its base size can be increased or decreased using the '+' or '-' keys.
ocStitch draws a line with stitch-like criss-crosses along it. This drawing tool uses the line function three times to draw a base line following the mouse position, the left-diagonal stitches, and the right-diagonal stitches. The stitches slightly vary in length based on a random number passed as a function argument.
ocDiamonds draws slightly transparent diamond shapes at random mouseY positions at the mouseX position. This drawing tool uses the quad() drawing function in a loop that controls how quickly the diamonds get repeatedly drawn. It can also be increased or decreased in size using the '+' or '-' keys.
img 3 
img 4 
