Typographic Processing Part 2

March 5, 2015 § Leave a comment

For the second half of the workshop we worked on generating fonts and slogans out of the fonts that ere created earlier in workshop week.

Step by step instructions for the second half of the workshop, that match the images, although they might not be helpful for others they are extremely helpful for me to remember, as it is a lot of information to process.


Image 1: We created a new working document. We created the set up again with the canvas created again.

Image 2: We then started working with ‘filing cabinets’ of a sort, so that we could place the whole font into that cabinet and access it using the shortcut, throughout the rest of the processing. It also made the letters easily accessible. We did this by also placing ‘String’ at the beginning of the command with a capital ‘S’

Image 3: This was the symbol for the cabinets we created- ‘[]’

Image 4: This particular code was used to make the generative font loop in a cycle so that it was continuously looped.

Image 5: The numbers decided how many times and for how long it loops. Its starts at zero- whilst at less than 26- and it will continue to then add 1 until it gets to 26 (so it completes the amount of letters in the alphabet) and it will continue through the draws of the cabinet for the letters auntie the end.

Image 6: This was the final coding for where we were so far with this coding. (AS A SIDENOTE- ALWAYS CLOSE BRACKETS!)

Image 7: We then added a ‘letterforms’ loop so that it made sure that it worked its way through the ‘draws’ for the letters. we then also added and ‘xpos’ and ‘ypos’

Image 8: We then added draws called ‘r’ and ‘rc’.

Image 9: (no step by step- blank)

Image 10: This was the layout for the coding at this stage.

Image 11: We need more memory for the coding to then produce what we were asking of it so we went to processing, and preferences.

Image 12: Then ticked ‘increase’ and updated the MB to 2000.

Image 13: The final code so far…

Image 14: We then went on to put spaces into the letterforms and generative texts produced.

Image 15: And added values for ‘xpos’ and ‘ypos’.Image 16:

Image 16: To create the spaces we added a delay at the end of the code.

Image 17: This was the code….

Image 18: And this is a screen capture of what was produced on the canvas.

Image 19: We then added messages/slogans into our commands of the procession to that it would start to tom words and sentences.

Image 20: These were the slogans/quotes that I either created myself or found online.

Image 21: This is how we made the slogans work with the code.

Image 22: This was the code so far, however there were problems with how the generative text generated my slogans and that there were no spaces so that needed to be fixed at some point.

Image 23: ‘founddat’ was created as storage for the letterfoms four for the slogans so that they re stored and remembered when generating the slogans.

Image 24: This was a screen capture of the code generating the font with now spaces.

Image 25: This was the final code that I had managed in the workshop…

Image 26: Which continued on for longer then I could capture in one screen shot- I also plan to continue on with my programming and complete this code so that my processing of the slogans plays smoothly and without a glitch.


I have continued this further after I stopped taking screen shots and it is now at a place where there are spaces in-between the words, however I still want to take it further and complete its so that my slogans/quotes come out exactly as I want them to.

I found the second half of this workshop a whole new level of challenging. I made the mistake of only half concentrating, whilst also trying to organise how I would blog what I was working on and thusly found it difficult to keep up and we started dealing with a lot more complex coding to try add in spacing and such, which was difficult in itself. I found this half much more challenging and less enjoyable because it was hard to understand everything that was going on. However I still enjoyed it to an extent because I like things that challenge your brain and that require a certain amount of focus, but as the workshop was coming to an end it was harder to concentrate and so it became more difficult to work.

Overall I still want to continue this project to completion and ant to play around with processing further in the future- although the workshop in November, where we were working with Arduino and programming lights was much more interesting to me and so something I will probably continue on in the future rather then the processing we did in this workshop today whilst working with generating fonts. I think that there is more that I would want to do with light programming, although that is not completely ruling out using the processing app in future.

I took videos on my phone throughout the day, which I will upload later.


Typographic Processing Part 1

March 5, 2015 § Leave a comment

Step by step instructions that match the images, although they might not be helpful for others they are extremely helpful for me to remember, as it is a lot of information to process.


Image 1: At the beginning of the workshop we started by setting up the processing app, which was the same way I had learned to set up the Arduino app.

Image 2: We then set up the canvas that we would be working with.

Image 3: We decided on the size and colour (white) and tested the software to see if it would read “hello” and if it would register ‘drawing’.

Image 4: We used this ‘//’ symbol to ‘comment out’ the text so that it was less relevant but that we knew what we were doing.

Image 5: We then introduced a test letter for our canvas.

