Havana, Cuba

Havana is a beautiful city, well worth seeing. It is however very easy to leave with a wrong impression about Havana, on one side you have Old Havana which is extremely well kept and touristy and beautiful but you also have the side of Havana that the locals live in which is much bigger and well worth seeing.

On our journey to Trinidad we found out that there is a China Town in Havana, so on our second day we set out to find it. This is definitely the most disappointing China Town I have ever been to, but at least it had an arch:

China Town Havana Image

Some of the buildings had the original Chinese signs and design, but very few and we only found about 3 places that even do chinese food. Given all that we skipped getting chinese and headed off towards the Capitolio in search of beans and rice.

Capitolio Havana Image

Capitolio is a must see, it is grand and this is where you can find all the old cars parked and ready to give you a ride or a tour of the city. If you don’t fancy that you can simply enjoy the view in the nearby park, by the Jose Marti Monument:

Jose Marti Monument Havana Image

This is a nice place to relax in the evening before heading into Old Havana:

Old Havana Image

We spent a few evenings walking around Old Havana, it is full of beautiful old buildings but it is also full of tourists and people trying to sell you stuff.

Our daily walk back from all the sightseeing took us through the Malecon, this is a nice walk in the sunshine but beware of the waves soaking you on windy days. The view of the city is incredible and if you have time it stretches for hours and takes you through a couple of interesting monuments:

Malecon Havana Image

And some quirky newer buildings:

Colourful Building Image

Abandoned Havana, Cuba

There is a huge amount of abandoned buildings in Havana, everywhere you look you can find remains of something that used to be impressive and gorgeous. I think they are still beautiful in their own haunting way. This is a side of Havana that is easy to miss if you stick to touristy places and take a taxi everywhere.

We found this one while walking through the little residential streets in Old Havana. This is the most looked after part of the city but the residentials streets have not seen any TLC for a some time.

Abandoned Building, Havana Image

This one is a huge construction site at the beginning of the El Prado, but looks like any work has been abandoned long ago.

Abandoned Building, Havana Image

Not far is this ovegrown house just before one of the squares in Old Havana.

Abandoned Building, Havana Image

We found this gorgeous mansion while exploring the Bodega area of Havana. It looks liek it has been a school at some point.

Abandoned Building, Havana Image

And my favourite of them all is the glorious huge tree growing out of the building near the Hemingway’s Daiquiry place in Old Havana.

Tree growing on top of a building Image

Cuban Food

While I can easily say I am a fan of Cuban food, I can imagine I would have had a different opinion had I not been eating with my family. Typical meals would include rice and peas, fried plantain and smoked pork steak with some sort of fruit drinks like guava juice or pina colada. Breakfast is usually an omlette sandwich or cheese and ham sandwich (they come in a burger type bun and are called bocaditos). Street food or hole in wall places and definately more popular here than the restaurants, and we unfortunately found out why. Our attempts to eat out have not been very successful, first of all there aren’t many restaurants in Cienfuegos but the ones we did try were extremely overpriced for what they were and not tasty in the slightest. Most popular food to buy on the go seems to be Bocaditos (sometimes toasted) and Pizza with most common fillings being Jamon (ham) and Queso (cheese), sometimes pineapple made an appearance. Cubans like sweet drinks and one of the popular ones are:

  • Guarapo (sugar cane drink which is very sweet and green in colour).
  • Pina Colada
  • Guava Juice
  • Pineapple Juice
  • Mango Juice
  • Coconut Milk
  • Malta (malt fizzy drink)
  • Garapina (fermented pineapple drink)

The hole in the wall places were not only better but also much cheaper as they took Pesos (Moneda Nacional) rather than CUC (Convertable Peso, used for tourists and more expensive places $1 CUC is around $25 Peso). You can exchange CUC to Peso in the foreign exhange offices (called Cadeca). Local Peso was pretty useful for buses, snacks and any small locals cafes. To give you some idea of the prices:

  • Pizza: $5 - $10 Peso
  • Bocadito: $5 - $10 Peso
  • Pork Kebab/Bochanero: $1 CUCq
  • Coffee: $1 Peso or 1 CUC depending where you go
  • Refresco: $10 Peso
  • Cocktails/Beer: 1 CUC - 2 CUC
  • Restaurant meal: 5 CUC - 10 CUC

