I’ve been working on another project that needed a particle generator, thus this demonstration was born.

There are several presets I’ve included, but you can easily generate new types of effects by playing around with the available variables on the presets.

The demo does not give you access to everything so in order to create more fine tuned options, here’s all the currently available variables:

{
  shape: 'circle',		  // square or circle
  velocity: new Vector({y: -1}),  // movement vector; only y is used
  xVariance: 0,			  // +/- start x position (random)
  yVariance: 0,			  // +/- start y position (random)
  spawnSpeed: 25,		  // # particles spawned per cycle
  generations: 100000,		  // # of cycles to run for
  maxParticles: 500,		  // max # of particles allowed on screen
  size: 20,			  // size of particles
  sizeVariance: 5,		  // +/- size of particles (random)
  life: 30,			  // # of cycles a particle can live
  lifeVariance: 10,    		  // +/- lifetime of particle (random)
  direction: 0,			  // initial start direction
  directionVariance: 15,          // +/- direction (random)
  color: '#fff',		  // can be hex code or rgb
  opacity: 1,			  // particle opacity
  onDraw: function(p) {
    // onDraw passes in the current particle and is called before each
    // particle is displayed on the screen. This function is used in 
    // several of the presets to adjust the color or opacity given
    // the particle's current age and lifespan.
  }
}

If you are using Firefox and Firebug, you can create your own objects and update the particle generator by using particles.update(myObject); via the command line.

As usual, HTML5 and Canvas is not currently supported by IE7/IE8, so you’ll need to use another browser in order for this to work. The demo has been tested in Firefox, Safari and Chrome, but I highly recommend using Chrome for the demo as it seems to run the most efficient.

On to the demo! Or alternatively, view the source here.

I’ve been finding myself becoming more interested in what HTML5 can do. As I see it HTML5 stands to be a potential replacement for flash, in addition to the features and interactivity that are made available by various javascript frameworks out there.

A good starting point would be to start off with something simple, i.e. a clock. Here’s a sample project I threw together to help make myself more familiar with HTML5’s canvas.

The clock you see on the left is written completely in javascript and takes advantage of HTML5 and the canvas element — no flash necessary.

If you see a blank clock face with no hands, that means that your browser does not support HTML5. You will need to be using the latest version of Chrome, Firefox, Opera or Safari in order for the clock to work. IE does not currently natively support the canvas element.

There are several good canvas tutorials out there so please check those if you want a more in-depth introduction to HTML5’s canvas element.

In order to use this clock, you’ll need to setup your canvas element:

<canvas id="jclock" height="125" width="125">
  Content or message to display if the browser does not support Canvas/HTML5.
</canvas>

Initializing the clock:

$(window).load(function() {
  new jClock('my-clock-face-image.png', $('#jclock').get(0));
});

You can also pass in additional options to change items such as the hand colors, or image size. Here’s the defaults as defined in the plugin:

// override default options:
// i.e. new jClock('image.png', $('#canvas').get(0), {shadow: false});
 
jClock.defaults = {   
  height: 125,       // default height
  width: 125,        // default width
  secondHand: true,  // show the second hand
  shadow: true,      // display shadows across all hands
  second: {          // second hand style options
    color: '#f00',
    width: 2,
    start: -10,
    end: 35,
    alpha: 1
  },
  minute: {          // minute hand style options
    color: '#fff',
    width: 3,
    start: -7,
    end: 30,
    alpha: 1
  },
  hour: {            // hour hand style options
    color: '#fff',
    width: 4,
    start: -7,
    end: 20,
    alpha: 1
  }     
};

Feel free to download the source code and play around with it, or ask any questions you may have in the comments below.

Download jclock.js (2.4k)

I was more than happy to put together this wordpress theme for Guy Walker and wanted a “dirty” feel to go along with the name “planterguy”. Theme was built from the ground up and includes several custom widgets tuned for Guy Walker’s needs.

Database Conversion Table

Truncate Wordpress Tables

First, I needed to remove any data that is currently in certain wordpress tables so I could work with a fresh slate.

Note: By default when you install wordpress all tables are prefixed with wp_ unless you changed it to something else. The below queries will need to be modified if you used anything else other than wp_.

TRUNCATE TABLE wp_comments;
TRUNCATE TABLE wp_postmeta;
TRUNCATE TABLE wp_posts;
TRUNCATE TABLE wp_term_relationships;
TRUNCATE TABLE wp_term_taxonomy;
TRUNCATE TABLE wp_terms;

Import Taxonomy Terms

The next sets of queries imports taxonomy terms.

Note: Table names pre-pended with drupal. needs to be the actual name of your drupal database. You will need to change this to whatever you have your drupal database named.

INSERT INTO wp_terms (term_id, name, slug, term_group)
  SELECT d.tid, d.name, REPLACE(LOWER(d.name), ' ', '-'), 0
  FROM drupal.term_data d
  INNER JOIN drupal.term_hierarchy h
  USING(tid);

By default, Wordpress has several taxonomy types available; categories, post_tag, and link_category. In my Drupal instance I used taxonomy primarily as tags, but you may have a different need. You may need to modify the 3rd line in the below query depending on how you want taxonomies imported:

