Storing an IP address with MYSQL

If you find yourself having to store IP addresses in a database (Let’s just talk about IPv4 addresses for now), the best way to do it is to convert the IP address to an integer. After all, an IP address is nothing more than a 256-based integer with 4 places ( Or a binary based integer with 32 places ). Which is to say it’s a 2564 length ( Or 232 ). Doing the math you’ll see there’s 4,294,967,296 possible IPv4 addresses. That’s 4-billion+ with a B. Give or take some loopback and special reserved blocks of IP addresses.

Most languages have a built-in function to convert IP addresses to integers, and more specifically long integers. For instance, MYSQL has the functions INET_ATON() and INET_NOTA() which allow conversion of Integers to IP addresses and vice versa respectively. In PHP The functions are ip2long() and long2ip(), and the long is necessary to note here. The integer is potentially so large that you’ll have to take special precautions with it. Particularly on the MYSQL side. If storing an IP address as an integer, make sure that one of two things is true in your MYSQL database where you’re storing it (And this probably applies to other SQL iterations as well). The field will need to at least be a BIGINT or an UNSIGNED INT. If you use a SIGNED INT value, you’ll only be able to capture about half of the IP addresses you’re looking for. All other IP addresses above 127.255.255.255 will max out and be stored as this value. This is a lesson that is not fun to learn the hard way.

This is of course preferable to storing the IP address as a VARCHAR where it will take up significantly more bytes of space, and if you have to do any numerical operations on it in your code you’ll have to do some extra operations on it. Treating it as a number for storage and operations is probably preferable.

Now if also needing to store IPv6 addresses, you run into a potentially more complicated scenario. In IPv6 2128 bits are now possible. In other words: 340,282,366,920,938,463,463,374,607,431,768,211,456 addresses. I won’t begin to wonder what letter that number starts with. If needing to store both IPv6 and IPv4, a VARBINARY(16) field should be adequate. The BINARY or VARBINARY fields in MYSQL will allow you to store a significantly large binary digit in a small amount of space using characters.

What’s more MYSQL and I’m sure several other languages allows for storing IPv6 addresses numerically with built-in functions INET6_ATON() and INET6_NOTA().

Procedurally Generated Maze in Javascript

A maze in Javascript

A friend asked me if I could create an auto-generated maze for use in a project down the road. “CAN I!?” I asked pretty much 100% sincerely.  So let’s find out.

Planning:
There’s always more than one way to skin a cat. The first thing I had decided was I’d make my maze in JS/Canvas. The main reason being that it’s always so easy to get up and running with Javascript. If you’re doing something in PHP, Python, Ruby, or any variation of C or Java, you’re going to need an interpreter or compiler minimum to get started.

With Javascript you can always just start plugging away at the code and run it in a web browser. It’s a no fuss solution to just getting something up and running. So this was my go-to for this project.

HTML:

In HTML make sure you just have something along the following lines:
<canvas id='maze' height="800" width="800"></canvas>

A quick aside about setting the height / width on the canvas. If you use the CSS height / width properties to set the dimensions for you canvas you’ll almost inevitably get scaling and stretching. If you set them inline in the <canvas> tag you’ll get the dimensions you’re looking for. Percentages also are not a good idea here as pixel precise functionality won’t work and the scaling would still be a problem.

First let’s start with initializing the canvas in JS. Put this somewhere else in your HTML page:

<script>
var ctx = document.getElementById('maze').getContext('2d');
ctx.width = 800; // Set the width of the 2d canvas
ctx.height = 800; // Set the height of the 2d canvas
</script>

In the example above ‘maze’ is the ID of your canvas, and the ‘ctx’ object/variable name can be anything you want. The 2d context is used to draw simple shapes to the canvas. You could also draw a bitmap or webgl context, but the 2d’s adequate for what I’m doing here.

The first thing I’d think is to setup a box or a square. This square will be a prototype of my maze ’tile’. So yo dawg, let’s put a square in our square and see what that looks like.

Add this inside your script tags:
ctx.fillStyle = ‘rgb(0,0,0)’; // Sets the color to black
ctx.strokeRect(0, 0, 16, 16); // Draws a box at coordinates (0, 0) on the canvas with a height and width of 16px.

step-1

You should now see a 16px by 16px box. This accomplishes what we’re looking for, but it can’t really be extended into the maze. You could make a grid using shapes like these. But our tiles need to have dead ends and corners. By definition we need to be able to not stroke certain lines of our box. For doing this the path / line methods make much more sense.


ctx.fillStyle = 'rgb(0,0,0)'; // Sets the color to black
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,16);
ctx.lineTo(16,16);
ctx.stroke();

step-2

Here we’ve done something similar, except we’ve drawn two lines. One is down 16 pixels, and the other is right 16 more. This produces a ‘corner’ effect. Specifically a lower left corner.

Now here’s the tricky part. Believe it or not, in using the line tool here. We already have most of what we need to algorithmically create a maze. Hey, there’s no guarantee it will have openings in the correct place, or look like the greatest maze ever invented. But let’s see what we can do.

If we take each tile to have a line in between the next tile, as a ‘shared wall’, there’s no real need to draw this wall again. What this means is we can actually only draw TWO walls of our tiles, and basically get away with creating walls for multiple tiles. We can create a pretty gnarly maze by going through each ’tile’ and adding only an upper and left wall randomly and doing the same to the next tile. First let’s see what this looks like with no randomization. We should see a grid.


