Quantum Fractal

Wednesday, February 20, 2013

Dynamically Rescaling Image Maps!

This was created for a square image. For a rectangular image, you'll want to scale every other coordinate accordingly. This script dynamically rescales the image AND the image MAP (area tag). In addition, it centers the image horizontally and vertically. The image map can be easily created in GIMP (Filters -> Web -> Image Map). Then, just save your polygon coordinates into the respective a[*].coords position. If you use rects, change the shape type. If it doesn't quite line up (shifted a bit top-left), add something like 4 to all of the coordinates for that polygon. Also, note that it doesn't need jquery!

<html>
<head>
<style>

body {background-color: black; overflow:hidden; padding: 0px; margin:0px;}
map { horizontal-align: center;}
img {position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    margin: auto;}

</style>
</head>
<body>

<img src="PathTo/YourImage.jpgORpngOR..." width="1000" height="1000" border="0" usemap="#map">

<map name="map">

</map>

<script type="text/javascript">

function fixMapAndScale(){

  var img = document.getElementsByTagName("img")[0];

  var width = window.innerWidth;
  var height = window.innerHeight;
  var scale;

  if ( width>height ){ scale = height; }
  else { scale=width; }

  img.height = scale;
  img.width = scale;

  var a = [];

//This is the StackOverflow logo as seen on http://quantumfractal.info
  a[0] = {shape:"'poly'", coords:[29,10,126,10,129,72,103,90,62,144,21,160,11,101,44,81,32,72], href:"http://YourURL.com/whatever", title:"StackOverflow"}


  for(i=0; i<a.length; i++){
    for(j=0; j<a[i].coords.length; j++){
      a[i].coords[j] = Math.floor(a[i].coords[j]*(scale/1000));
    } // You'd change 1000 to whatever the dimensions of your square are.
  } // Or, you'd augment this loop for rectangle...

  var str="";
  for(i=0; i<a.length; i++){
    str += "<area id='test' shape=" + a[i].shape + " coords="+ a[i].coords.join(",") + " href=" + a[i].href+" title="+ a[i].title+">";
  }

  document.getElementsByTagName("map")[0].innerHTML = str;
}
fixMapAndScale();
window.onresize=function(){fixMapAndScale();};

</script>
</body>
</html>

Thursday, December 20, 2012

A Variety of KineticJS MapMaker Attempts

1.0, 1.2, 1.10, 2, 3.1, 3, Remake

HotKeys:
w,a,s,d tend to increase the size of the selection

1,2,3,4 tend to change the layer or the source image (Remake)

scrollwheel changes the zoom in a similar way to google maps.

There were serious issues with a large number of kineticJS objects having event listeners. I decided the my next one will be with pure canvas.

Monday, March 19, 2012

Space Sprite Demo3 with QImage and QSquiggle

WASD or arrow keys to move!
Link to Sprite Space Demo
Link to the sprite

Friday, March 16, 2012

Sprite Demo with Collisions

WASD or arrow keys to move!
Link to Sprite Demo with Collisions
Link to Original Post

Wednesday, March 14, 2012

QImage-Sprite-Demo v3.8.3

The new configs from QImage allows us to declare the source images position and size. The input values are stored to an array and only changed on keydown and keyup. The animation frame moves the sprite according to the row and input keys. The walk cycle for the sprite I used had the default stance in the middle column. The code is pretty thoroughly commented, enjoy! wasd and arrow keys to move!
Link to QImage Sprite Demo
Link to Original Post

Tuesday, March 13, 2012

QImage - Cropping for Kinetic.Image

Kinetic.Image needed to be able to crop.
Link to QImage Demo
Link to Original Post

Saturday, March 3, 2012

Graphing Puzzle using KineticJS v3.8.2

Order the text fields along the y axis.
Use the console.log if you're stuck and the comments if you're really stuck.
Link to Graphing Puzzle