The main goal of these experiments was to warm up a little bit in 3D, to learn WebGL, Scala and Processing. I had previous experience with 3D and OpenGL while developing V8-GL, an OpenGL ES port to V8, and also while developing the House of Cards visualization in OCaml. But these were other times. Now OCaml is dead, and there’s a V8-GL port in the browser, which is called WebGL. I’m kind of proud to have chosen things that became sort of mainstream later on though: functional programming for graphics and hardware accelerated graphics with JavaScript .

2D Canvas

The 2D Canvas API has a limited capability for 3D graphics. In order to make 3D with it you can use some high level 3D engine like pre3d or three.js which provide classes to do mathy stuff in 3D and then use tricks like the pinhole camera model to project them on 2D. What’s interesting about three.js is that it also provides SVG and WebGL renderers. These are awesome tools to make 3D, but since my example was more in the spirit of the JS1k demos I decided to start from scratch. The only thing I used was the Vector3 and Matrix4 classes from three.js.

The result is quite interesting although it’s CPU intensive. You can try it here if you have a 2D canvas enabled browser.

To make this example I created a Shape object, that would create a list of particles placed in some particular shape:

var Shape = {
	Sphere: function(objs, opts) {
		var s = opts.s || 200,
			atan2 = Math.atan2,
			cos = Math.cos,
			acos = Math.acos,
			sin = Math.sin,
			sqrt = Math.sqrt;

		for(var i=0, l=objs.length; i<l; i++) {
			var obj = objs[i],
				pos = obj.pos,
				x = pos.x,
				y = pos.y,
				z = pos.z,
				r = x * x + y * y + z * z,
				theta = acos(z / sqrt(r)),
				phi = atan2(y, (x || 1));

			if(!obj.sphere) {
				obj.sphere = new THREE.Vector4();
			}
			var pos = obj.pos, sphere = obj.sphere;
			pos.x = sphere.x = s * sin(theta) * cos(phi);
			pos.y = sphere.y = s * sin(theta) * sin(phi);
			pos.z = sphere.z = s * cos(theta);
		}
	}
     //...other shapes here...
};

I also created a tween object from scratch, which would provide transition equations (linear, Elastic, Bounce) for the particles movement. There are many tweeners around, but since I’m a big fan of MooTools and the way they use object mutability and functions as objects to create their tweener I implemented something in that spirit. The transition object code provides an object with methods (Trans.Elastic(delta), Trans.Bounce(delta)) and “submethods” as properties of these methods (Trans.Elastic.easeOut(delta), Trans.Bounce.easeInOut(delta)). That’s the approach I like and I don’t think it’s that easy to emulate in other languages… Will Scala be up to the task?

Here’s some code for that transitions object:

//transitions object. can be used like
//Trans.linear, or Trans.Elastic.easeOut, etc.
var Trans = {
  linear: function(p){
    return p;
  }
};

(function(){

  //add easing equations as methods
  //of the transition object/function
  //i.e add easeIn/Out to the Elastic/Sine objects
  var makeTrans = function(transition, params){
    var trans = {
      easeIn: function(pos){
        return transition(pos, params);
      },
      easeOut: function(pos){
        return 1 - transition(1 - pos, params);
      },
      easeInOut: function(pos){
        return (pos <= 0.5)? transition(2 * pos, params) / 2
          : (2 - transition(2 * (1 - pos), params)) / 2;
      }
    };
	for(var p in trans) {
		transition[p] = trans[p];
	}
	return transition;
  };

  //transition equations
  var transitions = {

    Sine: function(p){
      return 1 - Math.sin((1 - p) * Math.PI / 2);
    },

    Elastic: function(p, x){
      return Math.pow(2, 10 * --p)
          * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
    }
    //...other transitions here...
  };

 //enhance the Trans object with new transitons
  for(var p in transitions) {
	Trans[p] = makeTrans(transitions[p]);
  }

})();

Finally the main.js file contains init, loop and nextShape functions. The init function will call the Shape object methods, pre-calculating the particles positions, and will set an array with the shapes to iterate on. Loop will render each point to the canvas, by using the x and y coordinates of the particle. The z coordinate will determine the alpha color and radius of the particle. Once a fixed number of loops are triggered nextShape will be called to make the transition to the next shape.

