#CanvasExperiments – first experience with canvas

For my university web module, I had to include a canvas experiment. I haven’t really played around with canvas before so this was something new.

And my conclusion: CANVAS IS AMAZING! Seriously.

I wrote a simple game in canvas. The aim is to destroy the ball. As you click on the ball to destroy it, smaller balls appear. Destroying the smallest balls, finishes the game! Play NOW!

I wrote another little script to draw gradients in canvas. This was fun. By clicking on any part of the gradient you can change the page background. I used this script along with the game to change the colours of the balls while the game in in play. Have fun with it!

#Animation – Making a simple equalizer gif in Photoshop

Did you know you can create animations in Photoshop? I mean, you’re not going to create the next Toy Story using just Photoshop, but still, you can create pretty little gifs and much more. I love equalizers. Equalizers are cool and eq animations, even cooler. So I was looking to create a simple equaliser animation of my own, when I came across animation with Photoshop. It will end up looking something like this… equalize_lq

To start of, I created a single tile and filled it with #ff5f44 (the theme colour of the website). You can fill your tiles with any colours you like and also apply pretty patterns / gradients / overlays, etc. I the created the six layers by copying and pasting the tile as follows. Each layer should be an individual Photoshop layer.

Then copy and pasted the layers from 0 to 5 and back down to 1. This is so that when the layers are animated, and the animation looped, it forms a continuous animation by looping through each layer and showing a continuous equalizer.

To animate the layers, click on Window -> Animation and an animation panel appears near the bottom of the interface.

Click on the little icon near the top right of the animation panel and click ‘Make Frames From Layers’ to create all the frames, quickly.

You should now see all the frames. Each frame has a frame duration, in seconds, written under it. Select all the frames and change the duration to 0.1 seconds.

frame_duration

equalizer_save Click File -> Save for Web and Devices, and select GIF as the file format. Set Animation Looping Options to Forever and save your beautiful new equalizer.

You can play around with different colours, gradients, overlays and even images for the equalizer tiles. You can also have a lot more frames, change frame durations, etc. I just needed a simple equalizer for a gif icon. I created a 1794 x 664 gif, which I’m going to resize down to just 81 x 30.

#Twitter – blogger.js stopped working? – Fix

Do you use Twitter’s blogger.js on your site for twitter feeds? Recently, two of the websites I had worked on stopped displaying the Twitter feeds.

After a quick search on Twitter’s API its caused by a change in Twitter URLs…

From:

http://twitter.com/statuses/user_timeline/msingh_5.json?callback=twitterCallback2&count=10

To:

https://api.twitter.com/1/statuses/user_timeline.json?screen_name=msingh_5&callback=twitterCallback2&count=10

A quick and easy fix to your non-functional Twitter feed!

Turn off the lights while watching videos…

While working on a website recently, I was looking for solutions to “turn off the lights” while watching videos. I found two decent solutions. One was based on a jQuery script while the others were a set of browser plugins.

I needed something which didn’t rely on any javascript libraries, worked within the website and was light!

To use this solution simply add the following code to the <head> section of the page and then use the onclick=”lightSwitch();” event on any supported HTML tag and add an empty div with id=”shadow” anywhere on the page!

Vied the demo!

<style>
div#shadow {
        background:#000;
	filter: alpha(opacity=70); /* internet explorer */
	-khtml-opacity: 0.7;      /* khtml, old safari */
	-moz-opacity: 0.7;       /* mozilla, netscape */
	opacity: 0.7;           /* fx, safari, opera */
	z-index:9998;
        width:100%;
       position:fixed;
       top:0;
       left:0;
       height:0px;}

span.light-switch{cursor:pointer; z-index:9999;}
</style>

<script type="text/javascript">
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    ) + "px";
}

function lightSwitch() {
if (document.getElementById('shadow').offsetHeight == 0){
document.getElementById("shadow").style.height = getDocHeight(); }
else { var h = 0 + "px";
document.getElementById("shadow").style.height = h; }}

</script>

#WebsiteUpdate – change the look with just one click!

Plain and minimalist is good. But the ability to add colour to it all, with just one click is even better!

Just added the ability to change the whole colour scheme of my website with just one click. You’ll find a simple dropdown in the footer (at the bottom) of each page. Just choose a style and BAMM, everything changes! Will be adding more styles as I go along.

I used a template style-sheet and then drew up the colour pallets to use. The form sets a session variable that decides which colour pallet to apply. Simple.

CSS styling

Next steps? Change the whole layout, using the same method, instead of just the colours.

[Solution] Facebook Hacker Cup 2012 – Qualification round – Alphabet soup (letters)

Was bored so decided to optimize my solution a little bit more.

You can find the original solution here.

$file_content = explode("\n",(fread(fopen("input.txt",'r'), filesize("input.txt")));

$output = fopen("output.txt", 'w');
$hacker = array('h','a','c','k','e','r','u','p');

for ($j = 1; $j <= intval($file_content[0]); $j++){
for ($zzz = 0; $zzz < count($hacker); $zzz++){
$freq[$hacker[$zzz]] = 0;
}
	$word = strtolower(str_replace(" ","",$file_content[$j]));
	$len = strlen($word);
		for ($i=0; $i<$len; $i++) {
		  $letter = $word[$i];
		  if (in_array($letter,$hacker)){
		     if ($letter =="c") {$freq[$letter] +=  0.5;}
		     else {$freq[$letter]++;}
		}
		}
	$stringData = "Case #" . $j . ": " . intval(min($freq)) . "\n";
	fwrite($output, $stringData);
}
fclose($output);