Day 18 – Fly Swatter

Flies! Flies everywhere! This is what happens when coding goes wrong…

FliesAs someone who is afraid of repeating patterns, this was… kind of disturbing. But, I pushed on! Flies were appended to the sandwich div container one by one. I used random number generating functions to make them move within the container. One problem with my approach was that all the flies would end up moving at the same time, which makes their movement slightly robotic… but I find it kind of therapeutic to watch at the same time.

A fly would be removed when clicked on, but the number of flies would always keep adding up to 5. If 5 flies were appended, then the game was over. I guess I made an unbeatable game since there’s no end to the flies! Oops. I did add a fly counter for a small show of achievement…
fly
A funny side note: my sister complained about this page saying “I’m a competitive MOBA player and I’m clicking the fly so many times and it doesn’t register.” I think it may have been because I set it as a click event. I changed the event to a mousedown event in response!

Day 18 – Fly Swatter

Day 17 – Bubble Wrap

Today’s webpage was inspired by a lovely lady. When I asked if she had any ideas for what might be fun, she suggested bubble wrap. Of course! Why hadn’t I thought of that? Popping bubble wrap is so oddly satisfying. I remember happily popping entire sheets as a kid… and then getting scolded for ruining the bubble wrap. Well, dear readers, pop without abandon!

bubblewrap

I drew the sheet of bubble wrap using css. I looked up different images of bubble wrap. I randomly found a game that involved popping bubbles. I happily popped some bubbles. I was about 10 clicks in when a scary picture took over my whole screen and a loud piercing scream filled my ears. Really? One of those websites? Oh the things I go through to research bubble wrap. Fear not, there are no jump scares here… or are there?

I found that with the shading used, the bubbles look like they have squiggly outlines! An unexpected but pleasant surprise. I had trouble getting the popped bubbles flat. My sister actually commented “whoa, those really look like holes! so cool!”, err… not what I was going for, but thanks?

holesIf you clicked around too fast, the audio clip would not play. I ran into this same problem when I wrote Rainbow Piano last week. I solved this by duplicating the same audio clip into 3 and then incrementing through the three clips. Pop away!
final

Day 18: Bubble Wrap

Day 16 – New Year Ball Drop

Wow, 2014 went by quickly! I combined what I learned about getTime() and css animations to make a ball drop for new year’s.
ball

I found this free clip art that looks sort of like the colourful ball in Times Square. (Future project: make a kaleidoscope?) I calculated the difference between the current time and the set date: January 1st, 2015. Since this value was in milliseconds, I set the variables in milliseconds up to days. (This was done by relating milliseconds to seconds, seconds to minutes, … and so on.)

To figure out how many “full” increments of each value there were, I used modulus % to find the remainders. For example, for hours, I did remaining milliseconds % day and then divided by the number of milliseconds in an hour. The result still had to be converted to an integer using Math.floor()! The mathematics was fun because you had to think about the time frames as “stairs” and make your way down to the smallest unit to show, number of seconds left.

I watched my clock on New Year’s Eve but noticed it was 20 seconds ahead of another (very professional looking) website. Then the ball didn’t drop. And the “drop it” button didn’t work. Ahhh, a problem with the code! I got home after a party and took a look. I didn’t add animation support for other browser! Such a silly mistake.

Sad cat.
Sad cat.

But that doesn’t explain the 20 second difference. Very curious… well, guess it doesn’t hurt to celebrate once and then 20 seconds later. Which is exactly what we did.

Happy New Year!

Day 16 – New Year Ball Drop

Day 15 Wonderland Bunny

Today’s project was one I thought of in the beginning. I wanted “drink me” and “eat me” options that would make the user bigger or smaller, like in Alice in Wonderland. The changes would be shown through a table that would change in size. As I was coding today’s page, I changed it so that a bunny would change instead.

