tinychat-api

Tinychat API

This now grabs Tinychat API and displays the users/rooms details.

Matrix

Matrix Script

This is a Matrix display wrote in C++.(The movie)


HTML5 Canvas Experiments

HTML5 has brought some exciting new advantages to the web development universe.
The canvas feature allows you to render graphics that are powered by Javascript, so it'll work on almost every device.

What I've got below are a number of canvas effects that are sure to blow your mind.

The Blob

The Blob

Double click/tap to split/drag/merge the blob.

drawing

Drawing Pad

This has various pen types and you can select any colour.

fire

Fire

Hold on the screen/mouse and move around to create fire.

illusions

Illusions

Drag around the screen to create your masterpiece.

matrix

The Matrix Code

This is the Matrix wrote in JavaScript, straight from the movie.

plasma

Plasma/Melting

Move the point side to side to create raining plasma.

snake

Skinny Snake

Move your pointer around the screen, This has pastel colours.

spinicle

Spinicle

Hold the screen and create numerous spinicles.

water

Water

hold or drag or type to create ripples. Enjoy.

watertext

Water Text

Type anything then press enter and watch it splash!

Converter

This will convert plain text to ASCII, Binary and Hex.








Want background colour rotation?

There are multiple ways of doing this, but today I will show you 3 ways how to do it in JavaScript using the jQuery library.


* Method 1, Create yourself a webpage in html, for example: index.html
Using jQuery 3.1.1, so add this to your head section https://code.jquery.com/jquery-3.1.1.min.js
Now copy the script below and put it in between some script tags,
This will rotate colours from white to black at 1 second intervals,
It's set for the body to change colour, so any body colour with rotate colours, it also include transparency so you can have between 0.00 - 1.00,
You can also edit the colour ranges it uses, any number between 0 - 255.

var rgba = function() { return 'rgba(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + (Math.random().toPrecision(1)) + ')'; }; setInterval(function() { $('body').css('background-color',rgba()); },1000);

Here is a link with the script for you.

* Method 2 of changing a background/element colour.
Simply copy the code below and paste on to your webpage.
This also uses a button to change the colour.


$( document ).ready(function(){ $( "#colourchanger" ).on( "click" , function(){ var color = '#'+Math.floor( Math.random()*16777215 ).toString( 16 ); $( "body" ).css( {"background-color" : color } );})});

Here is a link with the script for you.

* Method 3 of changing a background/element colour using pad
Simply copy the code below and paste on to your webpage.
This also uses a button to change the colour.


function pad(s,i,c,r){ i=i+1-s.length; if(i<1)return s; c=new Array(i).join(c||" "); return r?s+c:c+s; }; pad("6",6,"6"); pad("0",0,"0",true); $( document ).ready(function(){ $( "#colourchanger" ).on( "click" , function(){ var color = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"6") $( "body" ).css( {"background-color" : color } );})});

Here is a link with the script for you.




Hex to RGB Colour Converter

Enter a 6 digit hex colour code and press the Convert button for your RGB output.









Colour Preview