#rainbow mouse

Week 3 - Rainbow Mouse (Test)

This is a video of my project of “Rainbow Mouse”. This project was realized with processing. In the bottom right corner you can see the coordinates where your cursor is at the moment. When your cursor is outside the window the message “Out of range” will appear.

void setup() {  size(600, 500); }

void draw(){  background(0);  stroke(255);

//I tried to make an actual rainbow, but the results didnt turned out as I wanted

 /*  line(100, 0, 0, 500);  line(200, 0, 0, 500);  line(400, 0, 0, 500);  line(800, 0, 0, 500);  line(1600, 0, 0, 500);  */

 /*  line(100, 0, 100, 500); //red->orange  line(200, 0, 200, 500); //orange-> yellow  line(300, 0, 300, 500); //yellow->green  line(400, 0, 400, 500); //green->blue  line(500, 0, 500, 500); //blue-> purple  */

 if(mouseX > 0 && mouseX <= 100){    fill(255, 0 , 0); //red    rect(0, 0, 100, 500);  } else if(mouseX > 100 && mouseX <= 200){    fill(255, 128, 0); //orange    rect(100, 0, 100, 500);  } else if(mouseX > 200 && mouseX <= 300){    fill(255, 255, 0); //yellow    rect(200, 0, 100, 500);  }else if(mouseX > 300 && mouseX <= 400){    fill(0, 255, 0); //green    rect(300, 0, 100, 500);  }else if(mouseX > 400 && mouseX <= 500){    fill(0, 128, 255); //blue    rect(400, 0, 100, 500);  } else if(mouseX > 500 && mouseX <= 600){    fill(127, 0, 255); //purple    rect(500, 0, 100, 500);  } else {    fill(255);    textSize(30);    text("Out of range", 200, 50);  }

 fill(255);  textSize(10);  text("mouseX: " + mouseX + " " + "mouseY: " + mouseY, 450, 450); }

By putting the following code (below) into 'Customize' then go to 'Edit Html' The paste it in there :) Hopefully it'll work, x

// <![CDATA[

var colour="rainbow";

var sparkles=50;

/****************************

*  Tinkerbell Magic Sparkle *

*(c)2005-11 mf2fm web-design*

*  http://www.mf2fm.com/rv  *

*  http://free-themes.info  *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

  var i, rats, rlef, rdow;

  for (var i=0; i

    var rats=createDiv(3, 3);

    rats.style.visibility="hidden";

    document.body.appendChild(tiny[i]=rats);

    starv[i]=0;

    tinyv[i]=0;

    var rats=createDiv(5, 5);

    rats.style.backgroundColor="transparent";

    rats.style.visibility="hidden";

    var rlef=createDiv(1, 5);

    var rdow=createDiv(5, 1);

    rats.appendChild(rlef);

    rats.appendChild(rdow);

    rlef.style.top="2px";

    rlef.style.left="0px";

    rdow.style.top="0px";

    rdow.style.left="2px";

    document.body.appendChild(star[i]=rats);

  }

  set_width();

  sparkle();

}}

function sparkle() {

  var c;

  if (x!=ox || y!=oy) {

    ox=x;

    oy=y;

    for (c=0; c

      star[c].style.left=(starx[c]=x)+"px";

      star[c].style.top=(stary[c]=y)+"px";

      star[c].style.clip="rect(0px, 5px, 5px, 0px)";

      star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="rainbow")?newColour():colour;

      star[c].style.visibility="visible";

      starv[c]=50;

      break;

    }

  }

  for (c=0; c

    if (starv[c]) update_star(c);

    if (tinyv[c]) update_tiny(c);

  }

  setTimeout("sparkle()", 40);

}

function update_star(i) {

  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

  if (starv[i]) {

    stary[i]+=1+Math.random()*3;

    if (stary[i]0) {

      star[i].style.top=stary[i]+"px";

      starx[i]+=(i%5-2)/5;

      star[i].style.left=starx[i]+"px";

    }

    else {

      star[i].style.visibility="hidden";

      starv[i]=0;

      return;

    }

  }

  else {

    tinyv[i]=50;

    tiny[i].style.top=(tinyy[i]=stary[i])+"px";

    tiny[i].style.left=(tinyx[i]=starx[i])+"px";

    tiny[i].style.width="2px";

    tiny[i].style.height="2px";

    tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;

    star[i].style.visibility="hidden";

    tiny[i].style.visibility="visible"

  }

}

function update_tiny(i) {

  if (--tinyv[i]==25) {

    tiny[i].style.width="1px";

    tiny[i].style.height="1px";

  }

  if (tinyv[i]) {

    tinyy[i]+=1+Math.random()*3;

    if (tinyy[i]0) {

      tiny[i].style.top=tinyy[i]+"px";

      tinyx[i]+=(i%5-2)/5;

      tiny[i].style.left=tinyx[i]+"px";

    }

    else {

      tiny[i].style.visibility="hidden";

      tinyv[i]=0;

      return;

    }

  }

  else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

  set_scroll();

  y=(e)?e.pageY:event.y+sdown;

  x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

  if (typeof(self.pageYOffset)=="number") {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

  }

  else if (document.body.scrollTop || document.body.scrollLeft) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

  }

  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

    sdown=document.documentElement.scrollTop;

  }

  else {

    sdown=0;

    sleft=0;

  }

}

window.onresize=set_width;

function set_width() {

  var sw_min=999999;

  var sh_min=999999;

  if (document.documentElement && document.documentElement.clientWidth) {

    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;

    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;

  }

  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {

    if (self.innerWidth>0 && self.innerWidth

    if (self.innerHeight>0 && self.innerHeight

  }

  if (document.body.clientWidth) {

    if (document.body.clientWidth>0 && document.body.clientWidth

    if (document.body.clientHeight>0 && document.body.clientHeight

  }

  if (sw_min==999999 || sh_min==999999) {

    sw_min=800;

    sh_min=600;

  }

  swide=sw_min;

  shigh=sh_min;

}

// free-themes.info

function createDiv(height, width) {

  var div=document.createElement("div");

  div.style.position="absolute";

  div.style.height=height+"px";

  div.style.width=width+"px";

  div.style.overflow="hidden";

  return (div);

}

function newColour() {

  var c=new Array();

  c[0]=255;

  c[1]=Math.floor(Math.random()*256);

  c[2]=Math.floor(Math.random()*(256-c[1]/2));

  c.sort(function(){return (0.5 - Math.random());});

  return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");

}