As a class, we had an introduction to Processing -
Processing is a coding language similar to Java and the editor is open source so can be downloaded for free. In the first session, we were taught the basics of processing, for example, how to set up the canvas size, make shapes, and add text. The sketch below is what I started off doing when I was getting familiar with the code. I started by setting up the canvas size in 'void setup' and then changed the background colour to blue. Then I made two squares/rectangles and an ellipse with a fill and stroke of dark blue. In addition, I added a triangle with a fill and stroke of green and purple text saying 'Hello'. These all had to be positioned using x and y coordinates and given a size using pixels.
After the tutorial, I went on to the processing website and looked at example templates to see what other people have been making. I found the template shown in the image below where there are three different size stars rotating. I used this template as a basis and started off by changing the colours of the background and the stars. Additionally, I changed the size of the stars by changing the the coordinates - 'star(0, 0, 20, 60, 5)', and I added interactivity by allowing the smaller stars to be moved around with the mouse using the x and y axis - 'translate (mouseX, mouseY); translate(mouseY, mouseX);. The middle star rotates using the 'rotate' function and they are all created through using the 'pushMatrix' function.
In the next session, we were taught some more complex code involving adding interactivity and asking questions. We were led through the process of creating the sketch below. We set up the canvas size and made a new vector. Then we made a square/rectangle with any position x and any position y and a size of 20x20 pixels. Vector x is given the value of mouseX - position.x and vector y is given the value of mouseY - position.y so that the square follows the mouse. The distance is then magnetised so that the square follows the mouse at a slower speed. The square's x and y coordinates are added together with the vector coordinates in order for the square to move in any direction. We then asked an 'if' question to say if the square's distance is smaller than 100px then fill the shape with random colours but anything else then fill the shape with white.
From this tutorial, I went on to make the sketch below which allows a user to create a pattern using stars. I set the size of the canvas and then set the background colour to a darker grey to make it easier to see the star pattern. I then used an 'if' question to say that if the mouse is pressed then draw a star. The star is then created with a fill of bright yellow and a stroke of darker yellow, and the size is determined by the size of each of the vertices (this part of the code was borrowed from an example on the Processing website).
In addition, I made this sketch where the user can click anywhere on the screen to change the fill colour of the stars. After setting the canvas size, I added a background image and then set the x and y coordinates of the stars. I then made an 'if' question to say if the mouse is pressed then fill the stars with a random colour. Again the size of the stars are then determined by the size of each of the vertices.
Lastly, I made a sketch of a bouncy ball which doesn't go off the screen. I started by setting the location of the object and the speed and making the canvas size. I then changed the background colour to light green and set the ball to move according to its speed by adding the location and speed together for x and y coordinates.
Overall, I found that Processing is quite difficult to learn to use because there are so many different functions and attributes that you can use. Using vectors was challenging and generally trying to get things to work but as my first experience using code I found it interesting to see what it can be used for. My favourite sketch was the one named 'Stars' where I added a background image and made the stars change colour. To take this sketch further, I could have made the stroke randomly change colour as well as the fill and could have worked out how to get each individual star to change colour when the user clicks it. However, using Processing was a good experience especially as I had never heard about it before.