Processing Mind Map

For the work we did on the Independent Dorset poster I created a mind map  in Processing out of the notes I took in the seminar. The reason I did this is because I wanted to become more familiar with simple concepts in processing and programming in general. The mind map contains rectangles, lines and text. For each one I had to define the coordinates where I wanted the shape or text to be placed. It was useful because it made me think about functions and variables and how I could have saved time in defining each line and square. I came to the conclusion that using variables wouldn’t save much time as I would still have to add or subtract numbers to each one. Even if I had created a function I would still have to define the coordinates in the parameters. Maybe there is a way to do this but it is not something I am aware of.

I also explored the mouse hover effect and used this example on In the example it shows how to create a square and a circle, if you hover over the square the background changes colour and the same happens for the circle. I had to mess around with the code to make it suit my usage. I changed the size of the rectangle to fit in with my mind map and I got rid of the circle. Messing around with the code was valuable to me as I found it useful looking at somebody else’s code and changing things to see what happened. It helped me understand functions better and introduced me to the boolean variable which made me think about situations that boolean may be used.

If you hover over the “Dorset Independence” rectangle in the middle of the mind map, every rectangle changes colour. This is because each rectangle is assigned the same variable and the coordinates of the variable are set to the centre of the canvas, the result of this is that the rectangles change colour but only when you hover over the rectangle in the middle. What I wanted to do is make each rectangle change colour separately when hovered over. I’m trying to work out a way to do this where I don’t have to create a function for each rectangle as this is time consuming and would result in a lot of code.

Although this isn’t something which you would generally use processing for (it’s much less time consuming to use Microsoft word or Powerpoint or Photoshop) it wasn’t really the reason why I did it. I knew that it would take longer and I wouldn’t have even bothered to make the mind map had I not wanted to mess around with something on processing. It introduced me to new concepts and made me think “what will happen if I try this?” and that was useful to me.

This is the link to the original code I used –

This is a link to a live version of the mind map –


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s