While this is a simple approach, 3D in the 2D canvas environment is quite limited, and very CPU intensive.

WebGL

Since most of the code used in the previous example was dealing with 3D objects and then projected into 2D space, this code can also be used when working with WebGL. Getting started with WebGL is much harder than with 2D Canvas though. First, there's all that setup of creating a program, compiling the shaders (which of course is GLSL code and not JavaScript itself), linking them into the program, initializing buffers, etc. Moreover, since there's not a fixed pipeline all that push/pop matrix stack has to be hand-coded now, which makes it quite difficult to create things without a framework. However, since this is a very simple example I used exactly the same things here than in the previous example. Here's the live example that you can see in a WebGL enabled browser (click here to get a WebGL enabled browser). Or you can check the video I made of the demo below (click here if you can't see the video):

The rendering part is quite different though. You need to set all the vertex information into a buffer and send that data into the shaders. The shaders will get the data in attributes (which is per vertex information) or uniforms (data which will remain the same for all vertices). For example, all particles are colored the same, but each particle has a different position, so the code would look like this:

    //draw scene
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 500.0);
    loadIdentity();
    mvTranslate([0.0, 0.0, -150.0]);
    mvRotateX(rx);
    mvRotateY(ry);
    for(var i=0, l=parts.length, vertices=[]; i<l; i++) {
        var p = parts[i].pos;
        vertices.push(p.x, p.y, p.z);
    }
    //create and store and bind vertex data
    gl.bindBuffer(gl.ARRAY_BUFFER, ballsPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
                           ballsPositionBuffer.itemSize,
                           gl.FLOAT, false, 0, 0);
    //set model view and perspective matrix
    setMatrixUniforms();
    //set color and object scaling
    gl.uniform1f(shaderProgram.scaleUniform, s);
    gl.uniform3f(shaderProgram.colorUniform, r, g, b);
    //draw
    gl.drawArrays(gl.POINTS, 0, ballsPositionBuffer.numItems);

While it can be a little bit difficult to dive into WebGL from scratch, this is definitely the way to go if you want to make some serious 3D stuff in the browser. Plus, once you get some base code right, things become quite simple .
Chrome/Safari and Firefox have pretty mature implementations of WebGL, and just like it happened with 2D canvas, I bet this will be eventually implemented in other browsers as well.

SPDE = Scala + Processing

Since OCaml is dead and I really liked some features of it such as type inference, destructuring, pattern matching, object literals, operator overloading and more, I looked for some replacement and considered Scala as an interesting alternative. I'm still learning Scala, and while being more OO and less functional than OCaml, there's still room for pattern matching with case classes, syntactic sugar for singletons (or object literals), and other goodies such as traits, operator overloading, etc. Plus, it targets the JVM.
SPDE is the "port" of the Processing Development Environment to the Scala programming language. It basically provides a nice workflow to create and run projects, providing the set of drawing methods that already exist in Processing. The SPDE project is hosted at Github as well as the SPDE Examples.

The structure of the code I ported is quite similar to the WebGL example code, but more high-level in the sense that there are lots of drawing primitives and useful functions within the Processing environment. I really enjoyed hacking this thing with Scala. Here's the source code for the example. You can also watch a video of the visualization below (click here if you can't watch the video):

Remember the code for the tweener I described before? Some really nice feature in Scala is that you can extend the class Function which provides mappings from one type to another. In Scala functions are also treated as classes and the "elegant" code done for creating transitions in JavaScript can be "ported" to Scala in that same way:

abstract class Transitions extends Function[Float, Float] {
 private def easeInVar(x: Float, i: Float = 1.0): Float = apply(i * x);
 private def easeOutVar(x: Float, i: Float = 1.0): Float = i - apply(i * (1 - x));

 def easeIn(x: Float) = easeInVar(x);
 def easeOut(x: Float) = easeOutVar(x);
 def easeInOut(x: Float): Float = (if (x <= 0.5) easeInVar(x, 2) else easeOutVar(x, 2)) /2
}

object Transitions {
 private val pi = Pi;

 def linear(x: Float) = x;

 object Sine extends Transitions {
  override def apply(x: Float): Float = 1 - sin((1 - x) * pi / 2)
 }

