In this exercise we are going to design a computer bug. Well…. not really – we are going to draw a bug with pencils and paper and then we are going to work out how we might represent the same bug as computer code.
You may have come this way via the ‘Ideation Dice Exercise’. If this is the case you have a story that describes the traits and attributes of you bug. Now we will take that story and the research we did with it and design a visual bug. We will later turn that Bug into code and draw it on screen.
This exercise is your first introduction to the concept of abstraction. You can read more about abstraction over here (link). Abstraction is the secret ingredient to good programming (and much more besides).
Drawing and Abstracting your Bug:
- Grab some grid paper.
If your using processing use this grid: plain
If your using the arduino and an OLED screen use this grid: multiwidth-5
- Have a look at this spark on Cartesian Grids and Coordinates (Link).
- If your working with processing draw a square that is 150 units long and 15o units wide.
If you are working with Arduino then you can draw a line from the 50 at the top of the page mark to the bottom of the page and work on the left hand side of the page following the same directions.
- Within that square draw your unique bug. If you’ve come from the Ideation Dice exercise then make sure the bug is based on the research you have done about other bugs and the story we have developed around the bugs attributed and traits.
… don’t worry if you not great at drawing – its just a plan for now – the process of abstracting (turning the character into digital form that we can draw on the computer) will have all sorts of cool effects so fancy drawing isn’t the aim. Make sure your creation/creature takes up the whole square.
- Now we are going to work on the process of abstraction (link). Have a good look at your creature/drawing. Computers are very very stupid. They follow instructions exactly and from top to bottom.
The best programmers are those able to break a complex process down into steps that will make sense to the machine and which provide us good foundations for developing more programs that use that process. Lets start by conform our drawing to the points on the grid and turning our creature into shapes that are easily drawn by a computer. What parts of your creature can be converted to a rectangle? a circle? a line? a triangle? What parts can be left out without effecting the character of your drawing?
- Start with the main shape of your character – probably the body – draw over the top of your original so that every line starts at a cross point in the grid (a point where X & Y lines cross).
- Do this for each of lines and shapes in your character/drawing, colouring in each section. Remember each line and point should be moved to the nearest line on on the grid.
- When you’ve finished you creature/drawing will look a little different.It might start to look a bit ‘8 bit’ – like space invaders or pacman, or minecraft.The process of abstraction always works this way. It always changes things and its good to think about what is lost in the process but also what is gained. You might benefit from copying you new bug onto a new grid – tidying things up and making sure all your shapes are based on points of the grid.Working creatively with machines -whether that machine is computer, or a musical instrument, or a cartesian grid – is always about using the way the machine changes things to our advantage and the only way to know this is about getting in and playing with the machine itself.
I have coloured-in my bug – but when we are abstracting for the little screen in the core kit that comes with the Arduino we will only be working in black and white – our primitives can only be drawn ‘filled’ or not.