Category Archives: Uncategorized

Unit 44 Website Design

Workshop 1

Screen Shot 2016-04-27 at 15.41.36

Screen Shot 2016-04-27 at 15.41.49

Screen Shot 2016-04-27 at 15.42.01

Screen Shot 2016-04-27 at 15.42.13

Screen Shot 2016-04-27 at 15.42.23

Screen Shot 2016-05-04 at 15.54.03

Screen Shot 2016-05-04 at 16.27.20

Screen Shot 2016-05-04 at 16.29.00

Screen Shot 2016-05-04 at 16.30.36

Research

Examples of Responsive Websites

Screen Shot 2016-05-17 at 13.10.02

Source Date: 17/05/16

This website is a collection of music a record label. Each selected song has an interactive element tied to it for example on one of the pages you have to make a tree grow to add different layers to the music. To launch the interactive experience the user has to hold down the space bar which makes music start to play in snippets, whilst showing various clips from music videos.

I can imagine this website is very resource intensive so it may not be very usable for those with slow internet speeds. Also the experience requires sound as a major part of the experience which excludes those without desktop speakers or headphones from partaking in the interaction.

Screen Shot 2016-05-17 at 13.24.26

Screen Shot 2016-05-17 at 13.24.41

Screen Shot 2016-05-17 at 13.24.54

Source Date: 17/05/16

In this website it has be split into three clear sections: mountain, road and triathlon. This makes the website extremely easy to navigate and makes it very user friendly. I like that the website is very visual seeing as the website has a high resolution background for each section of the website. There are also ways to find out more information for each section which are within buttons so they are hidden, this makes the home page of the website look very clean.

Screen Shot 2016-05-17 at 13.36.47

Screen Shot 2016-05-17 at 13.37.51

Screen Shot 2016-05-17 at 13.38.03

Source Date: 17/05/16

When you open this website the image at the beginning comes together from either side of the screen until they line up to make the full image. This makes the website catch your attention whilst looking slick and professional. Also as you scroll down the webpage images begin to appear.

However, I did have some problems when reducing the size of the webpage window, I noticed that some of the text moved to weird places and some of the images started overlapping.

Screen Shot 2016-05-17 at 14.15.01

Screen Shot 2016-05-17 at 14.15.29

Screen Shot 2016-05-17 at 14.15.51

Source Date: 17/05/16

This website is of someone’s blog/portfolio. It is very responsive (as shown in the pictures above) since the text resizes and rearranges when the browser size is changed. I also like the dark theme of this website since it won’t strain the users’ eyes. I like the simplicity of the website and that when the browser is set to the smallest size it brings up a navigation bar at the bottom of the page.

Screen Shot 2016-05-17 at 14.29.10

I decided to inspect the HTML of this website to see what was used to create this website. The website has made user of various divs to layout the page.

Proposal

 

Project Proposal

 

BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design (Interactive Media)

BTEC Level 3 BTEC Extended Diploma in Art and Design (Interactive Media)

 

Learner Name: Owen

 

 

 

 

Specialist Area: Interactive Design

 

 

Date:     24/05/16

 

Section 1

 

Working title: HTML5 Responsive Portfolio

 

 

Target Market

Employers and professionals looking to hire someone.

 

 

What you will work towards producing: (Detailed description of your proposal)

I will be working towards creating a responsive web portfolio using HTML5 and CSS.

 

 

 

 

 

Section 2

Influences, starting points and contextual references:

Other online portfolios by other artists in a similar field.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I have been looking at other professional portfolios for inspiration.

Section 3

Intended techniques, non digital and digital processes:

I will be using Brackets as my code editor and will probably be using Photoshop or Illustrator to create visuals for the website.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Research

Week 2: Ideas Generation and Ideas Development

Week 3: Ideas Generation and Ideas Development

Week 4: Produce Outcome

Week 5: Produce Outcome and Evaluate

 

Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will be evaluating my own work and will be asking for others opinions as part of my evaluation.

Ideas Generation

Screen Shot 2016-05-17 at 16.10.07

Screen Shot 2016-05-17 at 16.12.03

 

 

Here’s a basic example of a responsive website I made. The red square is 50 percent of the size of the browser so when the browser is changed the square changes size.

IMG_20160518_134517

IMG_20160518_134533

IMG_20160518_134559

Here are some ideas I have come up with for possible website designs. I like the idea of including some sort of parallax in my website because I feel that it makes the website stand out from other portfolios.

Here is the paper prototype for the web portfolio. After this test I feel I need to incorporate an about section in my portfolio to give some information about myself.

Ideas Development

Here is an example of a website with parallax I created by following a YouTube tutorial.

I added media query to the css so that when the browser has a width less than 500px it would turn light blue and a navigation bar would appear.

Screen Shot 2016-05-24 at 14.31.55

Here is the code used to make this happen.

Screen Shot 2016-05-24 at 14.38.37

I added in this piece of code which allows the navigation bar to be fixed to the top of the page whilst scrolling down the page.

Here is a rough draft of a website I will be creating.

1

2

4

3

I added a contact box at the bottom of the website. Here is the website at two different sizes. The three images represent three different section of the website, these will be able to be clicked on which will be linked to separate pages that go into more detail on the certain subject.

Screen Shot 2016-06-08 at 13.19.49

Screen Shot 2016-06-08 at 13.20.02

Screen Shot 2016-06-08 at 13.20.24

Screen Shot 2016-06-08 at 13.20.36

Here is the html/css code used to make the changes to the website.

Screen Shot 2016-06-08 at 13.28.46

Screen Shot 2016-06-08 at 13.29.03

Here is a demo of the draft website. I added hyperlinks to the images and made the images change when they have been hovered over.

Screen Shot 2016-06-13 at 16.09.07

Screen Shot 2016-06-13 at 16.12.02

Screen Shot 2016-06-13 at 16.12.31

I added a home button to all the web pages so that the user can go back to the home page easily. It also decreases the opacity of the button when it is being hovered over by the user.

I also added a minimum width and height for the three image links so that when the viewport becomes a certain size the images don’t get any smaller in size.

Produce Outcome

5

6

animated_background

I decided to create a tiled animated background for my website (I’m still not sure whether to keep this addition or not).

Screen Shot 2016-06-14 at 13.44.44

I decided to remove the animated background but I have started to add in pictures of my work for the links. I also added in my logo for the home button.

I have started working on the page for Illustrations. As the video shows I have made it so the images enlarge as they are hovered over. This feature makes a specific image easier to see.

Screen Shot 2016-06-14 at 15.33.26

Here is some of the css code used to create this grid. I still need to add more images to the grid to make it look more complete.

In this video I show how I have added some animations into the website and I also set the background to the same colour as the logo background.

Screen Shot 2016-06-14 at 17.06.08

Here is the html used to make the divs link to the desired YouTube video.

I have started working on the mobile layout of the website.

Screen Shot 2016-06-15 at 13.44.42

I have been using media queries to control when the images format themselves into a mobile friendly layout. This query activates when the width of the webpage is below 500px and the height is below 700px. I am trying to adjust the layout so that the images don’t overlap each other when the webpage changes size.

I have applied the mobile layout to the animation page so now that is also optimised for mobile use. I also make my code more organised by reducing the amount of repeated lines of code in the media query section. I realised that a lot of the lines of code are inherited by the original class so they didn’t need to be repeated if they didn’t need changing.

Screen Shot 2016-06-15 at 15.11.50

As you can see the code is far more concise than previously.