 object Back extends Transitions {
  override def apply(p: Float): Float = {
   val x = 1.618;
   pow(p, 2) * ((x + 1) * p - x);
  }
 }
       //...other objects here...
}

So now transitions can be passed as parameters just like with JavaScript:

Transitions.linear _;
Transitions.Elastic.easeOut _;

This is due to the fact that there's some syntactic sugar for the apply method for a Function instance:

Transitions.Elastic.apply(0.5); //is the same as...
Transitions.Elastic(0.5);

Transitions.Elastic.easeOut.apply(0.5); //is the same as...
Transitions.Elastic.easeOut(0.5);

Conclusion

There are many approaches to do graphics and I only used three of them. For 2D Canvas rendering in 3D there are some libraries worth taking at look at: three.js and pre3d. If you'd like to learn WebGL (highly recommended) I recommend the webgl lessons page found here. Finally, SPDE is a great way to learn Scala and Processing at the same time. It's definitely worth taking a look at it.

Builder

With this beta release I’m also releasing a custom toolkit builder. The custom builder enables you to make your own build by choosing the visualizations you need and keeping out the code of the visualizations you don’t need. As more visualizations get added to the toolkit this will be a key component to optimize your web page loading. Currently the builder is on an experimental phase, but I strongly recommend you to check it out, custom builds can make a strong optimization difference.

I created a “dynamic” TreeMap visualization with that data. Here’s a short screencast I made explaining the TreeMap functionalities (I have a horrible english accent… I know). You can also play with the demo here.

The Code

For this example I used a special build of the Toolkit which is currently hosted at GitHub. The TreeMap example code looks just like the TreeMap demos code but I also added an onBeforeCompute callback that checks for the Doctor Actor Name and Villain Motivation filters to fade nodes respectively:

onBeforeCompute: function() {
  tm.graph.eachNode(function(n) {
    var prev = false;
    if(n.data.motivations) {
      prev = true;
      if(motivation != 'All'
        && n.data.motivations.indexOf(motivation) == -1) {
        n.setData('alpha', 0, 'end');
        n.ignore = true;
      } else {
        n.setData('alpha', 1, 'end');
        delete n.ignore;
      }
    }
    if(n.data.doctorActorNames) {
      if(doctorName != 'All'
        && n.data.doctorActorNames.indexOf(doctorName) == -1) {
        n.setData('alpha', 0, 'end');
        n.ignore = true;
      } else if(!prev) {
        n.setData('alpha', 1, 'end');
        delete n.ignore;
      }
    }
  });
},

The anchor click callbacks set the current selected value to the doctorName and motivation variables and also perform an animation by fading nodes and repositioning the remaining visible nodes:

anchors.addEvent('click', function(e) {
  doctorName = this.innerHTML;
  tm.compute('end');
  tm.fx.animate({
    modes: {
      position: 'linear',
      'node-property': ['alpha', 'width', 'height']
    },
    duration: 1000,
    fps: 50,
    transition: $jit.Trans.Quart.easeInOut
  });
});

The tm.compute(‘end’); call will trigger the onBeforeCompute callback that will set correct alpha values for the nodes. Then we perform an animation of node positions and node alpha, width and height properties.

I hope you have fun with the demo!

Just a quick post to tell you that I’ve been selected to speak at JSConf.eu 2010 in Berlin in September. JSConf.eu is the most important JavaScript conference held in Europe. Last year speakers included John Resig, Douglas Crockford and 280 north people among others. I’m very excited about this event and I can’t wait to meet everyone there!

More updates will come in the next few days. You can also follow feeds from the main page event or follow them on twitter. Oh, I have a twitter account, too

What’s the JavaScript InfoVis Toolkit?

The JavaScript InfoVis Toolkit provides web standard based tools to create interactive data visualizations for the Web.

What’s new in this version?

This version introduces radical new features, an API redesign and new visualizations. If you don’t want to read the whole article and just want to play with the examples you can go to the demos page.

New Visualizations

With this version of the Toolkit the number of available visualizations has doubled. Some of the new visualizations are the AreaChart, BarChart and PieChart, which were described in more detail in this article. I’ve also added Sunburst and Force-Directed visualizations. I wrote about these visualizations before here and here. I also want to thank Pablo Flouret, who contributed most of the code for the Icicle visualization, also a new addition to the toolkit.