Image 6: We put down the coordinates of where our test letter would be placed on our canvas.

Image 7: Then the detail of our coordinates.

Image 8: This is how the test letter was placed onto our canvas.

We created ‘shortcuts’ of a sort called ‘ypos’ for our ‘y’ value and the test letter. Image 9: The reason for this being that these shortcuts would also allow for decimal points in the value you wanted.

Image 10: This was where we placed these commands.

Image 11: This was how we initially accessed our font and the letter.

Image 12: This was how he set up looked overall.

Image 13: We then made the ‘xpos’ or an ‘x’ axis command as it were.

Image 14: Then we created the value for our ‘y’ and ‘x’ axis.

Image 15: We then replaced these values with their ‘shortcuts’ by using ‘ypos’ and ‘xpos’ to represent the value of the action/effect that we wanted.

Image 16: This was how it looked all together.

Image 17: We then advanced on.

Image 18: We made ypos duplicate continuously but it wasn’t quite far enough away and so it just dragged.

Image 19: We changed the value of ‘expos’ but it again just continued to drag.

Image 20: You then go to sketch, file and then OpenGL…

Image 21: And insert ‘OPENGL’ into the size and tis makes the duplication effect a lot smoother.

Image 22: However it still dragged.

Image 23: We then worked on fixing the drag and making the letter bounce.

Image 24: Once we had figured out the drag and the bounce we figured out how to affect the gravity and the physic behind the bounce being realistic.

Image 25: This was the ‘yspeed’ of the bounce.

Image 26: This was bounce for the ‘y’ axis.

Image 27: This was the overall set up of where I had professed so far with the processing of my letter.

Image 28: We created a ‘float’ for ‘x’ axis speed for the speed of the letter- just like we had created ‘floats’ for both the ‘y’ and ‘x’ axis.

Image 29: we then added a value for the ‘xspeed’.

Image 30: We repeated the process of ‘yspeed’ for the ‘xspeed’.

Image 31: This was how we made it bounce at the bottom for this axis.

Image 32: This was the set up for the commands.

Image 33: This is where I altered the ‘speed’.

This is what we completed in the first half of the day, apologies for any mistakes from my notes. However for the most of the workshop I found that it was fairly easy to follow and that I really enjoyed learn something new and interesting. It was challenging but really interesting and Spencer was a lot of help though the workshop, which made everything run fairly well, and he wasn’t working from a script- as has always been the case with everything that he teaches- which showed he really knew and understood what he is talking about. I found that this kind of work was quite engaging and it was a really nice feeling to work through it because it was like you accomplished something at the end that you really worked for.

Sara’s Fairytale Workshop

March 4, 2015 § Leave a comment

During workshop week I attended the Wednesday workshop with our tutor Sara in which we worked on a fairytale together as a group. At the beginning of the day we were briefed on what we were going to be producing and showed us examples of what she wanted us to produce at the end.

The first video we looked at was La queue de la souris —>

The second video we looked at was The Animation Sequence Project —>


The first video was to get a fell for the style of animation used in the video and how things are linked and the second video, whilst being an example of good practice and good animation, it was also the main idea of how we were going to connect our animations together. The idea was to use the square in the animation (either at the beginning, end or throughout the animation) and use that to connect so many different animation styles.

Screen Shot 2015-03-04 at 09.42.42

We were told to pick a piece of paper out of a bucket which would be the scene that we would then be working n during the day, each scene would be 10 seconds long and there would 31 scenes. Vladimir Propp a Russian theorist said the idea is that all fairytales can be broken down into 31 function, which was why there was 31 scenes for us to work with. there are basic set of characters involved such as the hero, princess, good guy and the bad guy.

Screen Shot 2015-03-04 at 09.42.55

The fairytale we worked on was to be a modern day fairytale and we were all given a scene and characters to work with. I picked at random scene 31, which was the wedding. I tried to keep the traditional look of a fairy tale whilst also bringing a modern twist where the princess turns out to be the main character- the hero -and not the prince. I created all of the images in the first half of the day in illustrator and then went on to create the final 10 second most ion graphics in the afternoon. I don’t think that my animations are ever really that consistent or that I have developed my own style ether and although that would be nice, I like that I am always trying something new and experimenting with my projects and with what I know on After Effects. Some could say that my projects are maybe a little ambitious, however for me it is more important to learn all that I can and gain all of the knowledge in After Effects that I can rather than to just get a good result by playing it safe ad be unhappy with it. There is no guarantee that playing it safe will produce a good result either.

