Anna’s Portfolio







Processing is a programming language, development environment, and online community. On processing.org, you can download Processing for free, listen to interactive beginners tutorials and find many other learning resources.
So to get started I went to do the tutorial. Watch the slideshow video with some screenshots about my first tutorial below

During a lesson at the University we carried on practicing to code in Processing. I learned how to use variables, draw many different shapes, disable lines inside my code, change the speed of the object etc. We drew a square and made it change colours depending on the position of the mouse, made it bounce from the sides of the screen and change speed at random. I also added another square and made the first square to bounce from the sides of the second square. See my code on the right and the result below. Move your mouse inside the frame to see how the bouncing square changes its colour!


I really enjoyed coding though I found it quite difficult to do. So to practice I wrote several codes which you can find below. When I ran out of ideas I looked through sketches in the open source at OpenProcessing.org.

Frog
The idea of this sketch is when you move your mouse inside the screen up and down the frog follows you and changes size, when you move it left and right the pupil of the eyes move inside-outside. It was pretty much easy to implement the first part of the project. I drew the frog using ellipses, set the position depending on the position of the mouse and played with the multiplication of the size. The most difficult was the last bit. I had to draw a diagram and do some math to implement it


Finally I came up with this code

As a result I had this cute froggy (move your mouse inside the frame to see what it can do!)


Salary sketch
I also made a joke sketch which I call Salary sketch. The idea wasn’t mine, I’ve seen it once before. But I recreated it myself. So at the beginning you are asked a question and offered to choose between two buttons: Yes button and No button. The whole thing about this sketch is that the question you are asked makes you choose the No button and when you want to click it you cannot because it moves away from you.
Again same as with frog sketch it was easy to draw the objects, but it was a bit tricky to make the No button behave the way I wanted. So I used "if conditional statement" and mouseClicked() function:


This is an image of the whiteboard with my teacher's explanations of how to use "if statement" for my project.

Colourful circles
In this sketch I used “for” keyword to create "for loop" to increment the process of drawing the circles. It allowed me to have as many circles as I liked in just several lines of code. I put random fill for the circles so that they change colours at random.


Snake
Inspired by my previous sketch I decided to do moving flashing circle followed by its tail. From the first sight the project seemed pretty easy. But the code I came up with at the end turned out to be long. I had to use my teacher's help. The main problem I met was to make the tail. To remember and draw previous position of the moving circle we used PVector. While listening to my teacher’s explanations I realised how much more I would need to learn.