You can play now with these visualizations at the demos page!

Features common to all visualizations

I’ve also enhanced all visualizations with new configuration options that enable new features. These features are:

• Panning and zooming across all visualizations.
• A new event system that enables you to attach events to DOM elements or to native canvas nodes and also add support for touch events, drag and drop, etc.
• Complex animations have the ability to animate any style property of a node, edge or label. There is also support for animating canvas specific properties like shadowBlur, shadowColor, fillStyle, etc.

A new TreeMap visualization

The underlying rendering functions in the TreeMap visualization have changed. While in prior versions of the Toolkit the TreeMap was DOM-based, this new version renders the TreeMap entirely in Canvas. This enables you to add custom nodes of any shape or nature you like (can be images, circles, polygons) and also to take advantage of the new animation engine of the toolkit to add smooth transitions for the drill-down. These new things can be tested at the TreeMap section in the demos page.

API Redesign

The old API was too low level. Before creating any visualization you had to manually create a Canvas widget and pass it as parameter to the visualization class. Also, many other parameters like width and height of the canvas were required. For Background canvases the API had a couple of flaws, and it wasn’t clear how to use it either. Many of these things have been solved with the new API design. The Canvas class became an inner class implicitly created when making a new visualization. Width and height of the canvas are set to the container’s offsetWidth and offsetHeight if they’re not provided, and background canvases are easier to attach to the visualization.
Most of all, there is now a single global object in the library: $jit. This declares the namespace for the library and makes sure you won’t have conflicts with any other JavaScript library.

A new Website

Last but not least, I worked on a website redesign, taking advantage of the new HTML5/CSS3 features supported by major browsers. There’s also a detailed documentation page to get you started.

It’s alpha

Finally I’d like to say that this is an alpha version. There are lots of known bugs and I’m counting on you to report bugs, send fixes, and collaborate in any aspect of the toolkit.

Thanks

To Pablo Flouret for contributing code to the toolkit, and to my wife, Luz Caballero for making me happy.

Now go get the Toolkit!

Animated TreeMaps

In order to show some of the new features I’ve been writing a simple example with TreeMap animations. TreeMap animations are integrated into the built-in classes of the Toolkit, but you can also create your own animations by altering either built-in Node/Edge params, or also canvas specific styles like shadows.

Here’s a short video of an Animated TreeMap, it also has animations when switching layouts. I think it’s better seen in fullscreen.

Zooming and Panning

The new Event system allows many customizations, such as Dragging and Dropping nodes, (right)clicking native Canvas nodes, etc. This will be the subject of a longer post, since there is a lot of machinery involving Native Canvas, SVG and HTML events, event delegation, etc. I’ve also been working in making a modular Canvas class enabling canvas background extensions.

Some of these changes had some desirable effects, such as enabling Panning and Zooming in a generic way, across all visualizations, as can be seen in this video:

A Force Directed Example

These features can be combined into useful and interesting examples. This Force Directed example uses the new Event system, zooming, panning and animations to make a complete graph editing tool. These are some of the graph interactions that can be made with the JavaScript InfoVis Toolkit (also better seen in fullscreen):

I hope you liked it. I know I’m having a great time working in this project.

I’ll be back with more updates.

Today, I started working at Exalead on a photo mosaic service that could take advantage of Exalead’s Search Engine. The service contains a bunch of indexed images from different sources. These images are categorized by color just like the images in our public search service, allowing us to easily find pictures by approximating colors.

I decided to run the web application into some browser logos to see what the results were. You can click the images to enlarge.

Chrome

IE

Firefox

Opera

Safari

Safari was kind of complicated because the logo has more details than the others. I also made a close up of the logo:

Which one do you like the most?

Anyway, I’ll keep you updated.

All components support a simpler JSON format that I’ll describe later in this post. These components are easy-to-use, yet very powerful: they support live data updates and multi valued data as we will see next.

Area Charts

The Area Chart is a useful component to track the evolution of a bunch of categories at the same time. In addition, the aggregation of the values of all these categories is also presented in a meaningful way. This component supports live updates (as you’ll see in the first seconds of the video), filtering/restoring categories, tooltips and a legend. As usual this is all JavaScript:

