Project 4 – Post 2 – Production and Review

Pre-Production

Now that I have carried out some research I am going to create 2-3 concept art works to see if the effects that I have research can be applied to the project. By doing this I can see my vision in half hour instead of spending hours creating it in After Effects then it turns out it doesn’t turn out well. I planned it out by using A4 pages as the scene and then entered some place holder text and drew on the animation path and wrote a few notes such as time and action. Theses notes are open to change when I create the animation.

The first concept is for the first scene. I planned to start with nothing then spin the text in. I also planned the next sentence sliding on from the edge of the screen to finish the scene off. This transition was inspired from the final piece of research I did however instead of splitting the text I just split the scene instead.

The next concept is a more complicated transition which was inspired from the first piece of research from the film Pulp Fiction. I got the idea of the text moving in with the background from there as they do something similar where they move the text in with the paint splat. I created a test in this in After Effects as I wasn’t 100% sure how to make it. And it turned out amazingly.

The final concept was inspired by the Sam Harris typography. This was where the text came out of the previous word to create a nice final image. I took this idea and applied it to my project. So I picked the longest sentence and tested to see if it fits and it turns out it does.

Production

I am going to write this section different to how I have been writing them, this is because I have loads of scenes with different types of animation going on and it would take to long to talk about all of individually. So I am going to break it down into 3 sections and talk generically about what I did. Theses section are; Compositions, Tools and rendering.

When I create anything in After Effects I find it easier to split each scene into there own pre-composition and then have a final composition with all the scenes in to render. However in this case I created a new pre-composition for each sentence. This allowed me to create a clean and tidy work-space. It also allowed me to transition in the scene which includes the background not just the text. This made it so much easier as I can create the final animation then animate transition in separately.

Once the compositions are set out and the texts have been created using the text tool it was time to animate them. I used a number of tools to animate, however the most common tool was the rotation and position. This allowed me to spin the text in or fly them into the scene. This was done by setting the end positions key frame and then change the setting till it was off scene and set a new key frame and then the program will fill in the space between the two key frames.

The next major tool was the mask tool. This tool works two different ways. The first way is that it will only show the text inside of the mask drawn. This allowed me to create text rotate in from the middle of the screen and not be seen until it hit a certain position. The next use for the mask tool is to cut shapes out of a solid and this was done by drawing around the shape and inverting the mask meaning that anything inside of the mask can be seen. This was used when creating the blue sea transition.

By combing these few tools allowed me to create the finished typography and all of which I learnt from watch the video co-pilot tutorials and from messing around with the software. But it shows how little tools you need to create something cool.

Once the animation was complete and I RAM previewed the animation which will play the animation in full quality with sound to test for errors and fix any found, it was time to export the animation. This was done by adding the final comp to the render queue and then set up the settings. The render setting that I used was a loss-less codec set at best quality with the resolution set at 1980:1080 and the file format was AVI. Theses settings give me an uncompressed video but also the AVI carries sound as-well which is needed for the typography. The only problem with this format is that the file size is huge as it is 3.2gbs for 21 second animation.

Final Project

I cannont directly add my video to WordPress so I have uploaded it to YouTube instead – http://youtu.be/hWkK1dKHVOg

Review

Now that I have rendered and uploaded the final production of the kinetic typography, I shall review it and get other people to review my project. The review will including what’s good and what could be improved in the future.

I really like about the final result of the project is how simple it is as there’s only text and solid background. I think this was a great design specification that I set myself, however this made it easier to make and didn’t challenge me as much as I hoped it would. The next good point about the project was learning how to sync the text to the audio waves in Adobe After Effects, and I think I sync it together well.

Even though I really like my final product I still think there is a lot of room for improvement and as motion graphics is the area that I wish to focus in and create this improvements in the future. The main improvement that I think I could make is to add objects and shapes into the typography to create a more busy and entertaining design. For example when he say this is our new harpoon, a harpoon could fly across the screen splitting it into 2 and the next text following it like a trail. The next improvement is add a camera and play around with the 3D settings to create cool focus and motion blur. This will take my project to the next level and adds depth to the graphics instead of a flat canvas.

I really like the simpleness of the animation, it is sync well to the backing track and the transition are great. However I think that I the animation is to boring and flat. – Max Copper

I really like how well the animation is synced to the track however I find it to boring in the design. – David Stainforth

 

 

 