There only two places to recommend really:

  1. El Rapido (the Cuban version of a McDonalds) - can be found on the Malecon, the Boulevard and near the hospital.
  2. Cafe by the Pier - great pork kebab and pina colada, also nice croquetes and an excellent view. Sometimes they have Cuban music/dancing on weekends.

Photos

El Rapido Image

Pineapple and Pork Kebab and Pina Colada Image

Casa Particular Breakfast Image

Cuban Dinner with Fried Fish Image

Pizza Jabon y Queso Image

Giron, Cuba

Giron is a beach and small town in the Bay of Pigs located on one of the worlds largest wetlands.

Getting There

We travelled there by car as the whole family wanted to come along to the amazing coral reefs but there are also some buses going to Havana (especially Viazul) stop in town and from there it is a short journey by taxi to all the attractions.

Attractions

1. Playa Giron

This is a small and gorgeous beach perfect for relaxing and bathing, it was not busy at all when we went and there is a small drinks shack one one end of the beach serving up cocktails and fresh coconuts.

Playa Giron Image

2. Cueva de los Peces

This is a 70m deep flooded cenote. It is full of brightly colourded tropical fish which can be seen while snorkeling or diving if you want to go deeper into the darker waters below. The sea water here mixes with fresh water giving it a sligtly unfamiliar feel.

Giron Lake Image

3. Coral Reefs

Just outside the park with the Cueva de los Peces across the road is a small beach full of coral reefs. Perfect for snorkeling or even diving and you can take diving lessons here as well.

Giron Reef Beach Image

4. Bay of Pigs Museum

Museo Playa Giron (Bay of Pigs Museum) in Cuba is dedicated to the Bay of Pigs invasion. The museum itself is small and houses a collection of photographs and other historic pieces relating to the invasion. It also has some military vehicles on display.

Giron Museum Image

Giron Tank Image

I could’t resist brtinging the family dog along, his name is Marley (after Bob Marley). I think he enjoyed Giron too!

Marley Image

Marley Image

Marley Image

Overall Giron is an excellent day trip, and is definitely unforgettable.

Trinidad, Cuba

While in Cuba we couldn’t leave without seeing Trinidad, it has been one of UNESCOs World Heritage sites since 1988. This small town with colonial architecture is very charming and popular with tourists. I have visited it briefly on my last trip to Cuba and by briefly I mean drove through it in a car, so I definitely needed to return.

We only stayed 3 days but it was enough to see everything Trinidad has to offer and even laze about on a beach.

Getting There

There are 3 ways to get to Trinidad from Cienfuegos: car, tourist bus and local bus. Plenty of cars were offering to take us there, as you near the bus station in Cienfuegos the chorus of drivers yelling out destinations is a little overwhelming. But once you push through all that, you end up inside a busy bus station. The times and destinations are hard to work out unless you know where to look (usually a piece of paper with writing on it stuck to the wall somewhere), but mostly you need to listen out for the driver yelling out the destinations. People with tickets board first and everyone else is crammed in later until there is no room to breathe. Knowing all that we opted for the tourist bus, which has guaranteed seats and air conditioning].

The tourist bus operator is Viazul and usually has it’s own section at the bus stations where you can purchase tickets and board the buses. Here is the timetable hanging on the ticket office door as of November 2014 in Cienfuegos bus station:

Cienfuegos to Trinidad Viazul Timetable Image

Make sure to arrive half an hour early as there is a queue for the tickets and the buses don’t run on time, they can be early or late by 15 minutes or more. Best bet, arrive early and sit tight!

Once we boarded the bus we realised the small chance of the bathroom on board being in working order was actually 0, not only that but the smell was funky the entire trip. The whole bus full of tourists holding their noses was not quite what we were after but the driver did something in the end which fixed it. Hooray!

Make sure to check return times when you reach your destination, these were not written anywhere and I had to ask the person selling the tickets.

Attractions

1. Playa Ancon

This lovely beach is not far from town, it is easily accessible by a taxi or you can take the mini bus. The beach is lined with hotels, so if you want to use the loungers you can get a drink. Otherwise if you keep walking towards the middle of the beach, you will find the public beach area.