The visualization is instanciated this way:

var areaChart = new $jit.AreaChart({
    //id of the container
    injectInto: 'infovis',
    //set animations
    animate: true,
    //visualization 'padding'
    offset: 5,
    //labels 'margin'
    labelOffset:10,
    //show aggregated values
    showAggregates:true,
    //show labels
    showLabels:true,
    //use gradients for rendering
    type:'stacked:gradient',
    //label styling
    Label: {
      size: 13,
      family: 'Arial',
      color: 'white'
    },
    //enable tips
    Tips: {
      enable: true,
      onShow: function(tip, elem) {
         tip.innerHTML = "" + elem.name + ": " + elem.value;
      }
    },
    //add leftclick handler
    filterOnClick: true,
    //add rightclick handler
    restoreOnRightClick:true
});

Additionally this visualization allows programmatic category filtering, JSON updating, selecting you own colors, etc.

Bar Charts

Bar Charts are similar to Area Charts, but they support additional styling and positioning. You can use vertical or horizontal Bar Charts. Here’s an example:

This object is created the same way you create an AreaChart:

var barChart = new $jit.BarChart({
    injectInto: 'infovis',
    animate: true,
    //set orientation vertical or horizontal
    orientation: 'horizontal',
    //bar separation
    barsOffset: 20,
    offset:10,
    labelOffset:5,
    type:'stacked:gradient',
    showAggregates:true,
    showLabels:true,
    Label: {
      size: 13,
      family: 'Arial',
      color: 'white'
    },
    Tips: {
      'enable': true,
      'onShow': function(tip, elem) {
         tip.innerHTML = "" + elem.name + ": " + elem.value;
      }
    }
});

Pie Charts / Rose Diagrams

Finally there’s the Pie Chart. But this is no regular Pie Chart. It can support simple data as well as more complex data. You can add multiple categories to this Pie Chart, combining them into something more like a Stacked Rose Diagram. They also support live updates as you’ll see in the first seconds of the video:

JSON Data Format

The JSON data format for these visualizations had to depict something like a contingency table, and so I decided to adopt something like this:

var json = {
    //category labels
    'label': ['label A', 'label B', 'label C', 'label D'],
    //each "stack" is described here
    'values': [
    {
      'label': 'date A',
      'values': [20, 40, 15, 5]
    },
    {
      'label': 'date B',
      'values': [30, 10, 45, 10]
    },
    {
      'label': 'date E',
      'values': [38, 20, 35, 17]
    },
    {
      'label': 'date F',
      'values': [58, 10, 35, 32]
    },
    {
      'label': 'date D',
      'values': [55, 60, 34, 38]
    },
    {
      'label': 'date C',
      'values': [26, 40, 25, 40]
    }]
};

I hope you find these visualizations useful, and if you can’t wait for the next version to come out to use these charts you can always build the project from GitHub. Here’s a wiki with some instructions on how to make your own build of the library while you’re waiting for an official release. If you ever find bugs please use the issue tracker at GitHub. If you need help or have any questions you can always go to the Google Group. Well, this got long enough.

Hope you enjoyed it!

• Advanced DOM manipulation
• Ajax
• Animations

When developing Web Sites most JavaScript effects involve rendered DOM Elements, but sometimes JavaScript animations are used in other contexts, like when using the Canvas. In the JavaScript InfoVis Toolkit the main target of my animations are Graphs, and in the next version also Nodes and Edges as separate entities.

Today I’d like to describe how to create a generic animation class that can be used or extended for any purpose. I’ll try to be minimalistic and to present only the needed code for making animations. Then you might find useful to add some code to perform specific animation tasks targeting for example specific style properties of a DOM Element.

Defining an Animation Class

Before creating an Animation class we might want to consider what to expose as options to the user. The options I thought of are:

• The duration of the animation (in milliseconds)
• The frames per second of the animation

Additionally we’d like to add a couple of controllers, one when a step of the animation is executed and one when the animation has completed:

var options = {
  duration: 1000,
  fps: 40,
  onStep: function(delta) {},
  onComplete: function() {}
};