This is the fist scene that I created in Illustrator. I then created a document with the After Effects measurements, and the placed the illustration in this document and re-sized the illustration. Then I created the princess but added a little twist in the animation that cannot be scene in this image, where the dress falls off to reveal a not so stereotypical princess underneath, however I do wish that I had made the dress white, because it was meant to be a wedding scene. I also created the thrown room for the end scene, which would not be seen at the beginning of the animation but would reveal itself, further on.

scene 2

The idea for changing my design^^

This is a link to the finished 10 second of my animation on Vimeo—>

Overall I really enjoyed working on the project and have found that I really enjoy illustrating fairytales and animating them afterwards, whether they are my own or whether the originally belong to someone else. I also just really enjoy working on motion graphics. For this project I considered changing aspects of the illustration, but I then decided that I liked it enough the way it is and I am much more interested in displaying the ideas and the concepts for now, however I may go back to this animation at a later date and update after I have learned more on After Effects.



Urban Typography- workshop 5

November 13, 2014 § Leave a comment

For the final workshop I did in the week we were sent out into Huddersfield to find decaying type. The idea was to go out in our groups and find different types of typography- like decay or metals and then create the alphabet when we got back. We all took our own photos and ten we selected the best ones within our own group and then when we had finalised our alphabet, we printed each letter onto A4 acetate and stuck them onto the huge studio windows so that they could be seen outside.

My group was a second year group but the first years also went around in groups and created there own alphabet using found letter and printing them onto acetate. This was what the first years managed to produce—>

Overall the Workshop  wasn’t necessarily that beneficial to my practice and I didn’t learn that much but it was fun and it was nice to take my mind off of uni briefs for the day and be able to work with others.

Thursday workshop week- Ice challenge

November 12, 2014 § Leave a comment

Originally I had signed up to the Matt Whitewood lecture for my elected workshop- ‘man vs. machine’. However I ended up going to an all day ice challenge, live competition brief. This was useful to my practice because when I am in the industry I will have to perform to short deadlines and so this was practice as to what it would be like. The main thing though is that it is something that I could put on my portfolio and talk about in great detail.The brief was to design a pendant light for a company called pacific ocean lifestyle. During the challenge we were given 4 hours to come up with design ideas, a final design, prices and materials, we also in our group produced a mock up model even thug that was not required. The groups we were put in were random, however I was lucky to have been in a group with mixed subject specialities. In my group there was an architect, an interior designer and an engineer alongside me. Overall we didn’t win the design challenge but the experience was beneficial, and they really liked our innovative design and model.

In this workshop I learned a lot about, not only how to work in a group but also to how other creative people from other disciplines worked through a problem. It was good practice to get used to group work because for our studio briefs we are not usually put into groups and I know that in industry we will have to collaborate with others on projects and be able to work and interact with clients. It was also nice to collaborate with people with different skills because it meant that more could be achieved during the challenge then might have otherwise been possible. This helped advance the project and created a better outcome and a new experience of interacting with people that you don’t see on a day to day basis.

Electric Display Gallery

November 12, 2014 § Leave a comment

This is a gallery compilation of all of the screen shots that i took during the workshop.

Electric Display- Workshop 3

November 12, 2014 § Leave a comment

This is my favourite workshop so far this week. It was really good and I loved learning about coding, and with the group being rather small it offered a lot more one on one time with the tutor, which happened to be our lecturer Spencer. I am really interested in coding and lighting effects. I also really like working with physical objects.

My notes…

Workshop 3- 12/11/14

Electric Display

Using a processing application called Arduino, we can control lights and motors and this massively expands how we might think about display.


  • A student called Andy Cassidy created an organic project, where he put together a large LED display and he used a laser pen to control the lights. He liked the idea of fluid forms and movements.
  • A student called Chris Layton is interested in robotics and he did some experimentation using robots to collect some QuickTime VPS (accelerated). It was a very elaborate project.
  • A student called Chris Kemm- status 2.0- themes from twitter- is interested in emotional content (scanning words/content), trying to create an ambient light that fed off of 3 emotions.

Using Arduino….

Using the Arduino circuit board- you need to know that it has no draw option because it has no screen but it has a loop option.


– Set up –