Advertisements

Adobe After effects outside research (Video Copilot)

After competing the Adobe After effects workshop today where we learnt the basic such as key framing and back animation such as rotating and translation it reminded me of how much I use to love playing around with the program as I learnt the software myself using tutorial from the internet. This also reminded me of a company who creates tutorials, blogs and plugins for After effects. This company is called Video Copilot.

I went back to look at some new blog posts and tutorials when I ran into this key note by one of the creators and I thought it was so good so I’m going to share it to you. It doesn’t only talk about his life but also information such as timing, planning and much more please watch the whole thing.

Keynote – http://www.videocopilot.net/blog/2014/10/my-first-keynote-becoming-a-better-artist/

Also please watch some of the tutorials as they are extremely helpfully which I just found out by spending the best part of 2 days watching and try out the tutorials! Unfortunately I didn’t think to save the projects as I was only copying the tutorial and sometimes messing around with the settings which often made my machine crash.

 

 

Project 4 – Post 1 – Project Analysis and Research

Project Analysis

Now that I have done some the basic animation with the stop motion its time to move onto some of the more complex types of animation and the area that I am passionate about is motion graphics and special FX. Both of these uses the same type of animation and software. The type of animation is key frame which will tween two keys together. This means that the you set two points and the software will fill in the difference between the frames.

So for this project I am going to use key frame animation using Adobe After Effects, however I going to start off with the basics and create a text only typography. This will allow me to work with key frames and the basics of After Effects as I will be using the basics tools such as position, rotation, pre-composing, mask and maybe even start to use some 3D layers and camera movement.

I am going to do my typography to a 21 second speech from Wolf of Wall Street. So I am going to set myself some design specifications and rules, theses are as follows;

  • Text only – This means that I can focus on learning the key framing and the program
  • Simple background colours – This creates a theme that maintains though-out the typography
  • Same Font – Once again help to create a consistent theme though-out the typography
  • Transitions – Create transitions between each scene to bring more life to the animation instead of a simple fade.

Software Research

Before jumping into to creating the animation I am going to carry out some research. The first thing I am going to research is with the software and how to use it, this isn’t so important to me as I thought myself the software years ago, however I am going to do some research to refresh my memory with the software and hopefully learn some new tips and tricks in the process.

The tutorial website that I constantly keep going back to is Video Co-pilot which is a professional motion graphics and visual FX designer who creates advanced tutorials however with-in the tutorials there are some basic stuff which I can relate to my animation. I defiantly recommend checking the website out as they have over 100 tutorials and free plug-ins and stock footage available.

The tutorials that I looked at to get myself back into After Effects was “typewriter keys logo”. This tutorial spoke about 3D rotation and transitions with the text. This will relate well to the typography as it will mean I can play around with the 3D setting to create some cool effects and rotations. The next three tutorials that I also watched was “Advanced Spinning”, “Jumpy Titles” and “Fly by Titles”. All three tutorials are aimed at text and how it can be animated. There are a few cool text FXs that I might use in my animation.

Another really good tutorial to watch is “After Effects 101” as it takes you through the very basics of the software. There’s some cool stuff in there that you might not know.

Typography Research

Now that I have researched the software I am now going to carry out some research on exciting typography’s that have been made, while looking at exciting work I am going to think about how it’s done and if It could be used in my animation.

I will be look at 3 typography’s and pick out a few cool transitions and effects used in the animation. I will use this for inspiration for my typography. The reason I’m only using 3 is because there are thousands out there and if I watch load I might start to get to many ideas and over complicate my animation and create an inconstant  animation.