delta gives us an idea of the progress of the animation. When the animation starts delta will be equal to zero. When the animation ends it’ll be equal to one.

We will also need a start method to trigger the animation and a step method that will compute delta at each step.

Now that we defined our options we can start thinking about our implementation.

Implementing the Animation class

Our Animation class will be a class constructor that sets all the options and properties that we defined before and a prototype with the methods start and step. The class could be used like this:

var fx = new Effect({
  duration: 1000,
  fps: 40,
  onStep: function(delta) {
    /* do stuff */
  },
  onComplete: function() {
    alert('done!');
  }
});
//start the animation
fx.start();

Here’s the code I came up with, inspired by the MooTools Framework:

//define the class constructor
function Effect(opt) {
  this.opt = {
    duration: opt.duration || 1000,
    fps: opt.fps || 40,
    onStep: opt.onStep || function(){},
    onComplete: opt.onComplete || function(){}
  };
}

Effect.prototype = {
  //define how the animation starts
  start: function() {
    //return if we're currently performing an animation
    if(this.timer) return;
    //trigger the animation
    var that = this, fps = this.opt.fps;
    this.time = +new Date;
    this.timer = setInterval(function() { that.step(); },
                             Math.round(1000/fps));
  },
  //triggered at each interval step
  step: function() {
    var currentTime = +new Date, time = this.time, opt = this.opt;
   //check if the time interval already exceeds the duration
   if(currentTime < time + opt.duration) {
     //if not, calculate our animation progress
      var delta = (currentTime - time) / opt.duration;
      opt.onStep(delta);
    } else {
      //we already exceeded the duration, stop the effect
      //and call the onComplete callback
      this.timer = clearInterval(this.timer);
      opt.onStep(1);
      opt.onComplete();
    }
  }
};

One very common operation to do with delta is to change the interval [0, 1] of delta to our desired from and to values that we want to compute for our element. A clever thing to do would be to declare this method as a class method for Effect. We'll call it compute:

Effect.compute = function(from, to, delta) {
  return from + (to - from) * delta;
};

Now If we wanted for example to animate an element's width style from 0 to 10px we could do:

var elem = document.getElementById("myElementId"),
    style = elem.style;
var fx = new Effect({
  duration: 500,
  onStep: function(delta) {
    style.width = Effect.compute(0, 10, delta) + 'px';
  }
});
fx.start();

Extending the Effect class

The animation code defined above could be extended in different ways. For example, this class could be slightly modified to accept a DOM element in its constructor and modify style properties of that element when performing an animation. The code could look like this:

var elem = document.getElementById("myElementId");
var fx = new Effect({
  element: elem,
  duration: 1000
});
fx.start({
  'width': [0, 20, 'px'],
  'height': [0, 5, 'em']
});

The code would now look more or less like this:

//define the class constructor
function Effect(opt) {
  this.opt = {
    element: opt.element,
    duration: opt.duration || 1000,
    fps: opt.fps || 40,
    onComplete: opt.onComplete || function(){}
  };
}

Effect.prototype = {
  //props contains a hash with style properties
  start: function(props) {
    if(this.timer) return;
    var that = this, fps = this.opt.fps;
    this.time = +new Date;
    this.timer = setInterval(function() { that.step(props); },
                             Math.round(1000/fps));
  },
  //triggered at each interval step
  step: function(props) {
     var currentTime = +new Date, time = this.time, opt = this.opt;
     if(currentTime < time + opt.duration) {
      var delta = (currentTime - time) / opt.duration;
     //set the element style properties
     this.setProps(opt.element, props, delta);
    } else {
      this.timer = clearInterval(this.timer);
      this.setProps(opt.element, props, 1);
      opt.onComplete();
    }
  },
  //set style properties. Properties must be
  //in camelcase format.
  setProps: function(elem, props, delta) {
    var style = elem.style;
    for(var prop in props) {
      var values = props[prop];
      style[prop] = Effect.compute(values[0], values[1], delta)
        + (values[2] || '');
    }
  }
};

Other extensions might involve normalizing style keywords, adding effect transitions, adding pause resume methods, and/or using more OO JS idioms when coding these classes.

I hope you got to know a little bit more about animation internals and please if you have any advice on this code, which as I told before is just for demonstration, I'll be pleased to hear you!