Hammurabi's Code

Java

Using Blotter JS

One of the fun things about JavaScript is how there are so many interesting libraries out there to use. I was working on my portfolio and was interested in doing some type of text transformation on my home page. After some research I stumbled across something really interesting called Blotter. They have extensive documentation out there that is very detailed but, it is a lot of fun to play with. Let's take a look at what we can create!

I mean, come on! That is a lot of fun to look at. Let's take a deeper look at what we need to do to add this into any of your projects or website ideas. I would recommend visiting blotter's website for the full documentation, but I want to walk through how to develop the mouse effect on blotter's homepage. There are a couple of things we need to add to our head in our html file. You will need to copy a couple things from their GitHub page. Make sure to copy the minified version of Blotter and save it to your project. Also make sure to include at least one material from any of Blotter's ready made-effects. We will be taking a look at the ChannelSplitMaterial. In the above example, the channel split material effect is affecting "how cool". What I want to show you is how to add an effect to it with our mouse's coordinates to either have with or without effect, which is what we see on blotter's homepage.

Below is an example of how uOffset and uRotation works for the channel split material. uOffset uses the RBG values and spreads the red and blue in opposite directions while the green stays in its original position. You can see this happen by dragging your mouse up and down on the page to see the effect in motion. The second is uOffset. This effect describes the distance that your RGB values should spread. By using document.onmousemove, (which you can research on the MDN) you can see the effect in motion. The values of uOffset are anywhere between 0 and 1. I noticed that when you use a negative value it eliminates a lot of the blurring effect that takes place.

Below is the code that was used to create this really cool effect. It is very similar to the starter code found on blogger.js's website.

HTML/CSS/JAVASCRIPT

                            
<html>
    <head>
        <script src="path/to/blotter.min.js"></script>
        <script src="path/tochannelSplitMaterial.js"></script>
    </head>
    <body>
        <div class="container" style="background:hsl(231,77%,90%);
        display:flex;justify-content:center;align-items:center"></div>

        <script>
            var text = new Blotter.Text("AsDfG", {
                family: "sans",
                size: 100,
                paddingLeft: 40,
                paddingRight: 40
            })
          
            var material = new Blotter.ChannelSplitMaterial();
          
            var blotter = new Blotter(material, {
            texts: text
            })
            var container = document.querySelector('.container')
            var scope = blotter.forText(text)
            scope.appendTo(container)
            document.onmousemove = moveEffect;
            function moveEffect(event) {
                material.uniforms.uRotation.value = (event.clientY * 0.8);
                material.uniforms.uOffset.value = (event.clientY * -0.00017);
            }
        </script>
    </body>
<html>
                            
                            Code copied