• Categories: category
• Link Categories: link_category
• Post Tags: post_tag

INSERT INTO wp_term_taxonomy (term_taxonomy_id, term_id, taxonomy, 
                              description, parent)
  SELECT d.tid, d.tid, 'post_tag', d.description, h.parent
  FROM drupal.term_data d
  INNER JOIN drupal.term_hierarchy h
  USING(tid);

Import Post Content

Drupal allows for custom post types, while as of Wordpress 2.9x, custom post types are only available via plugins. You can use the below query unmodified and it will convert all stories to posts, and everything else will transfer over as is. If you need to convert additional post types, you can add additional case statements.

Example:
WHEN 'book' THEN 'post'

I also adjusted the query so that ‘post_date_gmt’ would be populated correctly based on my GMT offset of -6:00 (Central Time). If you are in a different timezone you will need to adjust FROM_UNIXTIME(created+21600) to subtract or add correctly based on your location.

INSERT INTO
    wp_posts (id, post_date, post_date_gmt, post_content, post_title,
    post_excerpt, post_name, post_type, post_modified)
SELECT DISTINCT
    n.nid, FROM_UNIXTIME(created), 
    FROM_UNIXTIME(created+21600), body, n.title, teaser, LOWER(n.title),
    (CASE n.type
      WHEN 'story' THEN 'post'
      ELSE n.type
    END) AS type,
    FROM_UNIXTIME(changed)
FROM drupal.node n, drupal.node_revisions r
WHERE n.vid = r.vid;

Import Post and Taxonomy Relationships

INSERT INTO wp_term_relationships (object_id, term_taxonomy_id)
SELECT nid, tid FROM drupal.term_node;

Category Count Updating

UPDATE wp_term_taxonomy tt
  SET count = (
    SELECT COUNT(tr.object_id)
    FROM wp_term_relationships tr
    WHERE tr.term_taxonomy_id = tt.term_taxonomy_id
  );

Import Comments

INSERT INTO wp_comments (comment_post_ID, comment_date, 
            comment_content, comment_parent, comment_author, 
            comment_author_email, comment_author_url, comment_approved)
  SELECT nid, FROM_UNIXTIME(timestamp), comment, thread, 
              name, mail, homepage, STATUS 
  FROM drupal.comments;

Update Comment Count

UPDATE wp_posts 
  SET comment_count = (SELECT COUNT(comment_post_id) 
  FROM wp_comments 
  WHERE wp_posts.id = wp_comments.comment_post_id);

Update Post Slugs

Drupal’s URL aliases is equivalent to Wordpress’ permalinks. Drupal has a much more aggressive title sanitation than Wordpress. I wanted the ability to keep my titles the same for SEO reasons when migrating over to Wordpress.

In order to keep my old titles, I need to hook into Wordpress’ title sanitation with similar rules to Drupal. The below code will need to be placed somewhere in the functions.php file of your current theme.

add_filter('sanitize_title', 'my_sanitize_title');
function my_sanitize_title($title) {
  $title = preg_replace('/\b(a|an|as|at|before|but|by|for|from|is|in|into|like|of|off|on|onto|per|since|than|the|this|that|to|up|via|with)\b/i', '', $title);
  $title = preg_replace('/-+/', '-', $title);
  $title = trim($title, '-');
  return $title;
}

You will need to save the below code to a file i.e. “fix-slugs.php” in your main Wordpress directory and run it through your browser.

< ?php
 
  require_once('wp-load.php');
 
  $posts = $wpdb->get_results(
    "SELECT ID, post_title, post_name FROM $wpdb->posts"
  );
 
  $count = 0;
  $ignored = 0;
  $errors = 0;
  foreach($posts as $post) {
    if(strcmp($slug = sanitize_title($post->post_title), $post->post_name) !== 0) {
      $wpdb->show_errors();
      if(($result = $wpdb->query("UPDATE $wpdb->posts SET post_name='$slug' WHERE ID=$post->ID")) === false) {
        $errors++;
      } elseif($result === 0) {
        $ignore++;
      } else {
        $count++;
      }
    } else {
       $ignored++;
    }
  }
 
  echo "<strong>$count post slug(s) sanitized.</strong><br />";
  echo "$ignored post(s) ignored.<br />";
  echo "$errors error(s).<br />";

If you were following along with this tutorial, I’ve made a few changes based on my Drupal setup using Wordpress database description as a reference when I ran into issues. There may be some additional steps to be completed if you uploaded images through Drupal’s interface, but the above queries were able to successfully migrate my data from Drupal to Wordpress.

One of my big reasons for rolling over to a new design was the limitations my old site was giving me. I wanted to have a new fresher design in addition to having more flexibility with the content on the site. Now with the addition of Wordpress, I can easily outline new projects or post about some dramatic revolution in web design. In addition the new site will help me give a better showcase for my skills and abilities for any future clients and/or employers.

You are not seeing the final version of this roll-out, but features will slowly be added as I get time. Please feel free to post a comment if you notice any issues, or contact me if you have any opportunities you would like to discuss.