wezside

NodeJS on Win localhost

Tue, 10 Jan 2012 22:19 +0200

While working on a proof of concept I thought this would be an ideal opportunity to try out NodeJS. It is a weird thing to fathom, writing server side Javascript but once you’ve spent some time with it, it will start to make more sense. Now I’m not a heavy server side programmer, on the contrary I normally shy away from this sort of thing but it is always good to know how to set up your own site at least. Anyways this is more of a reminder to myself to quickly get up and running should I ever use NodeJS with an M$ platform again. Step 1 Download NodeJS from the site. Extract the MSI installer and execute it. Let it do it’s thing and all is good. Step 2 Open up the command line. Windows Key > Run > type in *cmd* Or Start > Run > type in *cmd* Step 3 We need to install some helper modules which will take care of the scaffolding when we create a new web application. Execute each of these commands one at a time or if you feel confident chain them by appending two && signs. C:> npm install express C:> cd c: C:> mkdir www-nodejs C:> cd www-nodejs The first line simply installs the Express module for NodeJS. The second changes the directory to the root of the filesystem identified by C. Create a new directory and call it www-nodejs. Move the cursor into this newly created directory by executing the last command. Of course the directory can be wherever you want it to be, I simply create it in the root for brevity and ease of use. Step 4 Create the project and files needed. Express will create all the bare necessities. It is important to run the third command as you need to make sure you project has all the NodeJS dependencies it may require. C:> express example-project C:> cd example-project C:> npm install -d C:> node app.js The last command will run the application. Browse to http://localhost:3000 to see your index page. If it isn’t located at localhost:3000 then open up app.js and look for the location. It simply means NodeJS runs on a different port than 3000. Et Voila! HES6PYSQWCHK Resources NodeJS Express

Shift Register 74HC595 with Arduino.

Mon, 19 Dec 2011 17:25 +0200

I stumbled upon shift registers when I was looking at LED matrix cubes on instructables.com. A Shift Register is a type of integrated circuit (IC). In general a Shift Register is a good starting point if you are like me and want to learn more about interfacing hardware. The Arduino itself has its own IC, the ATmega which I won’t get into as ICs are fairly new to me. It occurred to me that I’ve met a similar chip, a multiplexer before and this was during my time at Middlesex University Summer School. After some quick searching the following descriptions were high up on the rankings. Multiplexer The Arduino Playground: “A multiplexer or demultiplexer enables you to expand the in-and outputs on your Arduino board. ” The 4051 Multiplexer has 8 different inputs and allows you to select just one you want to read at a time. Similarly the 4051 as a Demultiplexer allows you to have 8 different outputs and you select just one you want to write to. Shift Register The Shift Register will convert data from serial to parallel or vice versa. An single byte (8 bits) is stored in a Shift Register and each bit is shifted either to the left or to the right one bit at a time. A shift register is a sequential logic circuit that is used for data storage or transfer. Data is shifted every clock cycle. So what’s the difference? From what I understood the biggest difference is a multiplexer is analogue or digital and a shift register is digital. A multiplexer also doesn’t have a limit of the amount of inputs whereas a shift register is restricted to 1 byte, i.e. 8 inputs. The Circuit Shift Registers are relatively inexpensive. I ordered mine from oomlout.co.uk. Follow the tutorial at Arduino Playground to build the circuit as seen in the pictures. Instructables also has a nice tutorial on how to use these integrated circuits (ICs). Resources Integrated Circuit Serial to Parallel Shifting-Out with a 74HC595 Analog Multiplexer/Demultiplexer - 4051

Tesselation: Hexagonal Circle Packing

Thu, 01 Dec 2011 16:59 +0200