I decided to completely redesign the layout of the home page because I felt it had too much blank space. So I decided to make the main focus of the home page to be the three links that go to illustration, animation and 3D modelling (3D modelling is currently a work in progress. I also included a parallax effect to the images because I thought it looked professional and more interactive. I need to reposition the contact div so it is not obstructing the final link.

7

I decided to up date the contact box at the bottom of the page so that is the last thing you see on the page. I also changed the colour to a grey that is slightly darker than the grey in the background. I also added an image to the 3D modelling section.

8

I was noticing a significant amount of lag on the front page when resizing the page and this was due to the large animated gif in the animation section so I decided to replace it with a static image but when the image is hovered over it begins to animate. This has improved the performance of the home page significantly.

9

10

11

I felt the images were too small when the webpage was in the four columns format so I decided to add a new format that has three columns that goes in between the mobile view and the large webpage view. I feel this makes the images easier to view at different sizes. I created a new media query for a width below 1000px, that is when the three column format is activated.

I have now applied the three column format to all of my pages excluding the home page. I have also made sure none of the images overlap.

Screen Shot 2016-06-20 at 13.54.56

I have now setup the website so that it works when the webpage is full size on the screen. I fixed all possible ways of the websites images overlapping with each other so the website is more accessible at larger sizes.

Screen Shot 2016-06-20 at 15.21.55

I decided to change the layout of the title because it started to causing some overlap when the website was viewed in larger sizes, so I put all the title on one line instead of two.

Final Evaluation

Overall I think this project worked pretty well although some changes had to be made to the original design to make the website functional. Originally I wanted the website to have an interactive background which would allow the user to scroll up and down the page and the background would change as this happened. Instead I decided to make the front page of the website focus on my artwork instead of an interesting background because I felt displaying my work is far more important than showing off a gimmick.

As far as responsive design goes I feel I have achieved this successfully. Every page of my website can be viewed at a variety of sizes whether that be mobile size, tablet size or desktop size. I made sure I designed my website with the mobile platform as the main priority.

If I was to create this website again I would have made a custom made background instead of just a single colour. I would have also made this background interactive is some way. Also I would have worked out a more efficient way to add more content onto my website because I had to change every media query individually when new content was added to my webpage. I probably could have reduced the amount of coded needed if I used a responsive layout like Bootstrap but I lacked the knowledge to use it effectively.

Advertisements

Unit 63 Interactive Media Design

Research

Playable City Research

urbanimalsrabbit1

Urbanimals Source Date: 22/03/16

This is the winner of 2015 International Playable City Award. Here is a short description of the interactive experience.

Screen Shot 2016-03-22 at 13.38.06

Source Date: 22/03/16

While this experience was running I saw one of the pieces around Bristol which was the kangaroo jumping up and down some steps. It was created by a projector projecting an animation of a kangaroo onto the wall and only turned on at certain time at night.

Overall I think this experience worked well because it made me and other people stop and pay attention to their surroundings rather than go into “autopilot” and walk home or to work.

3-shadowing-farrowscreative

Shadowing Source Date: 22/03/16

This is the winner of Watershed’s 2014 Playable City Award. As people walked through the light their movements would be stored in the lampposts’ memory and then played back when someone else would walk past.

I also had first hand experience with this interactive experience. At first when walking through the light I though it was just a regular lamppost until I realised that there was a shadow there which wasn’t mine. This was a very interesting experience and lead to me walking back through the light several times to try and work out what was happening. I think this is what makes these playable city experiences so successful, the fact that you pay attention to something that you usually wouldn’t notice. This is something I will have to look into doing when design my playable city mobile game.

GPS Based Apps

10360900_903783446315341_1834353514159830165_n

GPS Tycoon Source Date: 22/03/16

The main mechanic of this game is buying virtual land to build up an empire and gain more money to buy more land. The only way you can buy land is by being in that area and having enough in-game currency so it requires the user to be in different areas to proceed in the app. This encourages people to be active and explore places they wouldn’t usually visit.

I’ve always liked the idea of tycoon games so this app seems fairly interesting and engaging to me.

Screenshot-from-2013-05-07-001521

Ingress Source Date: 22/03/16

I decided to try out the app “Ingress” because it related to the app I will be making for my final piece since it uses GPS tracking as a core mechanic of the game. From what I could tell when playing the game, the game consisted of going to areas and hacking into waypoints people have marked out. However, when playing this game I found it very difficult to understand and there was a lot of information to consume when first loading the app.

I do like the concept behind the app but it seems too complicated for someone who is new to playing games and it is not very intuitive to use.

Screen Shot 2016-03-23 at 12.59.29

Resources Game Source Date: 23/03/16

This game also relies on GPS tracking for the gameplay to work. This game looks fairly similar to GPS Tycoon but instead of buying property you have to build mines to gain money and resources. You can also steal other peoples’ resources if you are nearby.

I also find the concept quite interesting, however, I feel it would be hard for new players to start off in built up areas because there maybe a lot of more advanced players nearby which might make gameplay difficult.

Legal and Ethical Constraints

One of the main problems I may face when creating this mobile game would be privacy. One of the requirements of the brief is collecting data from those who have used the app so I will have to setup some sort of privacy policy. According to law, if your app collects data in any way, you should have a privacy policy that discloses what data is collected and how it is used. Privacy laws are even stricter under the Children’s Online Privacy Protection Act, or COPPA. This is a law that applies to apps that are likely to attract children under the age of 13 and that collect data from them. Some companies have faced serious financial penalties for failing to meet the COPPA requirements. So for my mobile game I may have to not collect data from those who are under the age of 13.

I will also have to include a terms of use agreement to go over the rules for how the app can and cannot be used, this will lower the possibility that someone can sue me if something bad happens while using the app.  In this terms of use agreement I will also have to go through possible health and safety risks, such as making sure the user doesn’t cross the road while using the app because this may lead to a dangerous situation.

I need to include a notification that lets the user know that their location is needed to make the app function correctly and let them disable it easily.

I will also need to make sure the app doesn’t discriminate against those who have disabilities. For example, if there was a waypoint on the map that couldn’t be accessed by those who have a wheelchair.

Possible Solutions for the Mobile Game

One of my possible ideas is a game that gives you a picture of a location but the image has be distorted in a certain way and you have to work out where that location is. You will be rewarded with points depending on the difficulty of the distortion applied to the image. I think I will be using the app creation website Actionbound to create the app to see if the idea is fun and if it is successful I will try making the app from scratch in another software.

Proposal

 

Project Proposal

 

BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design (Interactive Media)

BTEC Level 3 BTEC Extended Diploma in Art and Design (Interactive Media)

 

Learner Name: Owen

 

 

 

 

City of Bristol College

 

Specialist Area: Interactive Design

 

 

Date:     23/03/16

 

Section 1

 

Working title: Playable City Mobile Game

 

 

Target Market

Tourists, professionals who work in the interactive design in the city, students, teachers and others in education.

 

 

What you will work towards producing: (Detailed description of your proposal)

I will be making a playable city mobile game that will be played within the harbourside. The game will include GPS tracking and will be some sort of puzzle where you have to work out where a certain picture was taken.

 

 

 

 

 

Section 2

Influences, starting points and contextual references:

One of the starting points came from a previous app we all made as a class and that is where I got the idea to use Actionbound.

I was also influenced by other GPS based apps on the Google Play store such as Ingress.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I researched previous playable city experiences and popular GPS apps on the Google Play store

Section 3

Intended techniques, non digital and digital processes:

I will be using Photoshop and Illustrator to create the visuals for the app and I will be using Actionbound.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Research and Proposal

Week 2: Ideas Generation

Week 3: Ideas Development

Week 4: Produce Outcome

Week 5: Produce Outcome and Evaluation

Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will self evaluate my work and I will get critique from those who test out the app.

Ideas Generation

IMG_0006

This shows some possible ideas that I could include for my harbour side app.

IMG_0011

Here is a flow chart showing the basic structure of my app. I am not yet sure on how many questions there will so this is just an example for now.

Millennium Square 3

Here are three different distorted images of Millennium Square for different difficulties, however, on Actionbound I can’t find a way of adding the next image to trigger if the question is answered incorrectly. An alternative way of solving this would be having separate apps for each difficulty.

Millennium Square 2

Millennium Square 1

Queen Square 1

Queen Square 2

Queen Square 3

I feel these three images have a great distance of difficulty between them.

Ideas Development

Here is a test of the app for the millennium square location. For the final outcome I will be using my own pictures so these are just temporary ones for testing.

I managed to work out how to separate each of the difficulty settings. This is far more user friendly than the previous system and it means that the user doesn’t have to repeat the same task multiple times. It also allows the user to start on any difficulty and gives more freedom to the user.

SS Great Britain 1

Here are the three different images for the SS Great Britain in order of difficulty.

SS Great Britain 2

SS Great Britain 3

Here is a video play testing the easy mode on the app.

I noticed that players found the other modes easy once they had completed one of the modes because all of the modes use the same base pictures so I could add some more unique pictures to make the app more challenging.

Arnolfini 3

Here is one of the pictures I will be adding to the hard difficulty.

Arnolfini 1

Arnolfini 2

I decided to add different angles of the picture to add some more variation to the modes.

After some testing of the app, I feel it works a lot better with the pictures in a different order and some more difficulty and variation to the modes.

Screen Shot 2016-04-19 at 17.43.58

I added an optional GPS starting point to the app so it gives the user an idea of where they should be looking for these locations.

Produce Outcome

Instructions

To access the app you will need to download Actionbound (here are the links for Android and iOS)

Once you have downloaded Actionbound on your desired platform you will need to access the Actionbound QR code scanner and scan this QR code.

Screen Shot 2016-04-26 at 12.53.52

When you load up the app, it will lead you to this page which will take you through to this instruction page which will explain the game.

Screen Shot 2016-04-20 at 14.11.05

app location

difficulty

arnolfini

 

reward

Here is one of the questions from the easy mode.

Final Play Test

Promo Video

Final Evaluation

Overall I think the process of creating the app went fairly well. The Actionbound interface for creating apps was very easy and user friendly which allowed the me to create the app efficiently and effectively, however, there were certain limitations to the app. One of the limitations was that I couldn’t find a way to make a default slide for the app so I had to recreate the same slide multiple times. Also the GPS tracking wasn’t as accurate as I wanted it to be which led to some inconsistencies in the performance of the app. I’m not sure if this was due to the smartphones hardware or the app itself.

If I was to create this app again I would have tried adding more content to the app for example a larger variety of pictures used and filters applied to those pictures. If I had more time on this project I would have tried to attempt making this app from scratch, this would allow me to make the interface customisable and would allow me to add more detail to the application.

Results

Screen Shot 2016-04-26 at 17.49.09

Screen Shot 2016-04-26 at 17.49.21

Screen Shot 2016-04-26 at 17.49.29

Here are the results from all the tests of the app.

Unit 02 Materials, Techniques and Processes

Here’s is an animation on how to make an omelette.

Research

Here is the intro Casey Neistat uses before starting his questions and answers section of his vlog. I like the fast paced nature of this intro because a lot of intros you see on YouTube can sometimes be unnecessarily long. The intro also sets the scene very well in a concise manner.

In this video it starts off with a short introduction of who is being interviewed along with some other key information about the individual. I liked the graphics that were used in the introduction. They were very clean and looked professional.

Not all showreels have to be art or film related, this is a showreel of parkour. My only complaint about this is that there is a lot of similar clips which seems to make the showreel too long.

Screen Shot 2016-04-11 at 16.17.38

I think the banner for this tech YouTube channel looks good because it reflects the clean and high quality videos.

Screen Shot 2016-04-11 at 16.20.52

Here is another tech channel that has a similar style when it comes to a channel banner.

Screen Shot 2016-04-11 at 16.22.39

Here is a channel that mainly focuses on animation tutorials. The banner is filled with his own art which gives you a good idea of his style of art from just looking at his banner. When I do a channel banner I may consider adding in some of my own art to show what I am capable of at first glance at the channel.

Screen Shot 2016-04-11 at 16.34.03

Source Date: 11/04/16

Here is someone’s Artstation portfolio. Their banner shows a high resolution render of some of their work. This looks far better than if their banner was a very low resolution image. Below their banner shows small thumbnails of their work that can be clicked on to enlarge the image.

Produce Outcome

Production of YouTube Icon

IMG_0008

I started of with a few sketches of my initials as the logo. I started to like the formation of the logo where the letters were vertical so I decided to develop this.

Youtube Icon

Next I opened a 800px by 800px document in Adobe Illustrator. I began to mess around with the circle tool and rectangle tool until I created the basic shapes to form this icon. I made sure the shapes were centred correctly and aligned to the correct shapes. Next I filled in the colours for each shape and created a light grey background.

I think this process worked well for the logo because it is very minimalistic and stands out. It’s a good idea to keep an icon of this size simple because a lot of the detail will be lost when it is scaled down for use on a phone or tablet.

Screen Shot 2016-05-09 at 16.39.57

Here is what the finished icon looks like on YouTube on a desktop web browser.

Youtube Banner

Youtube

Process of 3D Printing

Here is a Vase I downloaded from here.

First I had to download the file from MyMiniFactory and then bring it to Simplify3D (my slicing program of choice). Once I had brought it into the program I had to make sure all the settings were set correctly. When I was sure I had my desired settings, I sliced the model which converts the model into hundreds of printable layers. After slicing the model, I made sure the printers build plate was clean and then I proceeded to print the model. I also made sure my webcam was setup to record the print as it was printing.

This process has helped me understand the different settings in Simplify3D and made me realise that printing with a bright coloured filament makes the model more visible when filming. Here is a previous time lapse that wasn’t very visible due to black filament.

If I was to create these time lapses again I would have found a way to attach the camera/webcam to the printers build plate for a smoother footage when sped up.

IMG_20160608_184148

For this process I recorded myself creating a 3D model of a sci-fi knife. The video shows how I created the model in the 3D modelling software called Maya. Once the model was completed I sliced the model and then sent the g-code to my 3D printer via usb. The print took about an hour to print but I had to downscale the model to fit the 15cm x 15cm x 15cm build volume. I also had to enable support material on the print to support certain parts of the model, however I had some difficulties removing the support material between the two blades of the knife as shown in the image below. I don’t think this would be a problem if the model was printed to full scale since the gap would be larger.

IMG_20160608_184947

Something I may need to consider when creating more 3D printed models would be making sure the support material can be removed easily. This would be achieved by leaving adequate space around areas that will need support. Also whilst removing the support material I snapped one of the bolts that connected the two blades together. To prevent this from happening I could strengthening weaker areas of the model.

Illustrator

For this project I wanted to mess around with the process of creating symmetrical artwork in Adobe Illustrator. I made the artwork symmetrical by making a pattern within a rectangle which was exactly half the width and half the height of the document. When the pattern was complete I selected it and then duplicated it and then mirrored each section correctly so the piece had two lines of symmetry.

I feel this process will be very useful when trying to make symmetrical images and is very efficient and easy at creating them.

Animation

Here is an example of tweening animation. This process is very effective for making animations quickly compared to stop frame animation because it creates in-between frames between to frames which means you don’t have to create each individual frame. However, sometimes this process can create some weird outcomes since the computer creates the quickest path between the two frames so you usually have to correct it’s mistakes which can be quite time consuming.

Here is an example of the stop frame animation. This process involves taking multiple pictures to make a scene look like it’s in motion. This process can be very time consuming because you have to take a lot of pictures to create an animation. For example to create 10 seconds of animation at 24 frames per second would require 240 pictures (or frames).

Web Design

Here is an example of the technique of scrolling parallax for web design. This technique can add more depth to a website and adds an interactive element to a website. This is example is also responsive so that it scales correctly to any scale.

Unit 04 Communication through Art and Design

Research

django-unchained-poster-federico-mancosu

Django Unchained Poster Source Date: 04/01/16

This is made up of very basic shapes and only contains a few colours. This makes the design look bold and it doesn’t flood the poster with too much information or detail. The image shows the hero “Django” freeing a slave by shooting his chains off.

gp4

Pulp Fiction Poster Source Date: 04/01/16

This poster has been given an effect to make it look damaged so that the poster looks older than it actually is. The image isn’t actually a scene from the movie but it is more of a concept and it fits well with the story. The gun signifies the violence and shooting in the film as there is a lot of that.

the-hateful-eight-poster

The Hateful Eight Source Date: 04/01/16

Taratino uses a lot of red in his movie posters, probably because his movies contain lots of blood and this is shown by the red in the posters. The eight lines of blood show the eight characters and the greyed out ones show the characters on the poster.

drive-movie-poster-international-01

Drive Poster Source Date: 11/01/16

This composition shows Ryan Gosling, the main character, in front of probably his car. The car seems like it has been photoshopped in some way and there has been some editing to the image in general.

98d3639b_rainbow-six-siege

Rainbow Six Siege Promotion Source Date: 04/01/16

This is a very dramatic composition and sums up the game successfully. The game consists of attackers (on the left) and defenders (on the right). There is a high level of contrast between the two sides of this picture so the picture is very easy to see because it only consists of black and white.

header

Just Cause 3 Promotional Poster Source Date: 04/01/16

This composition captures the action packed nature of the Just Cause 3 gameplay. It also shows the huge scale of the world in game, as you can see the island in the background.

Party-Hard-01 (1)

Party Hard Game Source Date: 11/01/16

This piece of concept art for the game “Party Hard”. This image shows the protagonist wearing the ice hockey mask he wears when he kills people in game.

HotlineMiami_Logo

Hotline Miami Concept Art Source Date: 11/01/16

This composition is very detailed and there is lots of action going on. The character in the centre holding the axe is the character you play as in-game. The image also shows key characters in “Hotline Miami” such as “Biker” (the character in the helmet to the left) and “The Girl” the character in Jacket’s arms.

newart

Nuclear Throne Concept Art Source Date: 11/01/16

This piece of concept art shows all of the playable characters of “Nuclear Throne”. At the start of the game the characters are gathered round a campfire so the embers in this picture represent the embers from the campfire.

ASHENS

Ashens Logo/Icon Source Date: 04/01/16

Like many icons on YouTube, the Ashens icon captures the key features of himself, them being his moustache/beard, his suit and his eyebrows. This also helps the icon being recognised when it has been reduced in size.

a4175300333_10

Death Grips “Guillotine (It Goes Yah)” Source Date: 04/01/16

This picture/screenshot from their music video has a lot of static and distortion added to this image which fits in with the music in the video. MC Ride (the guy in the picture) looks like he’s in immense pain which makes sense in context with the music.

mmfood

MF Doom “Mm Food” Source Date: 04/01/16

This image shows the character of MF Doom in cartoon style drawing/painting. He is shown eating food because all the tracks in the album are about food or are related to food in some way.

maxresdefault

Tyler the Creator “Wolf” Source Date: 04/01/16

This album artwork shows Tyler the Creator and a younger version of Tyler or one of his alter-ego’s in the background holding an inhaler.

3813bcd3d4accb7634eea23a2a7ab190.1000x1000x1

Kendrick Lamar “To Pimp A Butterfly” Source Date: 11/01/16

This is the album artwork from “To Pimp A Butterfly” which shows people taking over the White House and the man in a suit represents the government and those who are in charge.

GI-208-X_1500x300_1024x1024

Tycho “Awake (Deluxe Edition)” Source Date: 11/01/16

This is the album artwork for the album “Awake” by Tycho. The circle represents the sun as it rises or sets. The braille pattern at the bottom is the title of the album so it can be read by those who can’t see.

713WaG+JUDL._SL1500_

Jamie xx “In Colour” Source Date: 11/01/16

This album cover is very minimalistic. Jamie xx uses this rectangle in all of his album artwork and uses it kind of as his logo.

ethan2_1website

Hila Klein “Triggered” Source Date: 11/01/16

This piece depicts YouTube personality Ethan Klein in his signature “Triggered” pose, surrounded by some of his classic phrases such as “Gone Sexual”.

frank_2website

Hila Klein “Do It” Source Date: 11/01/16

This picture shows the struggles of running a YouTube channel and all of the hate comments large YouTubers receive on a daily basis.

82f7d670d17164d76fb34441434ca091

Noel Fielding “Crack Fox” Source Date: 11/01/16

This piece shows the “Crack Fox” from the “Mighty Boosh”. This looks like an early adaptation of the character but the main features are still noticeable.

11-advertising-campaign

Don’t Text and Drive Campaign Source Date: 18/01/16

This campaign shows a representation of what would happen if you text and drive by showing a guy getting punched in the face. The violence they describe is referring to car crashes.

Donate-a-barcode.-Feed-the-hungry-1

Donate a Barcode. Feed the Hungry Source Date: 18/01/16

This piece shows a barcode that is made to look like spaghetti on a fork. This represents that barcodes are seen as food and they are needed for the food banks.

Presentation

https://prezi.com/bsufgidgzkxn/leif-podhajsky/

Subvertising Research

27c4cad9ff503a7d42ffc5e2e55d2402

Source Date: 22/02/16

bwmurderking

Source Date: 22/02/16

58176abeb6ff45217704633d63b5a128

Source Date: 22/02/16

honesty-or-art-2

Source Date: 22/02/16

238222

Source Date: 22/02/16

Shift_Delete_KNike_Crime_1

Source Date: 22/02/16

tesco_lie

Source Date: 22/02/16

Proposal

For my subverting campaign I will be focusing on how large companies will copyright and patent generic terms or vague ideas so they can make large amounts from suing smaller companies or making them pay royalties for using their idea or concept. These larger companies usually have expensive lawyers and a massive legal team to support themselves in court.

I will probably be making a series of images or a comic strip or animation. I am currently undecided on which one of these I will choose.

Specific Research

These are possible images I could incorporate or take influence from in my final piece.

corporate-team

Source Date: 29/02/16

mean-lawyers

Source Date: 29/02/16

online-scheduling_lawyers-legal-advisors

Source Date: 29/02/16

shutterstock_85839559

Source Date: 29/02/16

Development of Idea

Screen Shot 2016-02-29 at 13.37.01

Here is the basic idea for my subvertising poster. I will experiment with different design choices to represent the main corporate figure.

Screen Shot 2016-02-29 at 13.54.02

I took inspiration from the “Mad Men” logo for this design. I decided to go for simple colours to show the faceless corporations.

Mad Men logo

Source Date: 07/03/16

Screen Shot 2016-02-29 at 14.32.15

I created a broken mesh for roughly half of the corporate figure and I feel this is a interesting look for the corporate figure and could be interpreted as a web of lies or something like that.

Screen Shot 2016-02-29 at 14.37.07

Screen Shot 2016-03-07 at 13.02.56

Screen Shot 2016-03-07 at 13.43.57

I am not sure if i should include three silhouettes or just one. I feel it may take away from the focus of the image if there are multiple figures looking towards the corporate figure.

Screen Shot 2016-03-07 at 13.46.07

I feel this works better for the composition and fits in with the minimalist feel of the piece. The corporate figure represents the large companies that put pressure on smaller companies and put them out of business. The size of the corporate figure also represents the scale of these businesses compared to the small ones. The mesh/web could be portrayed as a web of lies from these big corporations.

Judge with gavel

Source Date: 07/03/16

Screen Shot 2016-03-07 at 14.33.25

Screen Shot 2016-03-07 at 14.43.31

This was created by using the pen tool in Adobe Illustrator. I used this tool because its effective at creating smooth lines and outlines rather than using the line tool like in the last composition.

Screen Shot 2016-03-14 at 13.07.47

I decided to add some highlights to the judge’s hammer, however, I feel they disrupt the focus of the composition so I think I will remove them.

Screen Shot 2016-03-14 at 13.43.44

I decided to get rid of the highlights on the hammer and instead add some shading on to the judge’s robe.

Screen Shot 2016-03-14 at 13.56.22

I think the level of detail I’ve added to the robe looks good and I am impressed with how it has turned out.

Screen Shot 2016-03-14 at 14.30.31

For my final piece I decided to go with a text based composition. The text is made up of loads of user icons. These icons represent all of the faceless figures behind businesses.

Screen Shot 2016-03-16 at 15.53.59

Screen Shot 2016-03-16 at 16.00.09

Screen Shot 2016-03-16 at 16.05.43

I think that the first version of this is the most effective and least obstructive to the overall message of the piece.

Screen Shot 2016-03-16 at 15.53.59

Final Outcome

 

Corporate Figure1

Judge

Business

Self Evaluation

Overall I think this trio of pieces worked well. I aimed to use a different style in each one of them and I feel I achieved that successfully. I also believe I have conveyed the meaning behind each image successfully. If I was to repeat this task again I would have explored these techniques in more detail, I would have gone for a more complex or detailed piece instead of three simple graphics.

Rebranding the Seven Deadly Sins

Research

The “Seven Deadly Sins” are Pride, Envy, Wrath, Gluttony, Lust, Sloth and Greed.

7deadlysins

Source Date: 21/03/16

Here is a representation of the seven deadly sins but use characters from the game “The Binding of Isaac”.

cffc0264f0ad0238b28b684816438737

Source Date: 21/03/16

In this composition they use different faces to represent the different sins. They look like they are trying to look like gargoyles.

8553182680_cbb2a0988a

Source Date: 21/03/16

This image shows the different sins as objects that relate to the sin. For example, the pillow for sloth is used because pillows can represent sleep and laziness.

30339_2_1200px

Source Date: 21/03/16

This piece depicts the devil acting out all of the deadly sins. I like the cartoon/comic strip style of this piece because it adds humour to the composition.

Seven-Deadly-Sins

Source Date: 21/03/16

This is a collection models that have been created to represent the seven deadly sins. I have noticed when looking at most of these pieces that a lot of the characters that represent the sins look ugly or grotesque.

Pride
Screen Shot 2016-03-21 at 14.08.15

Source Date: 21/03/16

Pride

Source Date: 21/03/16

Pride is the excessive belief in one’s own ability. Pride is also known as Vanity.

Envy

Screen Shot 2016-03-21 at 14.03.32

Source Date: 21/03/16

67_expanded_gallery3

Source Date: 21/03/16

Envy is the desire for others’ traits, status, abilities, or situation.

Wrath

wrath

Source Date: 10/04/16

Wrath or anger is manifested in the individual who spurns love and opts instead for fury.

Lust

download

Source Date: 10/04/16

Lust is an inordinate craving for the pleasures of the body.

Gluttony

hqdefault

Source Date: 10/04/16

Gluttony is an inordinate desire to consume more than one requires.

Sloth

Print

Source Date: 10/04/16

Sloth is the avoidance of physical or spiritual work.

Greed

greed_is_sin

Source Date: 10/04/16

Greed is the desire for material wealth or gain, ignoring the realm of the spiritual.

Proposal

For this brief the task is to redesign or rebrand the seven deadly sins. I will be rebranding all of seven of these sins and then focusing on the development of one of them. My chosen sin for development is Gluttony. For this development of gluttony I’m thinking about making some sort of collection of food or video compilation of people eating food. Another idea is that I could make a couple illustrations displaying gluttony.

For the rest of the sins I think I will make an illustration each. I think it will be a symbolic or simple illustration and I will probably use Illustrator to create these images.

My target audience for this project will be for teenagers to adults. I will achieve this by adding humour to my pieces yet keeping them simple and easy to understand.

Ideas Generation

Sloth

IMG_0005

For sloth I decided to theme it around sleep and laziness. Here are a few sketches I put together of some basic ideas and concepts.

Screen Shot 2016-04-11 at 14.33.45

Here is the process of constructing this composition.

Screen Shot 2016-04-11 at 14.33.59

Screen Shot 2016-04-11 at 14.34.15

Screen Shot 2016-04-11 at 14.34.29

I decided to add the “Z’s” to the people lying down to make it more obvious that they are sleeping.

Greed

£10 note

Source Date: 18/4/16

For greed I think I will be editing the £10 note to make the queen look evil to represent how greed changes people.

Screen Shot 2016-04-18 at 13.33.49

This picture shows the process of recreating the £10 note. I think for all my seven sins I will be using only circles to create my compositions.

Screen Shot 2016-04-18 at 14.03.10

Here is the head of the queen finished.

Screen Shot 2016-04-18 at 14.29.57

Here is the £10 note so far.

Screen Shot 2016-04-18 at 14.38.45

I decided to add text to the note to make it more clear that the sin was greed.

Wrath

For this sin I think I will be incorporating an eye in the design to convey the anger tied to the sin.

Eyes

Here are some quick sketches of a few eyes I could use as a draft. Like the previous pieces I will be using the same technique where I only use perfect circles to create the desired design.

Eyes 2

First I started off by creating the basic shape of the eye with three circles.

Eyes 3

I then made two lines underneath the eyes to add some character to the eye.

Eyes 4

Next I started creating the flames for the fire in the pupil of the eye.

Eyes 5

Next I positioned and scaled the flames so that they fit in the centre of the eye.

Eye Complete

Finally I added colour to all the elements and masked of the flames so that they fit within the eye.

Pride

When thinking of pride I thought of the idea of having loads of motivational quotes so I decided to create a page of text repeating the sentence “I am proud of myself”.

Screen Shot 2016-04-25 at 13.57.04

Screen Shot 2016-04-25 at 14.08.28

I then created an generic happy face to represent what you become when pride takes over.

Pride

I then cropped the picture to a smaller size to remove more of the blank space in the composition.

Envy

Businesspeople holding piggybanks.

For envy I think I will be creating something like this where it shows someone being envious of someone else’s possessions.

IMG_0007

Here is a basic sketch of what I was thinking of creating for envy.

Screen Shot 2016-05-09 at 14.03.21

For this piece the green character represents envy since green is the colour that is related to the sin envy. The green character has a lack of money and is envious of the other character. I managed to keep the theme of my compositions which is only using circles to create the piece.

Lust

Skull_illustration_by_yungtyrant

For lust I have desired the dangerous side of the sin so I will be using this skull as a template for my design. I will be making this skull out of hearts in Illustrator.

Screen Shot 2016-05-16 at 13.35.49

First I created the basic heart shape using circles and then I proceeded to cover the skull in them. I had to do this all by hand to make sure they were randomly placed around the skull.

Screen Shot 2016-05-16 at 13.52.57

Screen Shot 2016-05-16 at 13.59.57

Screen Shot 2016-05-16 at 14.23.40

Once the skull was covered I changed the hearts to a bright red colour and then put the skull image over the hearts and lowered the opacity to 50% and proceeded to put eye drop the colours onto each individual heart.

Screen Shot 2016-05-16 at 14.40.30

Screen Shot 2016-05-16 at 14.48.35

Screen Shot 2016-05-16 at 15.23.33

Screen Shot 2016-05-16 at 15.40.51

Screen Shot 2016-05-16 at 15.53.27

Screen Shot 2016-05-16 at 16.05.03

Screen Shot 2016-05-16 at 16.42.01

Once I had finished the entire skull I took the image into Photoshop and increased the saturation.

Lust2

Gluttony

For the finally sin that I was picked to develop, gluttony, I decided to do more than just create a short film showing the different sides of the sin. I wanted to show how a simple thing, this being eating, can turn into something that consumes your life and I wanted to also show the grotesque nature of gluttony.

Below is my storyboard for the gluttony video.

IMG_20160606_131327

IMG_20160606_131352

IMG_20160606_131408

IMG_20160606_131419

IMG_0009

I wanted to start of the short in a creative way whilst showing a title. Instead of just adding in a title through digital mediums, I wanted to create the title out of food. I used the snack Twiglets to create the word gluttony as seen in the picture above.

IMG_0010

Here is the selection of food used for filming before the shoot.

IMG_0011

And here is what the food looked like after the shoot.

Whilst editing this short film I decided to add music that was very bouncy and upbeat to contrast the dark themes behind the film. The music choice also contrast quite well with the ending of the short and I decreased the speed of the music at the end to show that everything was falling apart.

I decided not to include many transitions such as cross fades because I felt they are over used in videos and they seem too cliché. Instead for the majority of cuts were left untouched and unedited because I didn’t want to distract from the theme of the composition.

Seven Deadly Sins Evaluation

Overall I think this project went fairly well. I feel my rule where I could I only use circles to create six of the sins (obviously this didn’t apply to the gluttony film) and I felt it added a nice challenge to the task. Being limited to only using circles made a lot of my art seem very symbolic and simple which was the effect I was striving for, so I am glad that worked out as planned. I also stuck to my goal of completing one sin each week after I had completed the research, so I know that I organised my time effectively and efficiently.

I feel I have targeted my specific audience well since I added humour into some of my pieces of my work yet kept the overall message simple.

As for my video about gluttony, I feel that went well and I executed the filming as planned with few retakes of shots. If I was to do the video again I would have found away of recording the sound as the shot was being filmed. This would have allowed me to add sound effects to the film. However, I was unable to this because I didn’t have a portable microphone available and the camera microphone was very poor quality and didn’t pick up much audio so I decided to mute all the audio and add a soundtrack instead.

Unit 57 Human Computer Interfaces for Computer Games

Workshop 2

Screen Shot 2015-12-01 at 14.21.26

We started by listing the steps of brushing our teeth to make it easier when working out pseudocode.

Screen Shot 2015-12-01 at 14.24.56

Here is the pseudocode for brushing your teeth.

Screen Shot 2015-12-01 at 14.42.13

Here’s the pseudocode for a 3D cup drawing

Here is the final code and the result of the code.

DSC00085DSC00086

For this task we had to follow a YouTube tutorial to make a button, or in are case a make shift switch out of 2 wires, change something on Processing. This task was fairly complicated but the tutorial made it a lot easier to understand since we just had to copy and paste most of the code.

Screen Shot 2015-12-02 at 15.24.32

Here is the Processing code.

Screen Shot 2015-12-02 at 15.24.48

Here is the Arduino code.

Screen Shot 2015-12-02 at 15.23.54

Here is Processing when the button isn’t activated.

Screen Shot 2015-12-02 at 15.24.03

Here is Processing when the button is activated.

Research

Different ways to Interact with Games
Joysticks

414X2Z0A7TL._SY355_

Source Date: 05/01/16

Joysticks were one of the first ways to interact with games when they were first being created apart from keyboard and mouse. The joystick allows for more precise movements and doesn’t rely on a binary form of input. Now joysticks/flight sticks are used for flight simulators because you can move the more advanced models in three different axis which allows a lot of control for these games.

Joystick

Source Date: 05/01/16

Here is how a basic two axis joystick works.

Gesture Control

Orientation

Source Date: 05/01/15

Gesture control is when a camera or webcam is used to to motion track your gestures to input a command. This hit the mainstream market when the Xbox Kinect was released and made it easy for the average person to access motion tracking and allowed you to play games with this technology.

Voice Commands/Recognition

gty_siri_iphone_jef_111202_wg1

Source Date: 05/01/16

Voice recognition is when a microphone picks up your voice and then are recognised by the device and then used to do a function on the device depending on what command you have said. This became more frequently used with new technologies such as Siri for iPhone.

Touch Screen

ipad2110322125540

Source Date: 05/01/16

Touch screen technology has revolutionised the way we use devices today. Almost every phone that is released in the last couple of years has included a touch screen of some sort. Touch screen allows users to control their device with either their finger tips or a stylus. This makes the users experience intuitive and easy to learn.

Keyboards

keyboardjb

Source Date: 05/01/16

The keyboard was the first input used for computers. It is ideal for submitting text and performing complex tasks on the computer. The inputs on all the buttons are either on or off but keys can be used in combination with each other to make more complex actions.

FaceRig

review-facerig

Here is a video I made that shows how FaceRig works.

The camera or webcam detects your face and places white dots on your key features of your face such as the outline of your face, your nose and the mouth. It also targets your eyes and marks them with a red dot. The dots update position every time the position of your face moves. These dots are then mapped to the virtual character and you are then able to control the character with your movements.

Proposal

 

Project Proposal

 

BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design ( Interactive Media)

 

Learner Name: Owen

 

 

 

 

 

Specialist Area: Interactive Design

 

 

Date:     20/01/16

 

Section 1

 

Working title:

Joystick

 

 

 

What you will work towards producing: (Detailed description of your proposal)

I will be creating a joystick that will control a game in Processing.

 

 

 

 

Section 2

Influences, starting points and contextual references:

I was influenced by previous joystick design such as those used for the very first games and flight sticks that are used for flight simulators.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I looked into how a basic joystick works and the electronics involved to make one work.

Section 3

Intended techniques, non digitial and digital processes:

I will be making my joystick out of wood and will be using an Arduino to control it.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Research

Week 2: Generate ideas and develop prototypes

Week 3: Produce outcome

Week 4: Produce outcome and evaluate

 

Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will self evaluate my work and I will let others critique my work.

Ideas Generation

Joystick Idea

DSC00108

Here is a drawing for a basic joystick design. I also need to find a way of adding resistance to the joystick.

DSC00106DSC00107

Here is a basic cardboard prototype of a joystick.

Basic-Joystick

This gif shows four directions of movement on the joystick.

DSC00114

I added cork on the end of the joystick so it’s easier to hold and becomes more ergonomic.

DSC00115

I added four direction arrows to show the directions of the joystick.

Interactive-Joystick

Here is a gif showing how the joystick will control the player on screen using paper.

Colours for Direction Arrows

Here is a variety of different colours that could be used for the colours of the arrows. I feel that the brighter colours on the top row would work best for the arrows because they have a high level of contrast compared to the lighter versions and darker versions.

Ideas Development

DSC00157

Here is the plan for 3D designing the parts needed to make the joystick.

Top Surface

Here is the top panel of the joystick box.

Assembly Box

Here is how the box will assemble.

Inside Part

Here is the part that will go inside the joystick box.

Inside Box

Here is what the bottom of the box looks like with the part inserted.

Box with RodBox with Rod2

Here is the box with the rod for the joystick.

Assembled Joystick 1

Here is the assembled joystick.

Assembled Joystick 2

I decided to increase the size of the ball on top on the joystick. I feel this will make the joystick easier to control and more ergonomic.

The only problem I have at the moment is that I don’t know how I will support the joystick and allow it to move freely while keeping it in the same place because at the moment the joystick is just floating.

 

Produce Outcome

DSC00156

Here is the basic system for each player movement in Processing. When the two wires are not connected the Arduino sends the value “0” to Processing which changes nothing on the software. When the wires are connected the Arduino sends a “1” to Processing and then this can be used to activate a function, in my case this will be used to move the character in one direction. I will make the Arduino send different numbers to Processing for different directions.

DSC04095

Here are the six pieces of wood that are used to make the box of my joystick. The four squares on the right are the sides of the box, the woodgrain piece on the top left is the lid of the box and the piece below is the internal piece. The lid will have a hole drilled in the centre so that the joystick can be placed through it, however, I have not decided on the size of the joystick yet. Also I need to think of a way to hold the joystick in place and create a pivot point in the lid. I could either use a rubber grommet or I could use some sort of two axis gyroscope/gimble. I also need to create a square shape in the internal piece of wood.

DSC04096

I have arranged these pieces of wood in this way so that all the pieces of wood can be the same size and it saves time when cutting them out.

DSC04097

DSC04098

I am currently undecided on the height of the internal piece because I need to know the length of the joystick first.

DSC04099

DSC04100

I decided to get a larger breadboard so I have more space to work with.

IMG_0016

Here is the keyboard I have decided to take apart so I can salvage the button/keys for my project.

IMG_0017

IMG_0018

I realised if i was going to just use the buttons I would have to remove the circuit and the plastic casing to hold the circuit.

IMG_0019

I removed the piece of plastic from the keyboard and then attached it to the buttons below the keyboard. I then plugged in the keyboard to the computer and it performed like it did before. Now I need to work out how to use these keyboard switches in my joystick. If I go ahead with this method I won’t need to use an Arduino since I can just use keyboard inputs instead.

IMG_0020

I improved the Arduino movement system so that it can control three way movement in Processing.

IMG_0021

I added the final direction to my movement system, however I have a problem. This problem is that some of the directions move faster than others which is odd because all of the values for the speed of the movement are the same, plus there is some latency with the movement.

Screen Shot 2016-01-26 at 16.04.12

I managed to fix the problem of lag by reducing the amount delay between each loop on the Arduino. This means the Arduino updates 20 times a second approximately. Also this fixed the speeds of the movement.

Screen Shot 2016-01-26 at 16.15.31

Here is the movement code from Processing. I feel I need to make the “game” more interesting because at the moment it is just a rectangle moving in four directions.

After some more testing it seems that the with delay set to 50 it seems very unreliable so I set it back to 100.

I have tried adapting my basic controls and applying it to other games I have found on the website OpenProcessing.com. The first game I tried was a version of Snake.

Screen Shot 2016-01-27 at 15.09.46

This wasn’t very successful because the game required quick responses and there was a large amount of lag between touching the wires together and the snake actually responding. I decided to try out a slower paced game which was Frogger because I think it would be easier to control.

Screen Shot 2016-01-27 at 14.36.37

In this game you have to control the frog and make it cross the roads safely. This was much easier to control so I think I will go for this when demonstrating my joystick.

IMG_0028

I managed to get four buttons which I will use for my joystick, instead of connecting two wires together.

 

IMG_0030

I threaded the copper wire through the holes in the button.

IMG_0033

Then I soldered the wires to the buttons so they would stay connected. I also soldered the white wire with the breadboard pins so I could easily connect the buttons to the breadboard without soldering.

IMG_0031

Next I tested out if the button worked with the Arduino and it worked successfully so i repeated the process for the rest of the buttons.

IMG_0034

After fixing all four buttons to the Arduino I tested them all together and they all worked successfully.

However, I found that the contact points that I soldered were very weak and were prone to snapping frequently. So I had to solder them again.

IMG_0035

I found the centre of the vertical line of each side of the box when it was assembled. I had to offset it slightly due to the construction of the box.

IMG_0036

IMG_0037

I then managed to fit the buttons into the holes drilled into the wood and they were a perfect fit.

IMG_0038

IMG_0039

Here is what the box looks like with all of the buttons together.

IMG_0041

When moving around the soldered wires, I noticed they had all snapped off due to a mixture of my soldering skills and the wire being too thin and brittle. So I decided to get some new tools to get a better result.

IMG_0044

I got a new soldering iron because the previous one wouldn’t reach a high enough temperature to melt the solder consistently.

IMG_0043

I also got these new wire strippers that removed the wire casing effectively and quickly which increased the speed of this task significantly.

IMG_0042

Here are all the successfully soldered wires and buttons.

IMG_0046

I tried insulating some of the wires but it wasn’t successful so I decided to leave this.

IMG_0047

IMG_0048

These are the triangle that will support the box in the corners and will direct the joystick into place. Below is the process of constructing the box.

IMG_0050

IMG_0049

IMG_0052

IMG_0053

IMG_0054

IMG_0055

Here is the box.

Here is a video I captured of the prototype working. I used a piece of PVC pipe as the joystick and use my hand to hold it in position. I think this worked fairly well and displayed my idea successfully although there were a few technical difficulties when setting it up for presentation but they were solved quickly by just running the program on my computer.

Final Evaluation

Overall I feel this project went well although I definitely found it a lot harder than the previous projects. I made sure my base idea was actually achievable because it would mean I would actually have something to show and if I finished early I could improve on my idea rather than having something unfinished or not working.

If I was to do this task again I would have definitely finished the aesthetics of the box by finishing the lid and making a support to hold the joystick. I would have also made the joystick more ergonomic. Some other small details I would have changed would have been making the cable management more organised, this would have including insulating all of the soldered connections and maybe wrapping up all of the cables into one neat cable. Another idea was to have more 360 degrees of directional movement, this would be achieved my using variable resistors to measure how much the joystick has been moved. This would have created a far smoother experience and would have been more intuitive to use.

The final product worked well although it has room for improvements so if I had more time I would continue working to refine this piece.

Link

Research

Minimalism
harran-ii-1967

Frank Stella “Harran II” 1967 Source Date: 28/09/15

I feel this piece of art have a very strong, bold geometric structure which makes the image very eye catching. Frank Stella has used a lot of bright bold colours to capture the sharp and crisp lines in this piece. He has also used lots of white space in this image which makes it look minimalistic. The use of overlapping is quite strong and quite a defining feature of this piece as the squares overlap the circles and some of the circles overlap some of the other shapes. Stella’s work is very bold and dynamic with many of his pieces involving repetitive patterns or shapes.

This type of art is called Minimalism which is a style of art that involves the use of very minimal shapes and very simple lines. Minimalism arose in the 1950s and has been popular ever since.

The composition of “Harran II” is very structured and defined. It uses space in a very interesting way since almost half of the canvas is blank which in my opinion draws more of the focus onto the shapes in the centre of the canvas.

voice-of-fire-man

Barnett Newman “Voice of Fire” 1967 Source Date: 28/09/15

This piece is far more simplistic than “Harran II” since it only consists of two different colours and a single strip of red going down the centre. There is also a very high level of contrast in this image because the colours red and blue are complete opposites on the colour spectrum.

Lots of Barnett’s work involves one or two vertical lines going down the canvas in some sort of way which creates a very iconic piece of artwork and gives his work a very defining feature.

tumblr_lnbkmotcJP1qhunzko1_500

Carl Andre “144 Graphite Silence” 2005 Source Date: 29/09/15

Carl Andre does lots of work using bricks and arranges them in interesting ways. In this piece he has arranged them in to a large square shape with even spaces between all of the individual cubes. This gives a sense of order and symmetry in the composition. There are many patterns that can be seen in this some what simple design because of the shadows of the cubes meet up in interesting ways.

This is minimalism because it only involves one type of shape and the design is very simplistic.

This piece is a very good example of use of perspective because it seems as if the cubes get smaller and closer together the further they go back compared to the cubes in the foreground.

Cubism

Georges_Braque,_1909,_Port_en_Normandie_(Little_Harbor_in_Normandy),_81.1_x_80.5_cm_(32_x_31.7_in),_The_Art_Institute_of_Chicago

Georges Braque “Port en Normandie” 1909 Source Date: 29/09/15

Cubism is an movement in the early 20th century in which perspective with a single viewpoint was abandoned and use was made of simple geometric shapes and interlocking planes.

Braque uses a lot of geometric shapes in this piece to make more complex shapes while still keeping the image slightly obscured. I feel he has done a good job on this composition since he has made the port look very abstract and obtuse yet you are still able to make out what the image is. The sharp edges of the water show the waves are very rough.

PabloPicasso-Girl-with-Mandolin-Fanny-Tellier-1910

Pablo Picasso “Girl with a Mandolin” 1910 Source Date: 05/10/15

Picasso is known more for his work in Post Impressionism however he has made a few pieces in the Cubism movement, this is one of those pieces. You can see in this image that many different points of perspective have been used and combined to make the structure of the girl with a mandolin. The range of colours used in this piece are very similar to those in other works of Cubism, yellows, greys and black for example.

I like the style of Cubism and this piece in particular because the composition looks almost broken down or de-constructed. This gives the image a very abstract view on the human form.

bottles-and-knife-1912

Juan Gris “Bottles and Knife” 1912 Source Date: 05/10/15

This piece is an interesting take of a still life but in the Cubism style. The composition almost looks like it has been sliced up and offset slightly which may be intentional seeing as the image is called “Bottles and Knife”. Like the other two examples of Cubism, this piece also a similar colour scheme. This composition has also got multiple perspective like Picasso’s piece.

Pop Art

andy-warhol-campbells-soup-i-1968

Andy Warhol “Campbell’s Soup Cans” 1962 Source Date 05/10/15

Pop Art is an art movement that emerged in the mid-1950s in Britain and in the late 1950s in the United States. It presented a challenge to traditions of fine art by including images from popular culture such as advertising and news.

“Campbell’s Soup Cans” was an iconic piece in the Pop Art movement. It uses bright contrasting colours, solid lines and bold text to make a eye catching image. I like this piece of pop art because it very eye catching and uses negative space well to centre the image and make the audience’s view go straight to the product. Warhol uses prints to create these solid colours and lines.

three-flags

Jasper Johns “Three Flags” 1958 Source Date: 05/10/15

 In this piece takes an iconic image, the flag of the United States of America and puts them inside each other. This is an example of progressive rhythm which draws you attention into the centre of the piece. Unlike Warhol’s work Jasper has painted the three flags instead of screen printing them. Although the lines aren’t as strong as Warhol’s work, it is still an example of Pop Art.

40-4044-DH6LF00Z

Roy Lichtenstein “In the Car” 1963 Source Date: 05/10/15

This piece looks rather like something out of a comic book but it still has a Pop Art style with its bold colours and solid lines. It also has horizontal lines coming of the people to show there is some motion in the picture as they are driving in the car. Lots of curved lines are used to show the strands of hair but Roy has not used too many which would make it look realistic so he has kept to the comic style of Pop Art.

Art Deco

Lamp

Louis Comfort Tiffany “Lamp” Source Date: 05/11/15

This piece is very interesting because it is in the form of a lamp unlike most of the other pieces of art I have researched which have been paintings or sculptures. It looks like the lamp contains lots of different shaped petals made from stained glass. Each of these segments of glass have been surrounded by lead to connect them to each other which creates a black border around each segment, this is a recurring theme in art deco.

 Art Deco is an influential visual arts design style that first appeared in France just before World War I and began to spread internationally in the 1920s to 1940s before its popularity fell after World War II.

mack rose glass

Charles Rennie Mackintosh “Stained Glass Window from The Hill House” Source Date: 05/11/15

 This piece like the first is also stained glass much like most pieces of art deco work. This piece incorporates a lot of flowing and curved lines to create the composition. The background is a very pale colour which adds great contrast with the rose and makes it stand out more in the composition.

4hoffmannpurkersdorfchair

Josef Hoffmann Source Date: 05/11/15

Josef’s work is very different to the previous two because it isn’t focused on stained glass, his work is focused more around chairs. This chair has a perfect line of symmetry down the centre. The chair also includes some geometric shapes such as circles. The red seat cushion has great contrast with the rest of the chair and this makes the feature very eye catching.

 Post-Impressionism

image

Vincent Van Gogh “Starry Night” 1889 Source Date: 16/11/15

This is an iconic piece in the Post-Impressionism movement by Vincent Van Gogh. He has created surreal flowing patterns in the sky to signify how the clouds are blown in the wind. In a lot of his work he uses lots of bright colours and this is a key feature in the movement. Van Gogh has used light and lighting a lot in this piece as you can clearly see some sort of aura coming from the stars and the moon.

Post-Impressionism includes a wide range of distinct artistic styles that all share the common motivation of responding to the Impressionist movement. The key ideas include symbolic and higher personal meanings, dominant structure, order and the optical effects of colour and abstract form and pattern.

A_Sunday_on_La_Grande_Jatte,_Georges_Seurat,_1884

Georges Seurat “A Sunday Afternoon on the Island of La Grande Jatte” 1886 Source Date:16/11/15

This picture is very different to Van Gogh’s but it is still part of the Post-Impressionism movement. This picture almost looks like its has slightly been digitally blurred but it is merely the technique used to paint it. This composition includes a lot of bright colours and smooth lines. This is one of the similarities with the first piece. I’m not such a fan of this piece because I feel it looks a bit plain and there are too many points of focus.

Paul-Cezanne-Painting-006

Paul Cézanne Source Date: 16/11/15

I feel this piece is rather basic compared to the previous two but that may have been a design choice so I’m not sure if it’s fair to judge it in that way. The colours are smudged together so you can barely make out the difference between each piece of scenery, however, I do like the look of the mountain or hill in the background because there is a lot of contrast between that and the rest of the painting.

 Futurism

Umberto_Boccioni_-_Charge_of_the_Lancers

Umberto Boccioni “Charge of the Lancers” 1915 Source Date: 17/11/15

This piece is part of the Futurism movement. This composition shows men riding horses with lances into battle. The main themes of Futurism are power and speed. The horses represent power and force in the image and the speed is shown by the dust being kicked up from the ground. The legs of the horses almost look as if they are trying to be animated but this picture is from an era before modern animation.

Futurism is an Italian avant-garde art movement that took speed, technology and modernity as its inspiration, Futurism portrayed the dynamic character of 20th century life, glorified war and the machine age, and favoured the growth of Fascism.

dynamism-of-a-dog-on-a-leash-1912

Giacomo Balla “Dynamism of a Dog on a Leash” 1912 Source Date: 17/11/15

This composition is more based around speed. As you can see all the moving parts of the dog and the dog walker are blurred and look like they are part of a walk or run cycle. The blurring on these limbs give the impression that the dog is moving at high speed. Dogs are usually symbolised as powerful animals so the dog could signify power in the composition.

German Expressionism

BarlachFirstDayx1RS

Ernst Barlach “The First Day” 1922 Source Date: 23/11/15

In this image it shows the creation of light with the man in the composition being God. Barlach was known to be mystic so Christianity and God were common themes in his work. This style of woodcut looks very similar to line art except there are large areas that have been shaded solid black.

German Expressionism refers to a number of creative movements beginning in Germany before the First World War that reached a peak in Berlin during the 1920s.

CABINET_DES_DR_CALIGARI_01

Still form the 1920 film “The Cabinet of Dr Caligari” Source Date: 23/11/15

This still from a film almost looks as if it has also taken inspiration from Surrealism with it’s slanted buildings and unrealistic lights. Like the first image this is also grayscale which is expected since colour film had not been invented in the 1920s. I like the look this still because it is very intriguing and odd, for example the way the light hits the ground in an almost star like pattern.

CRI_117341

Käthe Kollwitz “The Parents” 1923 Source Date: 23/11/15

This composition shows the struggle parents had to face after losing their loved ones in the First World War. Kollwitz was moved after seeing some of Ernst Barlach’s woodcuts so decided to make some of her own depicting the tragedies of the War. The very rough nature of the lines in the woodcut help express the sorrow going through these two figures.

Constructivism

6a00e5506d89ca8834011570e70026970b-800wi

Vladimir Mayakovsky “Agitprop Poster Titled: Want it? Join” Source Date: 23/11/15

The text in the poster reads “1. You want to overcome cold? 2. You want to overcome hunger? 3. You want to eat? 4. You want to drink? Hasten to join shock brigades of exemplary labor!” An Agitprop poster is a form of propaganda used in 1920s Russia. They have used the colour red because red signifies Communism, also red is a very eye catching colour so it would attract attention to passers by when they saw the poster.

Constructivism was an artistic and architectural philosophy that originated in Russia beginning in 1919 and was a rejection of the idea of autonomous art. The art was mainly used for Communist propaganda.

tumblr_lxt2wsEUJy1qlef4ro1_1280

El Lissitzky “Beat the Whites with a Red Wedge” 1919 Source Date:23/11/15

This was one of Lissitzky’s first attempts at propaganda art. The white circle represents the anti-Communist White Army and the red wedge represents the Red Army piercing their defences. I like the level on contrast between the colours of this composition since the red, white and black have a lot of contrast between each other. I also like the symbolism in the piece.

Tatlin's_Tower_maket_1919_year

Vladimir Tatlin “Monument to the Third International” 1920 Source Date:23/11/15

This tower also known as “Tatlin Tower” was Vladimir Tatlin’s most famous work. It was going to be the central hub for functional conference spaces and a propaganda centre for the Communist party. This tower symbolized industry, technology and the machine age in Russia.

Conceptual Art

1

Joseph Beuys “Fat Chair” 1985 Source Date: 26/11/15

This is Beuys piece called “Fat Chair” given the name because the is a large wedge of animal fat on the chair. The animal fat is supposed to represent human life since humans are made up of a lot of fat. I feel this is an interesting depiction on human life because it is only representing us as a compound we are made of and has not been sculpted in any way to look like a human. I also like that this composition would change over time as the fat been to decay which means people viewed a different art piece every time the viewed it.

Conceptual art or Conceptualism is art in which the concepts or ideas involved in the work take precedence over traditional aesthetic and material concerns.

be041f8834d65955400cb76a8e2071f8

Sol Lewitt “Standing Open Structure Black” 1964 Source Date: 26/11/15

This piece of work reminds me a lot of the art movement Minimalism since the piece isn’t that complex and has very basic lines and form. I like the very bold nature of the beams in this sculpture and it looks like it would be a very rigid object.

3I01565

Joseph Beuys “Homogenous Infiltration for Grand Piano” 1966 Source Date: 26/11/15

In this piece Joseph has wrapped a grand piano in grey felt. This felt is supposed to be some sort of bandage for the piano which makes it seem like the piano needs some kind of aid or help. The felt mutes the sound of the piano so it makes a completely different sound and this is supposed to make it less grand.

Surrealism

the-persistence-of-memory-1931

Salvador Dali “The Persistance of Memory” 1931 Source Date: 26/11/15

This is one of the most iconic pieces of art in the Surrealism movement. The clocks in the image depict mortality and how time is slowly melting away. Salvador Dali also had a fascination with ants and flies to signify decay of life. I like this picture because it is very peculiar and the meaning can be different for lots of different people.

Surrealism is a cultural movement that began in the early 1920s and is best know for its visual artworks and writings. The aim was to resolve the previously contradictory conditions of dream and reality.”

The_Elephant_Celebes

Max Ernst “Celebes” 1921 Source Date: 26/11/15

The object in the centre is some sort of mechanical elephant-like being. This elephant thing was based on a photograph of a Sudanese bin for storing corn. I don’t really understand what the composition represents but I still find it interesting to look at, for example, why is there a headless women in the foreground. This picture has a very surreal feel to it because it is an imaginary and dream inspired image.

the-farm-1922

Joan Miro “The Farm” 1921 Source Date: 26/11/15

In this composition there elements from different movements such as Cubism and Primitivism. This is painting of the farm that Joan lived on for most of his life and spent 9 months painting. I like the deep orange and red colours in this painting which almost give it an Aboriginal feel to it.

Young British Artists (YBA)

DHS76_771_0

Damien Hurst “The Physical Impossibility of Death in the Mind of Someone Living” 1991 Source Date: 27/11/15

This is one of the most well known pieces of art in the Young British Artists movement by Britain’s wealthiest artist, Damien Hurst. The sculpture is a tiger shark that is suspended in a formaldehyde solution. This piece shows that we don’t understand death until we are dead ourselves. I like this composition because it is very bold and striking.

 The Young British Artists movement is the name given to a loose group of visual artists who began to exhibit together in London in 1988. Many of the artists graduated from the BA Fine Art course at Goldsmiths, in the late 1980s.

sarah_lucas_inst

Sarah Lucas “Au Naturel” 1994 Source Date: 27/11/15

I believe this piece represents a man and a women lying in bed together with their genitalia represented as objects. The title “Au Naturel” implies that this is just the bare bones of gender by just showing the genitals of the body. I find the way Sarah has depicted relationships is quite humorous.

Mausoleum Under Construction 1992 by Rachel Whiteread born 1963

Rachel Whiteread “Mausoleum Under Construction” 1992 Source Date: 27/11/15

This piece is fairly different compared to the previous two, it isn’t as interesting or as striking as the others, it just seems eerily empty. There is a good amount of symmetry in this composition but there isn’t very much contrast. I don’t really like this image because I feel it’s a bit boring.

Dada

66.1801

Francis Picabia “Portrait de Mistinguett” 1907 Source Date: 27/11/15

The range of colours used in this piece are mainly beige and white and a few places of vibrant colour like the hat for example. I don’t find this painting very interesting because it just looks like a women wearing a hat and I can’t seem to work out any deeper meaning to the painting.

Dada was an artistic and literary movement that began in 1916 in Zurich, Switzerland. It was a reaction to World War I, and the nationalism and rationalism which many thought had brought war about.

Fountain 1917, replica 1964 by Marcel Duchamp 1887-1968

Marcel Duchamp “Fountain” 1917 Source Date: 27/11/15

This piece was one of the most influential artworks of the 20th century. Although it is just a ceramic urinal on its side, it was actually just an elaborate prank poking fun at American avant-garde art. I find this funny because it just goes to show that anything can be art.

Violin d'Ingres

Man Ray “Le Violin d’Ingres (The Violin of Ingres)” 1924 Source Date: 27/11/15

This is an interesting piece depicting a women’s body as a violin as the curves of her back follow those of a violin. This picture almost looks as if the F-holes have been Photoshopped in but they have actually been painted on.

The History of Interactive Design

https://prezi.com/ktisp2oimooq/the-history-of-interactive-design/#

What is the Visual Future of Interactive Design?

Interactive Artwork

Scott Snibbe

Scott_Snibbe_at_Media_Lab_2009

Scott Snibbe Source Date: 12/06/16

“Scott Snibbe is a pioneer in interactive art, interactive music, digital video, and gestural user interfaces.” (Scott Snibbe – Interactive art, 2016)

Boundary Functions (1998)

tripolar_1

Boundary Functions Source Date: 12/06/16

Personal space is considered to be an imaginary concept but Snibbe wanted to make to express it visually. “By projecting the diagram, the invisible relationships between individuals and the space between them become visible and dynamic.” (Scott Snibbe – Interactive art, 2016). Snibbe’s creation could be considered a blank slate when the platform is empty but it requires human interaction for the artwork to come to life. Two people need to be standing on the square at once for the line to appear between them. “In this way Boundary Functions is a reversal of the lonely self-reflection of virtual reality, or the frustration of virtual communities: here is a virtual space that can only exist with more than one person, in physical space.” (Scott Snibbe – Interactive art, 2016).

Blow Up (2005)

download

Blow Up Source Date: 12/01/16

Blow Up is a piece that scales up a breath into the small fans and projects that breath via the larger fans in the room. With this piece Snibbe wanted to discover what separates a breath from the rest of the air, “Yet what distinguishes ”my breath“ from mere air and, further, what distinguishes my breath from me?” (Scott Snibbe – Interactive art, 2016).

In Scott’s work he seems to take a simple interaction, whether that be a breath or just a step, and then manipulates it to create some thing else whilst keeping the process very simple and easy to understand visually. He also seems to use the principle of cause and effect in his pieces.

rAndom International
Rain Room

Rain Room is an environment of falling water through which it is possible to walk, trusting that a path can be navigated, without being drenched in the process.” (International, 2016).

I’m starting to see some trends in the way most interactive art installations are created, they seem to be fairly dull or lifeless without human interaction but when people interact with them they seem to come to life and react with the user. This could be something I consider using when making my interactive piece. I really like the idea of this installation because it takes the concept of rain and reverses it.

Mirrors

The aims of this installation was to redefine the meaning behind the word “pixel”, as the artist says “‘Mirrors” aims to re-interpret the meaning of the word ‘pixel’.  Rather than taking the form of a tight grid, typical  for  the flat, orderly display of information, each individual ‘pixel’ has been given the distinct freedom and ability to move around in a three dimensional space, at its own discretion.” (International, 2016). When I first looked at this piece I thought the mirrors moved in a motion similar to that of a wave or flowing water and that the mirrors represent the reflection of that surface.

What It Isn’t

What-It-Isnt-work-4

What It Isn’t, 2014 Source Date: 19/06/16

This installation is a set of hanging vibration motors that are triggered by the users movement that makes the entire installation rattle. The artist says that “Sound is one of our most effective ways of sending and processing signals. By generating sound in response to movement What It Isn’t generates life around viewers.” (International, 2016). This shows that interactive art doesn’t always have to be visual but instead it could rely on one of the different senses such as sound, touch or even smell (I’m not too sure how I would apply smell to my piece but it could be something I consider).

References
  1. Scott Snibbe – Interactive art. (2016). Bio. [online] Available at: http://www.snibbe.com/bio/ [Accessed 12 Jun. 2016].
  2. Scott Snibbe – Interactive art. (2016). Digital Art. [online] Available at: http://www.snibbe.com/digital-art#/projects/interactive/boundaryfunctions/ [Accessed 12 Jun. 2016].
  3. Scott Snibbe – Interactive art. (2016). Digital Art. [online] Available at: http://www.snibbe.com/digital-art#/projects/interactive/blowup/ [Accessed 12 Jun. 2016].
  4. International, r. (2016). Random International » Rain Room. [online] Random-international.com. Available at: http://random-international.com/work/rainroom/ [Accessed 19 Jun. 2016].
  5. International, r. (2016). Random International » Mirrors. [online] Random-international.com. Available at: http://random-international.com/work/mirrors/ [Accessed 19 Jun. 2016].
  6. International, r. (2016). Random International » What It Isn’t. [online] Random-international.com. Available at: http://random-international.com/work/what-it-isnt/ [Accessed 19 Jun. 2016].

Proposal

For this brief I think I will be making some sort of drawing experience probably using the software Processing because I have a decent amount of knowledge in using the the software.

Producing Outcome

So I started working on my idea for a drawing experience.

1

After a few prompts online I found a basic way of creating a basic drawing system now I need to start adding some more interesting features to my idea. The lines of code I used are shown above.

After some experimenting with trying to manipulate the x and y values of the drawing system so I think I will be changing this and try something different.

2

So I’ve decided to take a different approach to this task. Instead of a drawing game I will be making a game that shows how people are repel from each other, the people being different shapes.

3

Here is the code used to make the blue square move in four directions.

4

5

6

I decided to surround the square with eight circles so that it formed a grid like pattern. This pattern represents the order in society and much like the other pieces of interactive art I studied it means nothing until it is interacted with. When the player starts moving the blue square around you notice that the orange circles repel from the square when they get within a certain proximity. I feel this feature represents how certain people can be isolated just because they are different, in this case that would be the blue square being different from the orange circles.

Here is the Processing file

The controls are using “wasd”.

Workshop 1: Drawing using Different Techniques

DSC00011DSC00013DSC00012DSC00014

In this task we had to draw using unusual techniques such as not looking at the paper, holding the pencil in a fist while drawing, drawing with you non dominant hand and a few others. These techniques made me think about the drawing much more than I usually do since most of the time I draw from memory. This task also produced some interesting styles of drawing such as the one where we couldn’t look at the paper which came out as an abstract piece of art. I feel I could use these skills in the future when drawing to produce a different style to my usual style of drawing.

Workshop 2: Perspective

DSC00015DSC00016

For our first task we had to draw a kitchen and then a hallway with one point perspective. One point perspective is when the image has one vanishing point and every line excluding vertical ones points towards the vanishing point. I found this task fairly easy since I have used one point perspective many times before.

DSC00018

The second task was to draw a house using two point perspective. Unlike the first task this is when the picture has two vanishing points. This was slightly harder than the first task because I have not done this before but I was quick to pick it up and understand the concept but I feel I need some more practice on it.

Workshop 3: Construction Drawing

This week we were focusing on construction drawings. Our main task was to draw a variety of standard objects arranged in a random way on the table.

Construction Drawing

This drawing was our first one in which we used pencil and were advised not to use the rubber and keep all our construction lines. I made a few mistakes on this because it was hard to get the correct scale and measurements of and between the objects. I also had a few problems with the perspective of the objects.

The second drawing was a charcoal one from a different angle. This was a more fluid drawing and we used the edge of the charcoal to create effective straight lines. I was also able to smudge the charcoal to hide some imperfections in the drawing.

Workshop 4: Negative and Positive Shapes

DSC00020

This week we had to draw negative and positive shapes. To achieve this we were given the task to draw an arrangement of objects such as tape, a pencil and some wires. This was a fairly difficult task because there was so many components and they had interesting relationships with each other. I also made the mistake of drawing the image slightly tilted up but I got the perspective correct which was still good. Overall I feel drawing negative space is an effective way of drawing lots of objects together and I feel I will use this in the future.

Workshop 5: Drawing the Human Form

DSC00050 DSC00051

For this task we had to draw the human form quickly by drawing the basic lines in the body, i.e the spine, head, arms and legs. I used the website Pixelovely for reference images. I found this task fair simple since I have done this type of drawing many times before.

DSC00049

For the second task we had to flesh out the drawings to make them more like people and less like skeletons. I also found this task fairly simple because I have done a lot of work on the human form. This is a useful skill to have because I feel I will use it in the future.

Workshop 6: Drawing Heads and Hands

DSC00063

In this task we had to draw a profile view of the person next to us and make sure we take into account the proportions of the face. I found this task fairly easy because I have done a lot of this before.

DSC00064

In the second task we had to draw a portrait view of the same person. This task I found slightly harder because I had to make sure both halves of the face looked right. I didn’t draw all the hair because that isn’t really an important part of the face.

DSC00065

DSC00066

For these tasks we had to draw faces at different angles. This task was fairly hard because I haven’t had much practice doing this and I feel it’s a skill I need to practice on.

DSC00068

This was the last task on faces. For this task we had to draw some more faces from our imagination. I found this task fairly simple and I don’t think I need anymore practice with this.

DSC00069

This task was to draw hands. We had to draw a skeleton of them and then flesh them out. I found tis slightly tricky since it was new to me.

Research

Concept art is a form of illustration used to convey an idea used usually for film, animation or video games for example.

tumblr_nwwcbiWDl11qccjyio1_500

Keyleth by Mikandi Source Date: 02/11/15

This piece of concept art is based in a fantasy world much like many other pieces of concept art since the character in this painting is not realistic since she has elf ears. This was mostly likely created using digital means to create it. The artist has a good use of layers since has got some plants in the foreground the character in the middle and some more plants in the background as scenery.

tumblr_nwhk8zu0Vj1qccjyio1_500

Ross Tran Source Date: 02/11/15

Ross Tran has created a piece of concept art that is also set in a fantasy themed world. The picture seems to be set on an imaginary planet and the creature next to the women is also fictional. This piece of art also seems to be created using digital means such as Photoshop. The is a great sense of isolation with these two characters since they seem to be alone on this planet. The image has a strong focus on the centre of the image because the bottom of the half the image seems to be slightly blurred.

hand_drawn_concept_art_by_kkfreak-d6bqkc1

Hand Drawn Concept Art by kkfreak Source Date: 02/11/15

Here is a hand drawn landscape which looks as if it was drawn in pencil but I’m not entirely sure. If this sketch was to be developed colour would probably be added. I like this style of concept art because is very basic and barebones and it is not covered in fancy visuals. This piece also looks like its set in a futuristic scene/environment.

Environment

best-cities-to-rent-seattle-shutterstock_69356029

Source Date: 09/11/15

The scenery for my story will be set in a futuristic city that has been destroyed and covered in foliage such as vines, bushes and grass for example. I will use features of these cities and include them into the scenery.

the-combine-citadel-ascending-to-the-heavens

Source Date: 09/11/15

Here is the citadel from the game “Half Life 2”. I could take inspiration from this tower design and use it as one of the skyscrapers in a city scene.

Theme Board

Here is a theme board made up of several different cities, some real and some fictional.

Objects and Artifacts

Total-Recall-Car-by-Harald-Belker

Source Date: 16/11/15

Here is a futuristic car. I will use this car and images like this for reference in my concept art, however I will make these cars look destroyed and broken to fit in with the apocalypse setting of my story.

Nissan_iV

Source Date: 16/11/15

cars-view-6

Source Date: 16/11/15

flying-car-2

Source Date: 16/11/15

broken-car-old-2071

Source Date: 16/11/15

I will take inspiration from the weathering from this car and apply it to futuristic designs of cars.

Scanner_light2

Source Date: 16/11/15

Here are some surveillance drones and objects used for surveillance in my city setting. This piece above is from the game Half Life 2 and I will probably use it as a reference for designing futuristic objects and equipment.

Manhack

Source Date: 16/11/15

1680786-slide-smart-aid-riegebauer-2

Source Date: 16/11/15

Proposal

DSC00080

Here is the story behind my concept art.

Ideas Generation

DSC00079

Here are a few character sketches. The character on the left will be the main character. He is an ex police officer. The character on the right is one of the robots that have taken over the world.

DSC00082

DSC00083

Here are a few examples of possible environments for the concept art.

DSC00084

Here are some basic concepts for vehicles and surveillance drones before the apocalypse. The actual cars and drones will be weathered and damaged.

Ideas Development

People

Character Development

This image shows the development of the main characters face. The images on the top row show potential faces for the main character. On the row below I have taken the features I liked from the top row and combined them to make the main characters face.

Body Type

Here are different body type examples of the main character. I think the body type in the middle will fit the main character since its not too muscular or too slim.

Produce Outcome

People

Final Face

I used this sketch and created some basic shapes over it in Illustrator using the pen tool to create a basic outline.

Screen Shot 2015-11-30 at 14.16.09

Here is the basic outline of the front view of the face.

Final Face 1

Here is the front view of the face with facial features. I made the shapes of the facial features by adding and subtracting shapes together.

Final Face 2

Here is the side view of the face with a basic outline. I aligned the features of the left face with the right face by using guides on Illustrator.

Final Face 3

Here is the final piece of the people concept art section. I decided to make a piece of the character before the apocalypse. I made this in Illustrator.

Environment

DSC00088

Here is the main construction lines of my environment study. I decided to go for a two point perspective view because I felt it was more interesting than just a one point perspective view.

DSC00089

On this step I removed the construction lines and added doors to the buildings.

DSC00090

In this step I added more detail to the buildings in the scene.

DSC00091

In this step I finished adding detail to all the buildings.

DSC00092

In this step I started adding destruction and weathering to the buildings.

DSC00093

This is the final piece (If you want to see the image in more detail refer to the original). I finished it up by adding some destruction to the road and pavement and finished adding vines and smoke to the buildings.

Objects

Drone 1

First I started with a few basic shapes in Illustrator and then added them or subtracted them from each other to create these three shapes of my futuristic surveillance drone.

Drone 2

I then duplicated the black shape, made it smaller and the moved it to the left and then repeated this until I had this.

Drone 3

I then added antennas to the drone.

Drone 4

Next I added an eye-shaped camera to the front of the drone.

Drone 5

I then added a button to the side of the drone.

Drone 6

Next I added the correct colours to the drone. This was fairly simple in Illustrator because you can easily change the colour of the shapes once they are created.

Objects Final

Here is the final piece. I made the front view by aligning it with the side view and creating guides in Illustrator.

Final Evaluation

People Evaluation

Final Face 3

I feel I completed this piece of concept art fairly well and it came out the way I had intended it to be. I like that the image is very sharp and bold, this is due to using Illustrator to create this composition. I also liked my use of bright colours to contrast the black of the visor and the characters skin tone.

However, if I was to do this piece again I would work more on making the jaw of the character more symmetrical and I would also create the rest of the body for the character as just creating the head is kind of limiting.

Environment Evaluation

DSC00093

(Please refer to the actual drawing instead of this picture since the quality of my camera doesn’t do it justice)

This piece I am most proud of out of the three pieces of concept art because I enjoy drawing perspective drawing so it was an enjoyable though tedious at times process. I like the level of detail I used when creating this picture like the vines and smoke coming from the buildings.

If I was to do this drawing again I would have added more detail into the pavement and road area because I feel it is fairly bland compared to the rest of the drawing.

Object Evaluation

Objects Final

I like the futuristic design of this object, the surveillance drone, because it is simple in it’s design and in the same style as the people study since I used Illustrator to design both pieces.

If I was to create this again I would add more detail to the design of this drone such as circuitry and wires. I would also like to create a version to show what it looks like after the apocalypse.