Trinidad Beach Image

Trinidad Beach Image

2. Plaza Mayor

This basically an open air museum of Spanish colonial architecture, the small square has bars and restaurants but the popular attraction is the steps and the music bar/cafe at the top of the steps which comes to life later at night. There is live music and salsa dancing. Pina Colada was pretty good!

Trinidad Image

3. Museums

The whole of Plaza Mayor is lined with museums. They all charge a few CUC for entrance and range from plates and old furniture on display to some with history of Trinidad. This is the view from one of the museums, where you can go up to the rooftop via an old and very narrow staircase. The view itself is worth it:

Trinidad Image

Trinidad Image

4. Colonial Streets

Simply wandering around anywhere in the center of Trinidad will present you with colourful Colonial buildings. A typical colonial street:

Trinidad Image

Trinidad Image

Trinidad Image

Accomodation

There are plenty of hotels in Trinidad, but we chose to stay in a locals home. These are called Casa Particulars and the one we stayed in was cheap and great location. I will try to find the name of it as my aunt booked it for us. Here is the tasty breakfast we had every morning ( this cost 3 CUC each ):

Trinidad Breakfast at the Casa Particular Image

Rancho Luna, Cuba

Rancho Luna Image

This is the nicest beach we have been to in Cuba so far. It has sand, fishes, coral reefs and a few bars and cafes. I would not count on using the bathroom unless you are willing to go to every place and ask if you could pay to use their bathroom. Once you get there the coral reefs are to your left (if facing the water) around the curve towards the hotel (which can only be seen once you turn the corner). You should see people snorkeling there and it is quite shallow where the reef is. If you don’t find it there are still fishes in the water out and about.

Getting There

You can get there by either taxi or local bus. There are also organised tours. We took the bus every time, it was an interesting experience in itself. The buses go from the main Cienfuegos Bus Station:

El PradoImage

We took the 10am bus every time, the next one is 11:30. They are not very frequent! The local buses accept local currency (Moneda Nacional ie Peso). One way trip cost us $1 Peso (once it was $2 Peso because the driver demanded it). The space is limited on these buses and people with tickets board first and the rest of the pasengers squeeze on. Note that as a tourist you probably won’t be able to acquire a ticket and will likely be redirected to the more expensive tourist bus. Simply follow the crowd and pay on board. Tube rush hour in London was nothing compared to this bus journey, it is hot, there is no space and the driver lets everyone on regardless of how much you are struggling to breathe. I had a rather large sweaty lady hugging me to keep stable with a very old man on the other side making pitiful noises every time someone leaned on him. Not the most comfortable bus ride but it is only about 20 minues or so throught the countryside. Get off once you see the sea and beach.

Getting back

Getting back is not very hard, exit the beach through the restaurants and car park. Once you reach the main road there is a rather large tree to your left. There are ussually people stadnign under it. This is the bus stop to get back, it is not sign posted in any way.

You can get back usign the local bus again or the private trucks. The trucks are a better but more expensive option, it is not as hot with much more available space and costs $10 Local Peso. The trucks are modified to become “buses” and come in all sorts of shapes and colours. There is ususally one around 15:30. Get the bus or the truck which every comes first, but the buses are less punctual than the trucks and the truck is actually a fun ride.

This is the view from the “bus stop”:

Rancho Luna Image

And here is our truck approaching:

Rancho Luna Image

I have been told that all buses and trucks from this stop go to Cienfuegos.

Things to Do in Cienfuegos, Cuba

Visit the Cienfuegos Pier

You can spend some time on the pier which has some nice views of the bay and some fishing boats. On weekends at night they sometimes have music and dancing.

Cienfuegos Pier Image

Cienfuegos Pier Image

Cienfuegos Pier Image

Get a nice pork kebab by the pier

Right by the pier you can relax in a cafe Muelle, which does awesome pork and pineapple kebabs and pina coladas.

Kebab Image

Spend an evening on the Malecon

Most of the locals spend evenings here chatting with friends and there are a few bars/cafes across the road too. You can simply stroll along the length of the Malecon or take a seat and watch the bay at night.

Cienfuegos Malecon Image

Visit an 18th Century Cementary