I used css’s perspective and rotateX(deg) to make the bunny lean back and lean forward. When the bunny gets to its biggest size, it would lean forward, like it was towering over you. When the bunny gets to its smallest size, it would lean backward, like it is leaning back to look up at you. This seemed much more convincing when I envisioned it in my head. The effects make the bunny look flat so I think something else would have to be done to have the 3D leaning forward and back effect. This is something I want to look into for future pages.

wonderland

Feed the Wonderland Bunny to see him transform!

Today was little disappointing because when I thought of this idea, I thought it would be cute. Instead I feel a bit underwhelmed by how it looks. Some days I feel really happy with the daily project but other days not so much (Boxed Marble comes to mind…). The good thing about doing one page a day is that you get to start fresh the next day!

Day 14 – Reaction Time

I based today’s project on the Human Benchmark Reaction Time test.

The user clicks to start and clicks immediately when they see the background change to red. Their reaction time is displayed on the screen in milliseconds. I changed the indication colours from the Human Benchmark website because I felt it was more intuitive to click when the background turned red instead of green (“stop!”). Blue felt like a good colour for a “paused stage” so I stuck with it.

clickwait

The main function used was getTime(), to record the user’s reaction time. Two mistakes I learned from were:

1. Using setInterval to change the background
I set it up so that for each new game, there would be a random delay of 1 to 6 seconds until the background changed colour. After the delay time, I would change the background color to red. Typing this out now makes it seem really intuitive, use setTimeout() to wait a specified number of milliseconds and then execute the function. However, I did not know about setTimeout() but remembered setInterval() from my digital clock page. I set an interval to keep checking to see if the specified time had passed yet. Not only was this an inefficient way of going about it, the conditions would never be met!
horrible

2. Setting a start time when the user clicks Start
I used getTime() two times, once when the user clicked start and when they clicked again for the red background. The correct times should have been when the background changed colour and then when the user clicked. I think I made this mistake because of 1) the “start” concept 2) I thought I had to get the (start time) and then continuously check to see if (start time + delay time) had been reached.

It is a little embarrassing to talk about all the mistakes I’ve made (and I’m sure there are so many things about my code that could be improved), but that’s how people can learn. Making a mistake actually makes the lesson learned more memorable!

Test your reaction time ! I haven’t been able to get under 300 milliseconds yet…
Untitled

Day 13 – Boxed Marble

I had a lot of fun making the flickering neon lights so I thought I would play some more with css animations today. I wanted to create a bouncing ball that would bounce off the sides of the page. I created the ball by making a div inside of another div. The outside div was the horizontal div and the inside one was a vertical div. I set the width and height of the inside div so that it was a square and then used border-radius to change it into a circle. I used a radial gradient to make the ball look more like a marble.

I wrote two different animations, a “bounce” and a “travel” that controlled the vertical and horizontal movements respectively. I struggled to make the ball bounce naturally with css timing functions. When and how does a ball change in width and height as it bounces? How does a ball’s speed change?

My main problem today was that I started too late in the day and did not read up on css animations, in particular css timing functions. I do not have a good enough understanding of css animations and positioning so I had a lot of trouble getting the ball to bounce nicely within the container.

Bouncing blue marble
Bouncing blue marble

I think the end result still looks a little strange when it bounces off the bottom. Today really showed me that while you can learn a lot by doing, sometimes it’s good to not jump right in and to read up on the concepts first. Oh and to not start so late that you’re up into the wee hours of the night!

Day 12 – Neon Lights

Today’s website was all css animation! In reality, I did not think much about the animation part until I finished drawing the lights. I watched some clips on youtube of flickering neon lights and also looked at images for inspiration.
neonI loved all the fun images I found through google. (Look at those awesome neon shoes!) By looking at the lights closely, I noticed that the “brightest” part of the light was technically not the most center. The center was the lightest in colour, almost close to white, but the bright “neon” color was found in the surrounding area. I used css text-shadow and blurred a few colours together. The order from innermost to outermost was: lightest colour, the neon colour of the light, and then darker colours in the same family.