void set up (){


void loop (){


(The start^^)

  • You go to toolsà boardà select Arduinoà Arduino Uno
  • Go to tools serial portà select – /dev/tty.USDmodempa…(1211 or 131- different ports have different end numbers…- 131 + main port not keyboard for this specific computer)

Click the tick to verify…

  • Always remember to close brackets
  • Be careful about capital letters the download should have done nothing yet…

We then moved on to creating our own circuit

  • To flash one light…
  • In the set up routine we tell it….


void setup (){

pinMode(13, OUTPUT);


void loop(){

digitalWrite(13, HIGH);



digialWrite(13, LOW);



  • This tells pin 13 to output electricity
  • In loop we need to write an electrical signal to pin 13 so that it will flash…
    • On = HIGH
    • Off = LOW
  • To make it flash faster change the delay from 200 to 50 and to make it slower- change it from 200 to 500

IMG_0374  Screen Shot 2014-12-11 at 12.52.05


I will need…

  • Arduino circuit board
  • 9 LEDs- long end = anode – positive / short end = cathode – negative

  • Plug LED into 13 on the Arduino board
  • Put long end into 13
  • Short end into GND (negative) ^^

We then add breadboards and wires…

  • Advanced solderless breadboard
  • Has a set of coordinates on the board

} The breadboard coordinates are connected together horizontally- nothing is connected vertically

-The black line shows what is connected


IMG_0386 Screen Shot 2014-12-11 at 12.56.28


  • Now stick any wire into GND on the Arduino board
  • Then put the short leg of the LED in the slot next to that
  • And the long leg into B1
  • Take one more wire- put one end in A1
  • Put the other end in pin 13
  • In A-F everything is connected along these six points

To se up a sequence we add another LED….


IMG_0382 IMG_0388 IMG_0391


  • Add an extra pin mode for LED 12
  • Set up a void lop and make sure to add flashes so that they flash
  • And et it on a loop where it sends current and then stops and then it starts all over again

See diagram^



  • int del; //make a box called del to store the numbers
  • This will make the display speed up and slow down
  • Then we add the control…


  • To speed things up set del to 60
  • After pin 11- // lets speed things up a little bit
  • del=del–1; – (speeds up by subtracting)
  • del=del-1; //del equals whatever is currently minus 1


Speed control/ variable resister/ potentiometer

  • Face it so that it is pointing right….
  • One end of the wire connecting the resister to the Arduino board into 5V on the Arduino board
  • (Into V4- hole 1 on my breadboard)
  • Then add anther wire in sot 2 in V4 on my breadboard- to G3
  • Then add another wire from G7 to somewhere in V2 (breadboard) top line
  • Add another wire from G5 to A20
  • Then add another wire from B20- to A0 on the Arduino board


  • First leg in H3
  • Second in H5
  • Third in H7

We use the resister to read how much electricity is coming in and out, but we also want to be able to use the dial on the potentiometer to control del manually, instead of on the arduino processing app/site.

Remove speed control and replace t so that it can be done using the dial/resister

‘void loop….

“read sensor attached to analogue zero del = analogRead (0); // read how much electricity is flowing in A0”


Stage 1

OUTPUT 13, 12, 11, 10, 9, 8, 7, 6, 5

Void loop 13, 12, 11, 10, 9,

IMG_0409    IMG_0415

Void loop 8, 7, 6, 5,


New light display method

  • Int disp [9]
  • Void setup (){
  • For (int lop=0; lop<=8;lop=lop+10{
  • pinMode (13-lop, OUTPUT);
  • digitalWrite(13-lop, HIGH);


Then add…

  • int r=random (10);
  • if (r>5) disp [lop] =1;
  • if (r<6) disp [lop] =0;

  • void loop (){
  • for (int lop=0; lop<8;lop=lop+1){
  • if (disp[lop]==1) digitalWrite (13-lop, HIGH);
  • if (disp[lop]==0) digitalWrite (13-lop, LOW);


Int r=random(10);

If (r>5) disp[lop] =1;

If (r<6) disp[lop] =0;


Delay (50);



links to my vimeo —->

For me this workshop was beneficial because of the skills learned and because I had always enjoyed playing with electric display. However before this workshop i tended to work more with just physical forms of lighting and this workshop combined physical LEDs, which i had worked with before and was comfortable using and also learning computer based skills, which were challenging and completely new to me. It was good practice to learn something new instead of staying in my comfort zone and being stuck with the same work over and over. For me university is all about learning and the experiences gained and there shouldn’t be anything stopping us from learning skills that rant necessarily associated with graphic designers or animators. I really enjoyed the whole day even though it was very challenging and I appreciated required all of your attention, so that you could process everything being taught.

Where Am I?

You are currently browsing the workshop week category at Rebecca Boyes-Major Graphic Design Year 2.