There are 2 gorgeous and very old cementaries in Cienfuegos, I only have pictures from one of them. The better one is much smaller and older with graves and statues dating back to 1800s you might get away with taking photos depending on what the caretaker agrees to. We had to pay a small fee to ba taken around ($10 local pesos). The caretaker was very knowlegeable about the history of different graves but only speaks Spanish.

The bigger cementary was a bit of a walk, I would recommend taking the bus if it is very hot. Bus number 3 stops there. The entrance is free and you can walk around the different paths to see the older statues and gravestones. This cementary is more modern and it is in much better condition.

Cementario Image

Walk along the El Prado

This is the main street which leads towards the Malecon, in the evening there are lots of people simple walking around or sitting with friends on one of the many benches. The street is lined with cafes, restaurants and bars. If you want to spend less, buy drinks and food form the hole in the wall places for national currency.

El PradoImage

Go shopping on the Boulevrad

There are a couple of small markets along here and some general grocery shops. There isn’t much to buy really but interesting to see anyway.

Market off the Boulevard Image

Day Trips

You can take day trips to multiple places around Cienfuegos:

  1. El Nicho - small waterfall.
  2. Rancho Luna - the nicest beach near here with fishes and coral reefs.
  3. Cienfuegos Fort/Castle - just past Rancho Luna there is an old fort/castle.
  4. Botanical Gardens.

HTML5 Canvas Particle System (Pt. 3)

This is a Part 3 of a tutorial post HTML5 Canvas Particles System (Pt. 1). In this tutorial I will cover:

  1. Initialising Canvas (covered in Pt. 1)
  2. Drawing circles in Canvas (covered in Pt. 2)
  3. Simple animation for particle movement using SetInterval() (covered in Pt. 2)
  4. Improving the code using RequestAnimationFrame()

Using RequestAnimationFrame() instead of SetInterval()

Instead of using SetInterval() we can animate only when we need to using RequestAnimationFrame(). This helps improve performance as we re-draw only when something has changed. We can define to call spawn(), draw() and update() on load, after which we would have to modify the update() method to trigger the RequestAnimationFrame().

Here is what we are using instead of SetInterval():

1
2
3
4
5
6
7
8
window.requestAnimFrame = window.requestAnimationFrame ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame ||
                          window.oRequestAnimationFrame ||
                          window.msRequestAnimationFrame ||
                          function(e){
                            window.setTimeout(e,1e3)
                          };

And adding an on load function:

1
2
3
4
5
6
7
8
// We should create, draw and start updating on load. 
window.onload = function() {
    c.width = c.width;
    c.height = c.height;
    spawn();
    draw();
    update();
}

We can now modify update() to look like this which now:

1
2
3
4
5
6
7
8
9
10
11
12
13
function update() {
    reset();
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    for(var i=0; i < ps.length; i++) {
        ps[i].y += 1 ;
        ps[i].x += -1 + (Math.random() * 3);
        //ps[i].r = Math.random()*5;
    }
    draw();
    window.setTimeout(requestAnimFrame(update),1e3);

}

And that is it!

Cienfuegos, Cuba

Park Jose Marti Image

Getting There

We have kicked off our trip in a small city of Cienfuegos, Cuba. We landed in Varadero airport and from there Cienfuegos was a terryfying 2hr car trip. No seatbelts, no road signs and sparse road lights made every passing car seem like it was going to crash into us, but we arrived safely after all and this is simply something we would have to get used to (the buses turned out to be a similar experience). We could have taken a bus from Varadero to Cienfuegos, but since in Cuba there is a separation of transport for tourists and locals it makes taking the bus together with my family difficult and due to only 3 or 4 buses a day we would’ve had to spend the night in Varadero. The car seemed like a much better option.

Family Visa