After setting up the lights, I used css keyframes to make the lights flicker. Changing the opacity and removing the text-shadow made the lights look like they were off. I listed percentages that were very close to one another to toggle the lights between on and off quickly. If the percentages were further apart, the light would “fade away” or “fade back” which is not the way neon lights flicker.

Note: I got stuck making the second animation (bottom words) and was really bewildered as to why it would not work even if I copied the code from the first animation. Turns out I had missed an ending } so the first animation ran with no problems, leaving the second one in the dust. Lights, I demand that you be broken! I hope I didn’t make the lights too annoying. Richerd thought it was an image so I must have done a decent job!

Open for business!
Open for business!

Day 12 –  Neon Lights: open for business 24/7 now and forever.

Day 11 – Greeting Card Maker

It’s Christmas Eve!

I had plans for most of the day so I wanted to do a more simple project. Well, I think today’s website turned into one of the hardest so far! The plan was to let the user enter a message and display the message on a “card” with a set image. I was able to get the message input and display set up without trouble and then I decided to let the user upload their own image. This is when I spent a long time reading about uploading images to the server and got very confused. Ajax? Image resizing functions? Multiple image selections? Previews?

1.FileReader(), reader.onload, attr()
Thank goodness for sites like stack overflow and the goodness of programmers in sharing their code! I used FileReader(), reader.onload and attr() to show a preview of the user’s image on the page. Oh that moment when the image showed for the first time.. glorious!

Snoopy Dance!!
Snoopy Dance!!

With programming, it seems even when I expect things are in order… and the site works, I’m still somewhat surprised!

2. html2canvas()
After finally getting the picture preview to work, I was ready to call it a night until my sister said “you can’t let people make cards without saving them!” Right. html2canvas() is a really nifty way to take screenshots of page elements with Javascript. I added a ‘save card’ button that would let the user save their card as an image in a popup window.
download

3. flat UI colors
One of the problems I’ve had since starting my daily website is the styles! I don’t have any experience in design and often get overly zealous with using contrasting colours. At one point my sister walked by and said “eww that’s gross” (I think the background was mint with colours of fuchsia, blue, and green on the page…). I spent a lot of time trying to tone everything down. This page of flat UI colors was very useful in choosing colors to use: http://flatuicolors.com/. But of course, you can see how I can get overly excited with some of the fun colors on there.

I wanted the page to look flat but had trouble getting the “choose file” button to fit with the rest of the page. In the end I left it the way it was. I think the end product looks okay, although not as festive as you’d think it would be as something built on Christmas Eve.

I think today’s website was a little too difficult for me at this point. There are a lot of concepts I barely understood even though I was able to build this. There’s a lot to learn!

I think the buttons are cute!
I think the buttons are cute!

Make your own card and send it to a friend!

Day 10 – Hungry Santa

My original idea for today was to have Santa chase the cursor and leave presents everywhere on the screen. When I realized this would not work if the user was not using a mouse, I decided to change the interaction to a click event. Santa would go where the user clicked, but what would make Santa go somewhere? Cookies! I wrote out what needed to happen on a piece of paper first. I find it super useful to use pen and paper when working on problems as I’m more of a visual and kinesthetic learner.

IMG_1334
The traditional way.

1. event.pageX, click(handler)
To place an image where the user clicked, I had to find out what the coordinates were. This was easily done by using jQuery’s event.pageX and event.pageY, which gives you the mouse position relative to the left side and top of the document. With these coordinates, I could use the the click event handler to append something at the mouse click. First I created a new div wherever the user clicked but then decided I could simply append an image with a different id every time.

Cookies, cookies, cookies!
Cookies, cookies, cookies!

2. animate()
Once I had cookies appear wherever the user clicked, my next step was to make the Santa image move to the cookie. I assigned Santa’s positioning to where the cookie was but this resulted in Santa showing up immediately.

