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.