I have lots of family in Cuba and we were staying with them on a Family Visa which was an adventure in itself to aquire on our first day here. While we entered the country on a Tourist Card, in order for us to stay in my family home we would have to change it to the Family Visa within 24hrs of arrival. Of course we could have done this back in London, but it seemed easier to do in Cuba (it was not). Not only did we have to sit in a scorching heat in the queue for ages, but to get everythign sorted required multiple trips to various places: bank, insurance office of some sort and the foreign exchange. After the lady giving out the visas had a long chat about what to do with us with her manager, apparently since I am a daughter of a Cuban citizen but do not have a cuban passport it was making things more complicated. In the end after some strange and personal questions, they agreed to give us the family visa an everything seemed to go well. That was until they demanded to see a printed copy of our travel insurance and since it is 26 pages long we obviously did not print it and bring it with us but instead had all the electonic copies on our phones. This did not go down well and we had to go to insurance office of some sort where they would “verify” our policy or simply make us buy a new one, which was actually more expensive for 2 weeks in Cuba than the entire 6 months backpacking insurance policy we already had! Luckily my dad talked to them in Spanish and we managed to convince them that electronic confirmations are the standard in UK and we were off to submit our travel insurance “verification” and collect a receipt in the bank to prove we have paid for the visa. After a full day of running around we had our visa. Success!

Accomodation

Our accomodation for the two weeks is my brothers house, which is currently in a complete renovation stage. We had the most “finished” room, but no running water. You don’t appreciate running water until you don’t have any! Simple things like brushing your teeth suddenly become difficult. Nothing could be accomplished without getting water first and storing it in buckets in our room. Separate drinking water had to be aquired as well, due to an outbreak of Cholera around Cuba. We managed to adapt quickly enough and now having a shower in the morning can be accomplished in the same amount of time as having a fully working bathroom. Thanks to water reservour under our room, a water pump, an industrial water heating element and multiple buckets we can have hot water within 5 minutes (unless the pump stops working!).

On a Tourist Card we could have stayed in a Casa Particular, which is most of the travellers here seem to do. This is basically a B&B but they would have to register you as staying with them to the goverment. Running water, sometimes even hot water 24/7. Usually the hosts offer breakfasts an even dinners if requested (would very much recommend this option, especially after trying very hard to find somewhere to eat but more on that later).

Photos

Aduana Immigration Building Image Cienfuegos Market Image Cienfuegos Melecon Image Cienfuegos White Bus

HTML5 Canvas Particle System (Pt. 2)

This is a Part 2 of a tutorial post HTML5 Canvas Particles System (Pt. 1). In this tutorial I will cover:

  1. Initialising Canvas (covered in Pt. 1)
  2. Drawing circles in Canvas
  3. Simple animation for particle movement using SetInterval()
  4. Improving the code using RequestAnimationFrame()

Drawing Circles in Canvas

Now that we have initialized a blank canvas, we can begin to draw in it. For our particle system we will need to draw the individual “particles”, each one will be drawn as a circle. In order to draw a circle in Canvas we need to first get the canvas element using GetElementById and set the width and height to the browser window, then specify that we are working in 2D using getContext:

1
2
3
4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;

We can now define our draw() function and then call it:

1
2
3
4
5
6
7
8
9
10
11
12
function draw() {
  x = 90; // x co-ordinate
  y = 70; // y co-ordinate
  r = 60; // radius of a circle
  c = "#ef5da1"; // fill colour

  ctx.beginPath();
  ctx.arc( x, y, r, 0, 6);
  ctx.fillStyle = c;
  ctx.fill();
}
draw();

And here is our first circle:

We can now create an array of particles for us to draw. First let’s initialise some variables that we will need available globally:

1
2
3
var ps = [];// initialize an empty particle array
var MAX_NUM = 500; // this is the maximum number of particles we want to generate and draw
var colors = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ]; // this is an array of colour that the particles can be

In order to generate all particles we will create a spawn() function and call it. Here we are populating the empty ps[] array with randomly generated values, within the given bound (in this case the width and height of the browser window):

1
2
3
4
5
6
7
8
9
10
function spawn() {
  for(var i = 0; ps.length < MAX_NUM; i++) {
      ps[i] = { x: Math.random() * window.innerWidth,
                y: Math.random() * window.innerHeight,
                r: Math.random() * 5,
                c: colors[Math.floor(Math.random() * colors.length)]
              };
      }
}
spawn();

We now need to modify our draw() function to loop over all the particles and draw them:

1
2
3
4
5
6
7
8
9
function draw() {
  for(var i=0; i < ps.length; i++) {
  ctx.beginPath();
      ctx.arc( ps[i].x, ps[i].y, ps[i].r, 0, 6);
      ctx.fillStyle = ps[i].c;
      ctx.fill();
  }
}
draw();