I had to break it down to see how much Santa had to move to get to the cookie. This was some simple math by looking at the x and y coordinates. I took the coordinates of the cookie and subtracted Santa’s to get the number of spaces to move. I ran into a road block here for a while and made extensive use of the console.log() function to try to find the problem. I kept getting NaN or undefined and thought it was because I was getting “px” coordinate values from CSS. Turns out it was just because I was calling the function before the variables were declared… (wrong order in the code)… oops!! Once I got the correct number of spaces, I used .animate() to move Santa.

Speedy Santa.
Speedy Santa.

Originally, I set it up so that Santa would move horizontally and vertically (first the x-coordinates and then the y-coordinates). Once the cookies piled up however, this got to be very slow. I changed it so that he would move the shortest distance instead. The shortest distance between two points is a straight line… who remembers proving that in Math class?

3. .remove()
When Santa got to the cookie, I wanted the cookie to disappear. I used .hide() to hide the image before reading about .remove() which removes the element completely from the document. Perfect! Cookie eaten.

I added a cookie counter at the end just for fun. Please feed Hungry Santa lots of cookies!

I had to be fast to get this screenshot!
I had to be fast to get this screenshot!

NOTE: I made the initial mistake of using a random number generating function to label my cookies. This meant that numbers could possibly be repeated. What happened was that every now and then, a GHOST COOKIE would appear and disappear by itself! This was super bizarre but fixed when I used a simple incremented variable to label the cookies. This is how I felt while trying to track down the mysterious ghost cookie….
programmer

Day 9 – Rainbow Piano

Today I found out that I’m actually in “lock-step” with Howard in his 180 days of design project! What a coincidence. I was inspired by his most recent blog post on color to incorporate a rainbow into today’s website.

The main things I learned today:

1. Rainbows and Math
I had no clue how to create a rainbow. Do I just choose colors and look at their html codes? I turned to trusty Google and found this tutorial: Making annoying rainbows in Javascript. I used the math sine function to create numbers between -1 and 1 then set the center and the amplitude. This allowed me to create values that would range between 0 and 255 for RGB values. Who knew sine was such a useful function? I miss math classes.
mathcatInstead of using a for loop like the tutorial, I created a function that would return an rgb value. Outside the function, I set a rainbowIndex that would increment by one every time the function was called.

rainbow
Party time!

2. jQuery .hover, .mouseenter, .mouseleave
I created 20 divs that would go across the screen and set the background colour to be black. I then used .hover to change the css background of each div as the mouse was on the div. This created a pretty rainbow gradient that changed as the user hovered over the different div elements. I was pretty happy with the website at this point but the setup reminded me of a piano.

So I thought, instead of having a big black box, why not make it look like a piano! I alternated ids of one and two for the div and assigned them black and white colours. Now the bars were black and white and then turned into a rainbow with the mouse over action.

But… I kinda missed the piano once it was gone. I added another function to remove the styling so that the keys would go back to their original colours. Note: setting the style value to an empty string removes all styles except for a style that has been applied with a CSS rule in a stylesheet (which were black and white background colours in this case).

piano
Rainbow piano keys!

3. Adding audio with html
Since it now looked like a piano, it might as well play some sounds! I looked up html5 audio code and downloaded some free sound files for the piano notes. Then I got stuck for a long time because I kept getting “play() is an undefined function”. I read many articles and solutions on stackoverflow.com before Richerd suggested it was because I had set the id of my sound files to the source line instead of the audio line, doh!

Finally I wanted to make sure the same sound did not play twice in a row. I wrote a conditional statement (that I also pondered over for a bit…) to find a another sound if the new sound was the same as the previous. I wrote similar code for my fortune cookie on day 3 yet still struggled coming up with the concept today. Practice, practice, practice!

Overall, today was more fun than the previous few days. I’m still quite sick with a cold but the bright colours definitely brightened up my day!

I hope you have fun playing with my rainbow piano. For the pianists out there: I’m sorry the notes are random!