Mary Briskin

Is It Raining? Another Chrome Extension

I enjoyed making my last one and thought I'd give it another go. This extension plays a simple animation (falling rain) over the client's page to let him or her know whether it is raining in his or her region. See video for demonstration.

Get 'Is it Raining?' HERE.

Read More

Google Chrome Prank Extension

Next Cyber Monday will be a blast.

Confused Shopper is a Chrome extension that changes all of the prices on your page to appear to be between $0.01 and $0.99. Secretly upload it to a friend's computer and enjoy their reaction when they discover the great new deals of the day.


This was my first Chrome Extension so to get started, I read through Google's tutorial
To capture all of the prices on the page I used a regular expression, to access and change them I used Javascript's String replace() method and innerHTML method.

Read More

Keeping Heroku Apps Awake

I host my Rails apps on Heroku, which is an awesome service.
It was becoming a problem though, that after an hour of disuse the apps would go into idle mode. Once an app is idling, the startup time ranges from 8 - 15 seconds, by which point many users just give up and click elsewhere.

I fixed this by creating yet another Rails app and writting a custom rake task that sends GET requests to all of my previous applications, keeping them from idling.

Read More

My Magnet Board

I began making this app when I was just starting out with Ruby and Ruby on Rails. I hadn't finished it because many of the features that I wanted to include seemed out of my league at the time. When I came back to it a few days ago I was happy to see that I could now debug my code, understand it, and add the features that I had wanted.

Read More

Testing My Vector Library with Jasmine

I have found myself repeatedly using vector math in my Canvas applications, so I wrote a small library to avoid rewriting code for every project. It includes functions for adding, subtracting, scaling and normalizing vectors. You can find the source code HERE.

I used Jasmine to test my functions. Click HERE to see my specs.
Click HERE to see the Jasmine Spec Runner in action. 

Got Jasmine set up thanks to THIS well-written tutorial.
Get the latest Jasmine version HERE.

Lessons Learned:
1. Basics of the Jasmine testing framework
2. Re-learned how to find the dot product of two vectors. Yaay!

Next Steps:
1. Use the Jasmine beforeEach, afterEach functions
2. Test asynchronous data 

Read More

Ring Game

Visit game HERE
See Github HERE

Lessons Learned:
1. Google analytics tracking
2. Custom shapes with KineticJS

Problems with program:
1.When the mouse is moved quickly past the rings, the program doesn't register that it had intersected with it. This makes cheating very easy.
2. Since each level is randomly generated, it is possible for a level to be impossible.
3. When the screen size is small enough, the Next Level button can be made to be right next to the star which, again, makes cheating possible.

Problem Fixes:
1. Register the mouse movement as a line instead of a point and check if the line intersects with the ring.
2. Set up safeguards regulating how close rings can be to one another.
3. Enable the size of the star, the player, and the radiuses of the rings to take into account the screen size.


Read More

My Gallery

One Page Website

I made a website for a friend who wanted a place to display pictures of his welding projects, using Ruby on Rails and Knockout. This time I used Knockout to make a working lighbox instead of changing the lightbox's class from "visible" to "invisible". It was both more and less difficult.

More difficult because:
I accidentally included an outdated knockout gem which produced a few errors that I just couldn't figure out. I also didn't know about Knockout's $parent and $child bindings until after I had figured out a convoluted way of producing the same effect on my own.

Less difficult because:
Knockout's 'foreach' and 'click' bindings allowed me to easily move from image to image. I would say the overall time this took me, even with the difficulties, was less than the previous implementation of the same lightbox.


Read More

Starry Night

Click To View

Before you click: Music plays on page load, so mind your speakers.

More KineticJS and SoundJS


The Canvas starts off empty, background colour set to black. On 'mousedown' a yellow circle starts to grow, on 'mouseup' a Kinetic Tween sets it on its course. Some circles fly off of the screen but some stick around to create the appearance of a "starry night". If you want what looks like a full moon in your sky, wait a few seconds before lifting your mouse up.

Background Song: Once Upon a December


Box2D
I want to learn to use Box2D-Web, a Javascript version of the C++ library used by Angry Birds to create and manage all their physics. I've been slowly trying to build something using the tutorials linked below under "resources".

.........................................

Visit Github page HERE
Visit Starry Night HERE


Resources:

Box2D Tutorial
Box2D Tutorial 2





Read More

Discovering SoundJS

Crazy Minion












Click on the minion to hear a sound bite and watch an animation. 

SoundJS

In building this page I used both KineticJS, which I discussed in my last post, and SoundJS, a Javascript library that makes working with audio "a breeze", by the authors' account at least. I followed SoundJS's online tutorial closely to learn the basics of preloading, playing and pausing audio. Everything easily integrated with KineticJS.

KineticJS

Working with Kinetic Images wasn't as simple as with shapes. It was necessary to load the images before making them kinetic or adding event listeners.

Lessons Learned:
1. Basic loading and playing of MP3's through SoundJS
2. Using Kinetic Images
3. The difference between URI's and URL's


Resources:
Basic and Best Practices Tutorial
SoundJS Documentation

Read More

Discovering KineticJS


Math Bubbles

A simple game for kids to practice basic addition, subtraction, and multiplication.

Left click on the bubbles with a correct answer:






Right click on the bubbles with an incorrect answer:














Kinetic JS

I was fiddling around with Canvas, attempting to rotate an image via animation (which turned out to be far more complicated than I'd hoped), and I stumbled upon an awesome Canvas framework. Kinetic JS "enables high performance animations" (source) - it automates so many of the tedious functions necessary for every Canvas project. It turned the whole rotating animation into something as simple as drawing a single rectangle with plain Canvas.

Javascript

I ran into a few confusing bugs with my dreadful enemy, Javascript variable scope. I think that this time I really understood the scope and how to avoid running into problems with it in the future, so hopefully this'll be the last of that.

Aside from learning to use Kinetic JS, this was a very education project for me because I pushed myself to use classes instead of isolated functions whenever possible. The first two languages I learned, Scheme and C, don't use classes, so it was hard for me to get into the habit.

Lessons Learned:
1. Basic animation with Kinetic JS
2. Javascript variable scope understanding 
3. Improved Javascript class understanding

Link to Math Bubbles github folder HERE 
(Just a note that the Javascript and HTML are in the same file because I was just playing around and then it sort of turned into an actual project, so I didn't bother separating them.)
Link to Math Bubbles HERE



Read More