If we run the code now, we should see something like this:

This is the full script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var ps = [];
var MAX_NUM = 500;
var colors = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;

// create the particles
function spawn() {
  for(var i=0; ps.length < MAX_NUM; i++) {
    ps[i] = { x: Math.random()*window.innerWidth,
              y: Math.random()*window.innerHeight,
              r: Math.random()*5,
              c: colors[Math.floor(Math.random()*colors.length)]
            };
   }
}
function draw() {
  for(var i=0; i < ps.length; i++) {
  ctx.beginPath();
      ctx.arc( ps[i].x, ps[i].y, ps[i].r, 0, 6);
      ctx.fillStyle = ps[i].c;
      ctx.fill();
  }
}
spawn();
draw();

Simple Animation Using SetInterval()

We are now ready to animate our particle system. We will need to write an update() function, which will update the x and y values of each particle on each frame. On each update we also need to reset the width and height to clear the canvas (Tip: remove this to see what happens if the canvas is not cleared):

1
2
3
4
5
6
7
8
function update() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
    for(var i=0; i < ps.length; i++) {
        ps[i].y += 1;
        ps[i].x += -1 + (Math.random() * 3);
    }
}

We can now call this function on each frame using SetInterval() and then draw the particles with the updated co-ordinates:

1
2
3
4
setInterval(function() {
  update();
  draw();
}, 30);

You may have noticed that the particles simply dissapear once they have reached the bottom of the brower window, if you would liek to animation to keep on running we could reset the x and y of each aprticles if it leaves the screen to start all over again:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function reset() {
    //reset the x and y coordinates if a particle leaves the canvas
    for(var i=0; i < ps.length; i++) {
        //reset if y or coordinate has left the canvas
        if(ps[i].y > c.height) {
            ps[i].y = Math.random()*window.innerHeight;
            ps[i].color = colors[Math.floor(Math.random() * colors.length)];
        }
        //reset if x or coordinate has left the canvas
        if(ps[i].x > c.width || ps[i].x < 0){
          ps[i].x = Math.random()*window.innerWidth;
          ps[i].color = colors[Math.floor(Math.random() * colors.length)];
        }
    }
}

Now we have to call this new reset() function on each frame:

1
2
3
4
5
setInterval(function() {
  update();
  draw();
  reset();
}, 30);

Now you have a never ending animation of colourful particles slowly making their way down the screen. The full particles.js can be found here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// declare vars
var ps = [];
var MAX_NUM = 500;
var colors = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;

spawn();

//create the particles
function spawn() {
  for(var i=0; ps.length < MAX_NUM; i++) {
    ps[i] = { x: Math.random()*window.innerWidth,
              y: Math.random()*window.innerHeight,
              r: Math.random()*5,
              c: colors[Math.floor(Math.random()*colors.length)]
            };
   }
}

function update() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    for(var i=0; i < ps.length; i++) {
        ps[i].y += 1 ;
        ps[i].x += -1 + (Math.random() * 3);
        //ps[i].r = Math.random()*5;
    }
}

function reset() {
    //reset the x and y coordinates if leaves the canvas
    for(var i=0; i < ps.length; i++) {
        //reset if y or coordinate has left the canvas
        if(ps[i].y > c.height) {
            ps[i].y = Math.random()*window.innerHeight;
            ps[i].color = colors[Math.floor(Math.random() * colors.length)];
        }
        //reset if x or coordinate has left the canvas
        if(ps[i].x > c.width || ps[i].x < 0){
          ps[i].x = Math.random()*window.innerWidth;
          ps[i].color = colors[Math.floor(Math.random() * colors.length)];
        }
    }
}

function draw() {
  for(var i=0; i < ps.length; i++) {
    ctx.beginPath();
      ctx.arc( ps[i].x, ps[i].y, ps[i].r, 0, 6);
      ctx.fillStyle = ps[i].c;
      ctx.fill();
  }
}

setInterval(function() {
  update();
  draw();
  reset();
}, 30);

Live demo here.

In Pt.3, I will cover how we can improve our animation using RequestAnimationFrame()(Pt.3 can be found here).