<script>
var ctx = document.getElementById('maze').getContext('2d');
ctx.width = 800;
ctx.height = 800;
var tileSize = 16;
ctx.fillStyle = 'rgb(0,0,0)'; // Sets the color to black
for( x = 0; x < ctx.width / tileSize; x++ ) { // for as many tileSize-length pixel lines it takes to get across the width
for( y = 0; y < ctx.height / tileSize; y++ ) { // for as many tileSize=length pixel lines it takes to get across the height
ctx.beginPath();
ctx.moveTo( x * tileSize , ( y + 1 ) * tileSize ); // Move line down by the length of our tile
ctx.lineTo( x * tileSize , y * tileSize ); // Draw a line up the length of the tile
ctx.lineTo( ( x + 1) * tileSize , y * tileSize ); // Draw a line right the length of the tile
ctx.stroke(); // Add the color from fillStyle
}
}
</script>

This gives us a grid, as expected. This code is essentially moving down 16px, drawing a line up by 16px, then, drawing a line right by 16px. THEN done for each tiled segment of the graph. Doing this will give us this grid effect.

Two for loops are required to achieve this effect. I’m aptly naming the variables of these loops ‘x’ and ‘y’. By comparing the x and y values to the value of the width divided by the tilesize variable. And also using that tilesize variable in all of our line operations, we’ve made it so not only do these operations automatically fill the canvas exactly, but also so that you can change the ’tile-size’ to any pixel length. You can also change the width/height the canvas in the same way. 16 and 800 are used intentionally as 800 is divisible by 16 evenly. But by only declaring the constant of the tileSize to 16 pixels ONCE we allow also to only change it in one place.

Now is the tricky part. Instead of drawing the upper and left lines all the time. What if we do it…randomly? Fortunately, Javascript has a built in function to allow us to produce a random number: Math.random().

Math.random() produces a random floating point value between 0 and 1. This allows us to produce some “50% of the time”-type behavior


<script>
var ctx = document.getElementById('maze').getContext('2d');
ctx.width = 800;
ctx.height = 800;
var tileSize = 16;

ctx.fillStyle = ‘rgb(0,0,0)’; // Sets the color to black

for( x = 0; x < ctx.width / tileSize; x++ ) {
for( y = 0; y < ctx.height / tileSize; y++ ) {
ctx.beginPath();
ctx.moveTo( x * tileSize , ( y + 1 ) * tileSize );

if( Math.random() > 0.5 ) {
ctx.lineTo( x * tileSize , y * tileSize ); // Only draw this line half the time
}
else {
ctx.moveTo( x * tileSize , y * tileSize ); // If we DON’T draw it, just move over the same amount of space
// If we don’t do this a diagonal line will be drawn from the previous point to the next
// Simulate the actual drawing, but DON’T draw it.
}

if( Math.random() > 0.5 ) {
ctx.lineTo( ( x + 1) * tileSize , y * tileSize ); // Again only half the time.
}
ctx.stroke();
}
}
</script>

What happens if you don’t use the moveTo in the else block:
step-3

If you do:
step-4

There you have it. A procedurally generated maze. This will change on every refresh. It’s not perfect, it probably has too many openings and several closed off spaces. But it’s starting to look like what you’d usually recognize as a maze. This is just part one. Part two to come soon.

Here’s a link to it in action. Save the source if you want a copy for yourself to tool around with:
A MAZE ING.

Posting Again

After a pretty long hiatus, I’m starting to post again.

Here’s what I’ve been working on recently:
Http://findthatprice.com – I’ve migrated this site from being SQLITE based to MYSQL. This migration took about two weeks of my free time.

Find That Price was using SQLITE as a stopgap measure to make sure price data was being updated daily for each UPC. Something that may be worth noting is that this website uses a unique mix of normalized and flattened data which is tailored to its needs. This is what mostly halted that process.

This was also a pretty necessary step. I intend to shift hosting over to Amazon Web Services in the near future ( the cost is marginal compared to my current host, and the freedom paired with the up-time makes it a solid investment. )

Additionally I’ve taken a PHP library which dynamically generates a graph from the UPC price data and replaced it with D3. D3, Data Driven Documents, is a Javascript library used for dynamically building visual aides around data sets.  Very friendly to those who are already familiar with Jquery.

While I’m passing some of the hard work off to the client, there’s an end-game here where I’m ultimately trying to enhance the interactivity of this chart, allowing zoom on days and details. Among other things.

Additionally I’ve started logging all processes of the site pretty extensively. I also rewrote the majority of the site and engine and made the whole thing a little more MVC friendly. Also compressed the code in more than half and simplified it pretty significantly.

Late updates have mostly been in response to my new Web Developer position. I’ve been trying to run some side businesses and haven’t dropped any of my side projects, but a lot of them have been taking some extended breaks. Including this, Find That Price, and a ton of other web apps I’m still publishing.

I’m finding the energy and time to get back into producing content and as long as I am developing 24/7 I might as well tap into it to produce something valuable.

Look forward to some video tutorials and text write-ups of some of the more complicated things I’ve come up against (Getting Oauth2 right immediately springs to mind), as well as some reviews of a ton of services I’ve been using.

Looking to hire some developers off Odesk, and want to document how that experience turns out, I have a bit bucket going for all my private Git repo’s (but wouldn’t mind writing up a comparison to setting up your own Git server, something I also plan to do on my AWS server.) Github isn’t entering the equation for some of my more serious projects, because of the requirements to pay for a private repo.

Developing multiple web apps at once, inside and outside of work. Have affiliate and marketing setups with major retailers, and I’m making an Automotive POST REST API.

Looking to publish the Find That Price barcode scanner in the Android App store. One of the next things I’ll be focusing on.

Basically lots of stuff to look forward to. Keep me on the radar!