A while ago I watched a show on the BBC which was all about geometry in nature. I so happened to read Generative Art by Matt Pearson explaining natural variance in generative code. In the nature program it was shown how outside forces will alter these perfect geometric patterns into more natural occurrences. I recall reading about circle packing from some of the artist/coders in my news feed and went back to my bookmarks. This lead me to exploring this concept further by reading the more obvious sources over at Wikipedia and Wolfram. The problem I have is my Math is very rusty. And so the journey began. Approach To keep it simple I decided to focus on equal sized circles. My first approach was to simply draw a hexagon from triangles and then iterating over each vertex at which point I will draw a circle with a fixed diameter. I got as far as drawing one hexagon but soon thereafter got stuck on producing the next set of hexagons neatly tucked around my initial drawing. Cause I thought that if I could populate the screen with a honeycomb - drawing equal sized circles would be a breeze. I should mention that I didn’t want to draw the hexagons using a grid system but rather have it populate from the centre of the screen outwards. Doesn’t make sense right? I simplify my goal just to make it more complex. Feeling a bit overwhelmed I put pencils down and left it for a few months. It was only when I started getting into Processing more that I thought I needed a challenge and also some techniques for data visualization. Enter bloom.io with Fizz built with ProcessingJS. Right I gotta get this I thought and went back to the drawing board refreshing all the math there is to refresh. I guess the major difference between then and now is, then I was focussed on producing the hexagonal vertices using an equilateral triangle and then drawing a circle at each centre vertex. Whereas instead I should have been focussing on the circumference circle these vertices produce themselves. It’s waayy easier to plot points on a circle, well at least for me as it was. At this point I digressed. I was focussing on this “density” factor which was mentioned in all the resources I read. So the first real attempt focusses on drawing all the circles of hexagon vertices and then drawing a circle around these circles. Circle within a circle. First attempt. Circle Packing within a circle has two approaches. One is applying the optimal density to the inner circles with the outer circle having a fix radius. The second approach which is implemented here is the outer circle’s radius is fixed and the optimal inner circles radius is searched for by reducing a guide circle’s radius gradually. We then test for a collision between the inner circles and stop when this occurs. The result is the optimal packing for circles within a circle if the number of inner circles are 2, 3, 4, 5, 6. 7 and above requires the center to be explored which is not covered in this code. The below code doesn’t show the set up but basically an array of Circles were created in the setup() method. void draw() { background( 22, 22, 22 ); noStroke(); if ( paused ) return; if ( newRadius > 0 ) newRadius -= 1; // Guide circle noFill(); stroke( 255 ); //ellipse( centerX, centerY, newRadius, newRadius ); angle = 45; int len = circles.length; for ( int i = 0; i < len; i++ ) { circles[i].update( newRadius, angle ); circles[i].render(); angle += int( 360 / numCircles ); angle %= 360; } } This was quite cool however if the algorithm had to search for the optimal density that would take ages. So the next attempt used the earlier mentioned approach and simply draw the hexagon vertices on a circle, i.e. draw 6 points on a circle evenly spaced. Honeycomb. The second attempt. Ultimately to achieve my inner to outer approach I was going to need to draw a honeycomb from the centre of the screen outwards. This spawned the idea of repeating the code I’ve done to draw the hexagon and simply to iterate over all the vertices created already, rinse and repeat. The code below shows a recursive approach to try and draw the honeycomb pieces. void initCircles() { circles = new Circle[0]; int numCircles = 1000; float centerX = width * 0.5; float centerY = height * 0.5; recurseCircle( centerX, centerY, 0, 0, 0, 50 ); } void recurseCircle( float centerX, float centerY, int rIndex, int rLevel, float angle, float hexRadius ) { float xpos = centerX - sin( radians( angle )) * hexRadius; float ypos = centerY - cos( radians( angle )) * hexRadius; circles = ( Circle[] ) append( circles, new Circle( xpos, ypos, hexRadius )); angle += 360 / 6; angle %= 360; if ( centerX < 0 && centerX > width ) return; if ( centerY < 0 && centerY > height ) return; if ( rLevel > 400 ) return; int len = circles.length; if ( len % 6 == 0 ) { rLevel++; rIndex++; println( "Hexagonal Packing Created. " + rIndex + " | " + rLevel ); recurseCircle( circles[ rIndex ].xpos, circles[ rIndex ].ypos, rIndex, rLevel, angle, hexRadius ); } else recurseCircle( centerX, centerY, rIndex, rLevel, angle, hexRadius ); } void draw() { background( 22, 22, 22 ); noStroke(); fill( 255, 255, 255, 6 ); int len = circles.length; for ( int i = 0; i < len; i++ ) { circles[i].run(); } } This worked however only for a short period of time. Processing has a 256 level of recursion which meant I was only able to call the honeycomb create method 256 times. A solution would be to break out the method into an Object which is instatiated only if the previous instance has found a duplicate entry. This way the recursion itself is broken up and hopefully Processing will consider the scope of a method call when counting the recursive method invokations. I still think this may not work as I might hit that limit again even if I create multiple instances which calls their own recursive method. Another option which I tried was to optimise the recursive method calls by checking if the circle already exists in the array. This didn’t work because I wasn’t actually removing any recursive calls. In fact I was creating more by telling the program to not add a new circle where there is already one. The image illustrates the recursive problem but also the inefficiencies of the algorithm as circles are drawn on top of each other. The Solution I disembark from the approach of pre-initialising the circle array and instead do it on-the-fly in the draw method. This way I can simply skip a draw if it is in the array already. There is no recursion using this approach which is fine as the draw() method acts as a type of recursive call itself. I simply need to populate the array with circle instances for every draw() call and ignore any duplicates that may popup. If this works then it shows that Processing works as a language which simplifies an approach to concepts that are sometimes difficult to grasp. As a developer I often over complicate things by not breaking it down and the kernel effect of the draw method certainly helped here. But early days - lets see if this solution works? Well actually it does work. It only works with equal sized circles but that was always the intention. I am surprised at how long this takes to fill up a screen and it is quite interesting to see how the simple rule of not creating a honeycomb if it already exist can hinder performance. I’m sure I can improve on this but all in good time. The code below shows an excerpt of the sketch and the solution. void draw() { background( 22, 22, 22 ); noStroke(); fill( 177, 240, 0 ); ellipse( centerX, centerY, hexRadius, hexRadius ); float xpos = centerX - sin( radians( angle )) * hexRadius; float ypos = centerY - cos( radians( angle )) * hexRadius; if (( ypos > 0 && ypos < height ) && ( xpos > 0 && xpos < width )) { if ( hasCircle( xpos, ypos ) == false ) circles = ( Circle[] ) append( circles, new Circle( xpos, ypos, hexRadius )); } count++; angle -= 360 / 6; angle %= 360; // This conditional creates the new center point from which to draw the hexagon if ( count % 6 == 0 ) { angle += 360 / 6; angle %= 360; if ( centerIndex < circles.length - 1 ) centerIndex++; centerX = circles[ centerIndex ].xpos - sin( radians( angle )) * hexRadius; centerY = circles[ centerIndex ].ypos + cos( radians( angle )) * hexRadius; if ( centerY < 0 || centerY > height || centerX < 0 || centerX > width ) { centerX = circles[ centerIndex ].xpos; centerY = circles[ centerIndex ].ypos; } if ( hasCircle( centerX, centerY ) == false ) if (( centerY > 0 || centerY < height ) && ( centerX > 0 || centerX < width )) circles = ( Circle[] ) append( circles, new Circle( centerX, centerY, hexRadius )); } int len = circles.length; for ( int i = 0; i < len; i++ ) { circles[i].run(); } // Make video if ( makeVideo ) saveFrame( filename ); } boolean hasCircle( float xpos, float ypos ) { boolean has = false; for ( int i = 0; i < circles.length; i++ ) { float dx = xpos - circles[i].xpos; float dy = ypos - circles[i].ypos; float d = sqrt( dx*dx + dy*dy ); if ( d < 3 ) { has = true; break; } } return has; } Generative Circle Packing. At this point my head hurt. Time for some play. The video at the end of this post shows what I call “Geometric Smoke”. It is the same circle packing algorithm with some natural variance added to the mix. The size of the circle and opacity changes on a natural variant sine wave.

Bacardi Get Together

Wed, 09 Nov 2011 23:00 +0200

Bacardi Get Together iPad Web App

Cellular Automata: Vichniac Vote

Tue, 08 Nov 2011 21:30 +0200

Built with Processing. This result is from following Matt Pearson’s book called Generative Art. Lovely book explaining all sorts of stuff from basic programming to philosophical ideas. Cellular Automata is a gem for generative code. The simple rules for each cell or agent may seem trivial at first but viewed from a different perspective may produce patterns previously undiscovered. The discrete model rules outlined by various famous scientist, philosophers and other complexity theorist make for interesting visual consumption. The Vichniac Vote established by Gérard Vichniac is very much majority rules. Some may see this as peer pressure where a cell’s neighbours dictate the current trends.

Playbook Analyzer

Mon, 07 Nov 2011 22:20 +0200

The Playbook Report Analyzer is used to visualize the CSV report file which is given by Blackberry for app developers. The stats shown are pretty much what is available. The actual code that drives this was originally used in the IBM Wimbledon 2011 Foyer Screens project. Another great example of how the Wezside Toolkit supports re-usability.