My Programming Tricks

Caveman Blogger

Here is a little fun thing to do in the lab: changing colors. If you have a little javascript project and you want to make it fun, this little color morphing script can come in handy. It opens up the door to understanding how the color components on your screen works. The combination of red, green and blue to make up a color you see on a screen can be shown in this little experiment. Here are the codes:

<html>
<head>
<script>

var runTimer;
var rCom, gCom, bCom; // Red, Green, Blue component
var rComN, gComN, bComN; // Red, Green, Blue step/speed
var rComDir, gComDir, bComDir; // Red, Green, Blue direction (value going up/down)
var tRCom, tGCom, tBCom; // target Red, Green, Blue component
var morphSpeed = 100; // 100ms interval between changes
var started = 0;
var currentRGB;

function runColorBar() {

if (!started) {
  rCom = Math.floor((Math.random()*256)).toString(16); // random color start for red component
  gCom = Math.floor((Math.random()*256)).toString(16); // you can also fix it to something like "AA" in hex or 170 in decimal
  bCom = Math.floor((Math.random()*256)).toString(16);
  rComDir = Math.floor((Math.random()*1))+1; // random direction - increasing or decreasing
  gComDir = Math.floor((Math.random()*1))+1;
  bComDir = Math.floor((Math.random()*1))+1;
  rComN = Math.floor((Math.random()*5))+1; // random increasing/decreasing speed
  gComN = Math.floor((Math.random()*5))+1;
  bComN = Math.floor((Math.random()*5))+1;
  runTimer = setInterval("changeBarColor()",morphSpeed);
  started = 1;
}

}

function stopColorBar() {

if (started) {
  clearInterval(runTimer);
  started = 0;
}

}

function changeBarColor() {

tRCom = parseInt(rCom, 16);
rComDir == 1?tRCom+=rComN:tRCom-=rComN; // decide to increase or decrease color value

tGCom = parseInt(gCom, 16);
gComDir == 1?tGCom+=gComN:tGCom-=gComN;

tBCom = parseInt(bCom, 16);
bComDir == 1?tBCom+=bComN:tBCom-=bComN;

if (tRCom >= 255) { // if overshoot, change direction
  rComDir = 2;
  tRCom = 255;
}
else if (tRCom <= 0) {
  rComDir = 1;
  tRCom = 0;
}
if (tGCom >= 255) {
  gComDir = 2;
  tGCom = 255;
}
else if (tGCom <= 0) {
  gComDir = 1;
  tGCom = 0;
}
if (tBCom >= 255) {
  bComDir = 2;
  tBCom = 255;
}
else if (tBCom <= 0) {
  bComDir = 1;
  tBCom = 0;
}

rCom = tRCom.toString(16);
gCom = tGCom.toString(16);
bCom = tBCom.toString(16);

if (rCom.length == 1) { rCom = "0"+rCom; } // every color component requires at least two digits
if (gCom.length == 1) { gCom = "0"+gCom; }
if (bCom.length == 1) { bCom = "0"+bCom; }

currentRGB = "#"+rCom+gCom+bCom;
document.getElementById('colorBar').style.backgroundColor = currentRGB;
document.getElementById('cvalue').innerHTML = currentRGB;

}

</script>

<body onload="runColorBar()"> <table width=500 align=center valign=top><tr><td width=500 height=20 align=center id=colorBar>Color Bar</td></tr><tr><td align=center><br><a href="javascript:stopColorBar()">Stop Morphing</a> <a href="javascript:runColorBar()">Run Color Bar</a><br><br>Current Color Value: <span id=cvalue></span></td></table>

</body>
</html>

Of course, if you understand all the mechanics in the codes, you can reset the values to something of your preference such as the color at the beginning, the speed of color morphing for each color component and so forth. I hope you enjoy this little experiment in this Javascript lab and I'll see you in the coming experiments!

Caveman Blogger

Why do we need to use Javascript to generate Google map dynamically? The answer is speed. If we tell our browser to load everything at the same time, everything will be loaded slower compared to letting browser to complete the important ones before the non-critical one such as the Google map.

I've done some testing and it shows that Google is slowing down the loading of other items on a web page. I compare the loading time of a web page with and without Google map. The one with concurrent Google map loading is showing up images much slower than the one without.

So I've decided to use Javascript to load the Google map dynamically only after all the images are loaded on a web page.

Here are the example for the Google map to be loaded only after the web page body is loaded:

<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
</head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(40.689452, -74.044521);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
  center: new google.maps.LatLng(40.689452, -74.044521),
  zoom: 11,
  width: 500,
  height: 400,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
  var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
  position: myLatlng,   map: map,
  title: 'Statue of Liberty'
});
google.maps.event.addDomListener(map_canvas, 'load', initialize);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Of course, you need to place the initialize() function to the location that you think it is the best time to load the Google map. For this case, I choose to place it in the onload listener in the BODY tag. You can change the size and zoom level according to your need.

If you want to load only after certain image is loaded, you can check out my tutorial on how to use Javascript to check whether an image is loaded here.

My Programming Tricks

Labels

Monday, November 17, 2014

Javascript Color Morphing

Tuesday, November 11, 2014

Auto Copyright Year Javascript

Monday, November 10, 2014

Create Dynamic Google Map using Javascript