HTML5 Canvas Bubble Demo V2

Posted on by
Reply

The HTML Canvas Bubble Demo got a lot of attention and I received a lot of hits from that. Since last year, I used it on a WP theme and updated it to make it more functional.

So here is a link to the NEW demo.


Here is a link to download all the files, including the demo

When using it on your own site, create a DOM element with the ID “canvasBubbles”, include the “bubbles.js” script :

Basic Usage

1
2
3
<script>
   bubblesMain();
</script>

Custom Options (Example)

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    bubblesMain(new Object({
        type : 'radial',
        revolve : 'center',
        minSpeed : 100,
        maxSpeed : 500,
        minSize : 50,
        maxSize : 150,
        num : 100,
        colors : new Array('#FF0000','#FFFFFF','#BBBBBB')
    }));
</script>
  • type (linear,radial)
  • revolve (topLeft, topRight, bottomLeft, bottomRight) This is used when “type” is radial
  • opacity (any floating number between 0 and 1)
  • minSpeed (any number)
  • maxSpeed (any number)
  • minSize (any number)
  • maxSize (any number)
  • num (number of bubbles)
  • colors (an array of 6 digit HEX colors)

Comparing strings with DOM elements

Posted on by
Reply

This problem confused me for a bit and may be of some help to someone in the future.  What I was trying to do was compare a javascript string with an existing DOM element (Don’t ask why).

Anyways, normal text is no problem, the problem is that when HTML tags are entered into the DOM it is modified to work properly. Inserting a table or input element gets modified in its own way.

  • Tables get tbody tags if none exist
  • input buttons get organized by value,onclick,type (only ones tested)

Therefore matching the HTML string with the DOM after it’s changed will tell you they aren’t equal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function compare2Strings(str,str2){
    alert('string 1 : '+str+', string 2 : '+str2);

    if(str.length != str2.length){
        alert('different lengths :'+str.length+'/'+str2.length);
    }
   
    for(i=0;i<str.length;i++){
            if(str.length < i || str2.length < i){
                return false;
            }

        if(str.charAt(i) != str2.charAt(i)){
            alert('character at position '+i+' is different :'+str.charAt(i)+'/'+str2.charAt(i));
        }
    }
}

This function is pretty crude, but showed me what was wrong. Hopefully if this is what you are looking for, it helps you with your project.

Happy Coding!

HTML5 Canvas Transform

Posted on by
Reply

I was messing around with HTML5 Canvas transform and was having trouble getting the right values that I wanted.

I decided to build a page that allowed me to test how to manipulate images on the fly. It allows linking to multiple images and transforming it how you want.
Ensure that there is an image source and that there is a value in each box for the image to appear.

Check it out, and if you have any questions or suggestions please feel free to comment.

HTML5 Canvas transform

SearchNorthumberland 2011 results

Posted on by
Reply

8 Days until the end of the year and SearchNorthumberland.com has indexed 83028 web pages. At this point it seems to be doing about 1400 web pages a day.
Some things were completed, some things weren’t. I’ve compiled a list of what I said it would do and what hasn’t been done.

  • Analyze web pages
    At this point there is no fast way of doing it, not with the amount of computers and time and power it takes. I think what I can do in the New Year is have it slowly check a webpage bit by bit.

The Notify! system needs a revamp, it is working but it needs some more work put into it.

I’m working on it today to get some stuff cleaned up so it can work hard over the holidays. This will probably be my last post of the year, so Happy Holidays and stay safe!

Inner Page Navigation

Posted on by
Reply

Yesterday afternoon I created an inner page scroller to the right side of the page (if you can’t see it, it’s because it requires a minimum screen resolution of I think 1260px).
I had seen it on many sites and always thought it was pretty cool stuff.

I know that there is a jQuery version floating around somewhere but knew that it wouldn’t be too difficult to whip together. I also think I’ve pretty much eliminated jQuery from the main website altogether, therefore it didn’t seem justifiable to load jQuery for something that isn’t actually required to make the website work.

This afternoon I wondered how hard it would be to add it to the blog. I have never messed around with WordPress plugins so I knew that there would be some reading involved. A couple Google searches and the plugin worked.

I found it very easy to get going (although the plugin is considered basic compared to some others out there). For those that know there stuff, you’ll find WordPress plugins pretty easy to create. The best part was that I didn’t have to edit the original javascript file, it was built to easily work on just about anything.

I’m not going to post the code up (right now) and if you do get it by any other means, at least give some credit.

UPDATE : This was deleted accidentally with the update of the site