The first typography that I will be using for inspiration is a simple typography about the film pulp fiction (http://vimeo.com/81900537). The reason I have picked this is because it uses a speech from a film like I intend to. The typography uses the camera and rotation to create the transitions as it will rotate and move from sentence to sentence. This is a cool effect however I don’t think I know enough about 3D space and cameras in After Effects. The next technique used is with the text as it fades into position. This is a cool but really easy effect to create therefore I shall use it in my animation.

The next typography that I will be taking inspiration from will be a simple typography about a scene for the office (http://vimeo.com/88875617). The reason I picked this typography is because it is an extremely simple animation but it uses a some great transitions and text entrance.  The transition that I like the most and hopefully using in my animation is at the start where the second sentence splits though the first one, this is an idea that I should be able to adapt to accompany my animation. I also like how the text pops out of one another. This should be an easy effect to re-create.

Capture

The final typography that I will be using is a short animation about Sam Harris’ lecture entitled “Death and the Present Moment”. The reason I picked this animation is because it is extremely short and uses very simple transitions between scenes. The transition is just a simple camera movement. This is an effect I could use but instead of moving the camera I could move the scene instead to create the look of camera movement. The final bit of inspiration that I am taking from this animation is how the text jumps out of the previous text to create a nice looking final looking design.

Capture

I hope to use my research and combined it all together to create the best kinetic text only typography.

 

 

 

Project 3 – Post 3 – 12 Frame Animation Production and Review

Pre Production

Before creating my animation I created some test animations to find out how much difference is too much and what works. So I created some simple animations. The first test I created was a basic bouncing ball animation. This worked out well and play smoothly on the praxinoscope.  After I created some waves and different length, these don’t as-well as there was to much difference between frame.

When creating the 12 frame animation sequence that will loop I had to plan and work out how the sequence will work. So I got a piece of paper and planned out the 12 frames, as you can see from the picture below I worked out where the wheel will rotate in order for it to loop back to the top. As you can see I worked it out so it will have rotated 90 degrees every 3 frames, which means 30 degrees per frame.

Once I had worked out the basic rotation I drew out a rough concept of the animation to test if it works. Once the concept art was created I tested it by using a praxinoscope and inserting my animation sequence and spinning it to play each frame one after another. After testing the animation it proved that the animation is smooth and works as looping animation sequence.

Production

Now that I have created the tests and proved that the animation will work it was time to begin creating a digital copy of the animation. So the first thing that I did was create the wheel which will be used in the animation. This was done by tracing an exciting creative commons licensed cartoon wheel which I found online which I then turned to a solid black shape and added my own spokes. I did this so I you can tell that the wheel is spinning.

Now that the object was created it was time to create the animation sequence. I started out by creating duplicate layers, theses will be my 12 frames. The next step was to rotate each frame to the correct position, I did this by using the singling out each frame by turning off all layers but the one I am using. after that I used the translate tool and rotated each frame 30 degrees. The translation tool allowed me precisely enter the exact number of degrees to create the perfect animation.

Now that each frame is set up it is time to convert the frames into an animation. This was done by using the animation mode within Photoshop which then allowed me to create the animation from the 12 layers, this was done by using one of the settings which turns each layer into there own frame. Once the layers have been converted into frames I changed the length of the distance between frame to create a smoother animation and flows better. There was one problem which is that the animation plays backwards. This was an easy fix was to just play the animation backwards and save it.

The final part was to export the animation. This was done by exporting the animation to web with-in Photoshop. I then choose the .GIF file format as it is a small file type which is compatible with most web browsers allowing a larger audience to able to see my animation. However the downside is the limited 254 colour range, however this doesn’t effect me as I’m using a sold black wheel.

Final Animation

Below is the final animation of the wheel spinning, it was saved as the .gif file type.

Wheel-animation

Review

Now that the animation has been created I am extremely happy with the final outcome of the animation. It is extremely smooth and loops perfectly as set out in my brief. I really like the smooth look to the animation and the solid black wheel works extremely well as it allowed me to concentrate more on creating a smooth animation loop.

However If I was to re-do this task I would spend more time on the artwork and create a moving bike and environment however I spent to long research however to animate with-in Photoshop so I ran out of time, however I hope to revisit this animation technique in the future and hopefully move to key frame animation and motion graphics.

I really like the smooth looping animation, however more detail with-in the design would improve the animation – Max Copper

I like the simple silhouette look of the animation however I think there could be more to the animation. Other than that the animation works great. – Tom Whelsh.

Project 3 – Post 2 – Stop Motion Production and Review

Production

After carrying out research I analysed how animation started with shows such as yogi bear which used clear plastic drawings to animate stuff on top of the environment. So this got me thinking on how I can apply this to my design idea and rules. So the first step to meet the design requirements was to work out what materials and tools would work the best, the materials that I used are as follows;

  • Paper – Used as the canvas which will allowed me to create the scene in which the animation will take place.
  • Clear plastic film – Used to animate the bike over top of the scene, this was inspired by the research I did on how the old animations was created.
  • Marker pen – This was used to create the environment and bike used in the animation

Now that I worked out what materials that I will be using, I began to start to draw out the static environment, I created a bumpy mountain with a jump at the end where the bike will flip the cap created. This was done to create a narrative arc and create something exciting into the animation. The environment was drawn on top of a number A4 paper to create a large canvas to run down.

The next thing that I created was the bike, this was inspired by the research that I carried out before creating the animation. This was done by printing out a picture of a downhill bike which then was traced on top of some clear plastic film. However I drew the wheels separately as I can animate them spinning to create more realism and a overall better made animation. This idea was inspired by the traditional animation methods that I researched.

The next stage was the animating and capturing. The animating was easy as I moved the bike a small distance and rotated the wheels then took a picture just like how I found out when researching the animation type. However the major problem that I found out while creating the animation was that I didn’t have a tripod so after each frame the camera position was different however I thought this created a more natural look to the animation.

The final step was to turn the pictures into a animation sequence which will then be exported as a .gif, the reason I choose the .gif format is because the file type is small and is compatible with most web browsers so a larger audience can view my animation online. However the down side with .gif is the limited colour range as it only has a 254 colours which can ruin the quality of an animation. However luckily for me I’m using black and white so the quality shouldn’t be effected.

I used Photoshop to convert the pictures into animation, as Photoshop allowed me to convert layers (pictures/ frames) into animation sequence with minimal effect as the software as a button which will take the order of the layers and convert each layer to a new frame. The only problem was the timing was set at 1 second which I then changed to 0.1 second to create a smoother animation. The next problem was that the animation was in reverse so I set the animation to play backwards instead which fixed the issue. Also Photoshop allowed me to easily export the animation into a gif with-out loosing any quality.

 

Final Animation

Below is the final animation of the bike, it was saved as the .gif file type.BIKE-RIDE-GIF

Review

I am extremely happy with the final outcome as I’ve never done any stop motion animation. As I was able go from an idea to research to the final outcome coming out and the process going so smoothly and not running into to many problems. The black and white really helped me focus on the animation as it meant I could focus on the new technique that researched instead of the art work that will be used. However If I was to use this technique again I would spend more time on the artwork.

My favourite part of the project was how smooth the animation flows and works extremely well and creates a nice amature feeling to the animation, this is mainly because of the camera position as I didn’t have a tripod to keep the animation in the same position. So this would be the biggest improvement that I would make if I was to do this project again.

I like the choppy look to the animation as it creates this nice home made look to the animation which I really like. However if it was to be improved I think the animation should be longer than it is. – Max Copper

I really like the basic design of the animation with the black and white but also the simple shape to the mountain. It really creates a good fun look. The main improvement in my opinion is to create a static camera position to create a more professional look to the animation but it will also create a nicer look to the animation – Cain Abella

 

Project 3 – Post 1 – Project Analysis and Research

Project  Analysis

Now that I have explored the method of capturing still images, it time to set a project that allows me to start to animate and move the images around as this is where my passion lies. So for this project I am going to go back to the roots of animation and explore how it was made and copy it, however I will be adding a modern day twist to the animation.

For this project I will be creating two different types of animation. The first type of animation is a 12 frame hand-drawn sequence which can be used in a praxinoscope to create a short moving animation. Once I have the concept hand-drawn and working, I will then begin  digitize it using software such as Photoshop to create the same 12 frame animation which will be exported out as a GIF so it can be played on most devices and websites, allowing a wide range of audience to view my creation.

The second type of animation that I will be exploring and creating will be using a technique called stop motion. In order to create the stop motion animation I will need to explore more into as I only know a little bit about it and how it is created at the moment. By doing so I will learn tricks and short cuts which should help me create my final animation sequence.

When creating both animations I will have a common theme through-out. This theme is Cycling, by setting my self a theme I limit myself to what I can do, however this isn’t a bad thing as I can put all of my effort into creating the best possible animation around the theme selected.  The first animation I am going to a 12 frame animation of a bikes wheels (with no frame) spinning around. For the stop motion animation I think i’m going to get a bike riding down a hill.

When creating the animations I am going to create myself so rules to keep to, theses rules are as follows;

  • Black and white – This will allow me to focus on the animation instead of the look of the thing I am animating, this will really help me improve animation and not worry about the design.
  • Primary shapes – This will help me to create a simple animation that won’t be to hard as it’s the first time that I have created this sort of animation.

By following theses rules I should be able to learn the basic of animation and hopefully learn how to animate well so I can move onto more advance animations.

Research

I am going to start off by researching each technique that I will be using. The first technique that I will using is the hand drawn praxinoscope which is one of the first types of animation created in history.  I will be looking into the history and what it involves so I re-create the art.

“Emile Reynaud’s transformation of the zoetrope put this attraction/narration tension into play in a particularly apparent manner, as seen in his praxinoscope (1876), praxinoscope theater (1879), and praxinoscope projector (1882). In the end, in his optical theater (77tetltre optique, 1892), narration came to the fore as the primary structuring principle. The three varieties of praxinoscope functioned in roughly the same way and according to the same basic principles as the zoetrope (rotating drum, flexible strip, etc.). The invention’s originality lay in its prism of mirrors which, located at the center of the apparatus, replaced the zoetrope’s cut-out slits. The intro-duction of this prism made it possible to get around the serious problem of reduced luminosity, which obliged the designers of previous optical toys to opt for simple figures with strong outlines, to neglect the background almost en-tirely, and to limit the scene to a repetition of a minimal sequence of events. The praxinoscope introduced a new approach to the figures by emphasizing the pre-cision of the drawing and by exploiting the subtlety of the colors. ”  (Strauven, WS, 2006. The Cinema of Attractions Reloaded. 2nd ed. Amsterdam: Amsterdam University Press.)

As you can see they both use a strip with the animation on it, then the animation is spins around and the viewer will look in the same place and the animation will be moving. This idea is what I shall be applying to my work. I will be using 12 frames on the strips to create a 12 phase animation. To test if my animation will work before creating the digital version by drawing the 12 frame animation onto a strip of paper I can then try it in either a zoetrope or a praxinoscope as both of them will play the animation and will prove if the animation will work.

Above are a few examples of how the strips look, as you can see there is a little change between frame to create a smooth animation which fits together. This will be the hardest part of the animation as if I don’t create enough cap the animation won’t be complete by the end of the 12 frames, however if I create to much difference the animation won’t flow and will be to jumpy. The examples above work perfectly which I am going to try and match.

When I convert the animation I will be using computer generated stop motion animation. This is similar to the technique that I will be using for my next animation however this will be computer animated where as the other one will be animated via photos pieced together to create a short animation.

So what is stop motion?

“Animation is animation, whatever the medium. Whether you are drawing on paper, model- ling in Plasticine, shoving a couple of matchboxes around in front of a Bolex camera or ani-mating with a computer; to become an animator you will need to understand movement and how to create emotion. You can be a cartoonist or an artist on film, a moving image maker, and there are many beautiful and hilarious examples of this, but they do not necessarily ful-fil the definition of animation that this book sets out to demonstrate. This book is written for someone wanting to take the first steps in creating three.dimensional character animation.

Methods for 2D animation have been documented for a long time. Since the formation of the Disney Studios, their vast commercial output meant they had to find ways of passing on their skills to a large body of workers who needed to know the house style. The top anima-tors started to look at what they were doing as animators, and started to identiFy rules and guiding principles by which they worked. Most of these principles apply to model or puppet animation as well as – as they are derived From the scientific study of movement – the effect of gravity, friction and force on masses. One of the greatest books to read about the develop-ment of 2D animation is 011ie Johnston and Frank Thomas’s The Illusion of Life (1997).”   (Shaw, SS, 2008. Stop Motion: Craft skills for model animation. 2nd ed. Oxford: Focal Press.)

A few feature length films are such as Wallace and Grommet and Shaun the Sheep. Both films use the 3D Plasticine models. The animation was then created putting a camera on a tripod then the characters are then animated by moving the models a small bit then take another picture. Once the scene is complete the pictures are then stitched together to create the animation. I am going to create my animation by using this technique however Instead of 3D models I will be using drawings and re-drawing slightly different and then take the picture.

Introduction to Programming with examples

This post is about my first 3 lesson into Java programming all 3 was 2 hours long, however I have just joined all of what I have learnt into 1 blog to make it easier. At the start I of the lesson I had strong remorse about programming however as the lesson went on I started to become more and more comfortable with programming.

The thing that I learnt and really stuck with me and helped me was the list below. This helped me as it put my worries about programming behind me.

  • You don’t have to be good at math’s
  • You don’t need to know the answers, its about finding them out
  • Java and JavaScript are not the same thing – they are both C based programming
  • Programming IS extremely creative
  • Programming is about constantly solving puzzles
  • Programming is HARD

Live Example’s

While learning some of the key words, we created a few fun games and examples. Theses are below.

Jave01

In this example I created a basic square and it the programs set-up. Theses are the very basics in creating a program as I have used a set-up function to create the size and colour of the program and I have also used a draw command.

Screen Shot 2014-10-16 at 16.28.48

I then went ahead and created a number of shapes which will reset once the mouse was clicked. I added a cap on the amount drawn which is 10. In order to do this I had to use a void for each of the setups. I also had to make it so when the mouse is clicked the int called numberDrawn was reset back to 10. Finally I had to use a random() function to randomly place the shapes across the scene.

Screen Shot 2014-10-16 at 16.32.50

The final example I took the random generating square and capped it to 1 square however this time I used an array to random change the colour every time the mouse is clicked swell as moving. This was done by using a random number float and converted it to an in by using these code here “float f = random(0, 6;
int i = int(f);
println(f + ” : ” + i);” This code will generate a number between 0 and 5, then convert it to an int called I. This int was then called to the fill to the fill “fill(randomColor[i]);”. So now the random number generated is converted to a whole number then called to the array with the random colours in called “randomColour”.

Below is a long list of key terms and functions which I used to create the examples above.

  • IDE- integrated development environment – the program that we program in
  • Variables – building blocks of programming – stores information – give it a name to reference in the code
  • Parentheses ()
  • Functions – Is a set of commands that we call upon – a group of instructions make up a method
  • Methods –  The same concept of function but its not linked to a class
  • Class- is something eg person
  • Instant- every time we make a person we make an instance of that class
  • Data type- bolen (true or false)
  • Loop- a looped event that will loop until something is meet like testing for something
  • Compeller- This will translate the code into machine code so the program can run
  • Condition statement- We ask for some and want a true or false back
  • OOP- Object orientated programing- based around the idea of programming around an object, based on an idea of creating a world and relate programing at any time no matter what order in the code is so its not liner programming which goes from top to bottom.
  • Camel Casing- first word lower case and instead of a space is a capital thisIsAExample

Formatting

if (newScore > topScore)

printin(“This is a new top score”)

Always code as if the guy who ends up maintaining your code will be violent and knows where you live

 What is in an IDE 

Code writing area – where you write the code

Compiler – Runs the program

Log window – will print errors and other stuff

Code (Java)   – IDE used Processing

println(“This will print to the log”);      print to log

size(xxx, yyy);         Screen size

background(000, 000, 000);     background colour

rect(X, Y, width, hieght);        Creates a rectantle

ellipse(postionX, postionY, Width, Height);  – mouseX, mouseY will draw follow the mouse-    draws a circle

fill(000, 000, 000);        Will fill in objects

void= don’t expect something back, just run the instructions and not receive information

void draw = constantly loops and will draw

void mouseClicked = will carry out the instruction when mouse clicked

>/< – more than and less than

x++; – add 1

x–; – take away 1

|| – Or

&& – And

!= not equals to

= – assignment

== – comparison

=== – identical to

// – comment

/* – code here – */  – comment out sections of code at once

if (conditional statement) {

instruction

} else {

instruction

}

Create a function 

functionName()  {

add instructions here

}

 Page Break 

Int – int name(no spaces) = number; This is a decliration

 Loops 

Two types of loops – for and while

for(int I=0<10; I++){

//do whatever we want here

}

variable – condition – iteration

 stroke cap 

strokeCap() – sets the style for how the line ending are drawn – square, project

Stroke join 

strokeJoin() – sets the style for how line are joined

Stroke weight 

strokeWeight – sets the thickness of the stroke line

Opacity fill(150, 140, 140, transpacany);

Array

Array numbers 

int x = 10;

int [] myNumbers = {23, 56, 79, 173, 45};

println(myNumbers);

println(myNumbers[2]);

Array Colours 

color[] myColors = {#00FF5B, #BD09D6, #D6AA09};

size(600, 300);

fill(myColors[2]);

rect(60, 60, 60, 60);