This workshop introduced us to the basics of coding using HTML and CSS, using a program called Brackets. I was familiar with this type of coding already, and had some past experience with it, but this first workshop allowed me to expand on the knowledge I already had. We created a basic web page, using CSS code from bootstrap.com, and wrote the HTML ourselves. We also integrated some java code, adding an interactive element to the web page, something I was not familiar with. Below is a screenshot of the code I wrote, and the outcome of the webpage.
I found programming with HTML much easier than when I began coding with Java, due to the fact that the code we were writing was not completely unfamiliar to me. However, I only have a very basic knowledge of it, and so I look forward to learning more and expanding that knowledge, allowing me to achieve much more with my code.
In the workshop today we were introduced to the basics of arrays. An array is essentially a group of values, in this case representing colours. We were set a task to produce code which would create a square, and when the square was clicked the colour would change to a random one within the array.
As we had to produce this code with no help, I found it more difficult than some of the things we’ve covered in past workshops. However, now that I know I can do it (eventually) it’s helping to grow my confidence in this type of programming.
The second processing workshop was based around variables and random commands. A variable is essentially the name given to a value, for example integer for whole numbers, boolean for true/false values, or string for a line of text. We were shown a basic way to integrate each of these variables into code, as shown in the screenshot below:
We were then shown the ‘random’ command which allows a number to be randomly generated depending on the boundaries set within the brackets. This can be used simply as a number generator, or can be used to generate a number corresponding to a colour, thus randomly generating the colour.
We were set a task to produce some code that would generate ten circles on our screen, which are random colours and sizes, and when clicked the screen clears and generates a new set of randomly coloured and sized circles. Using variables and the random function, as well as the code we learnt last week, we were given some time to work through this by ourselves.
I began by specifying that my variable was an integer named “numberOfCirlces”, and then set up the canvas by specifying the size and background colour I wanted. Using the draw function, which is called every frame to constantly loop what is in it, I created the circles I wanted drawn, using ‘random()’ to randomly select the sizes and colours. The ‘while’ function allowed me to limit the number of circles created to 10. The ‘clearStage’ function essentially redrew my background, and as the draw function is constantly running, my circles were redrawn.