A JavaScript API for drawing unconventional text effects on the web.

As far as I can tell, this error appears in every implementation I've seen of blotter, except for blotter's website.

Following the instructions given under the 'Basics', this error appears, and it seems to be preventing any rendering at all of Blotter.

Examples of this error occurring, from looking at codepen:

https://codepen.io/SimonEvans/pen/PQKgyQ?q=blotter&limit=all&type=type-pens

https://codepen.io/cristigoia/pen/ZrJPyv?q=blotter&limit=all&type=type-pens

https://codepen.io/tomvb/pen/QQMYQW?q=blotter&limit=all&type=type-pens

Im trying to render a text with a "RollingDistortMaterial" material.

In my computer it works correctly, without any issues or warnings:

This is the code:

    let fontContainer = document.querySelector("#blotter-text")
    let fullText = fontContainer.innerText.toUpperCase()
    fontContainer.innerText = "";

    fullText = fullText.split(" ")
    fullText.forEach(function (e) {
        convertToBlotter(e)
    })

    function convertToBlotter(word) {
        let text = new Blotter.Text(word, {
            family: "Media Sans Extended",
            size: 66.5,
            needsUpdate: true,
            fill: "#FFFFFF",
            leading: "1",
            paddingLeft: 10,
            paddingRight: 10
        });

        let material = new Blotter.RollingDistortMaterial();

        let blotter = new Blotter(material, { 
            texts: text 
        });

        blotter.needsUpdate = true;
        let scope = blotter.forText(text);

        scope.appendTo(fontContainer);
    }

But in other computers it gets this errors and warnings, am i doing anything wrong? is anything outdated?

I am looking into using more CSS properties like:

var text = new Blotter.Text("observation", {
  vertical-align: middle,
  mix-blend-mode: multiply
});

Did not find anything in the docs to add custom props. Any plans to add this feature?

Hey,

I am trying to make my blotter.js text responsive, using something like the below CSS, that ordinarily works:

font-size: calc(30px + 56 * ((100vw - 420px) / 860));

Because the size is declared in Javascript (currently set to 94), I haven't been able to apply the above.

I'm hoping for something like this:

var text = new Blotter.Text("Hello", {
        family : "serif",
        size :"calc(30px + 56 * ((100vw - 420px) / 860))",
        fill : "#171717"
});

Please can you advise?

Thank you!

Hey there, thanks for this great library. Quick question, I want to load a custom font from typekit. How might I add that to this example: https://codepen.io/SimonEvans/pen/PQKgyQ

Also how can I make sure it scales responsively? Thanks for your help!

The bug is a little intermittent and needs some investigating. On the most recent versions of Firefox it seems that if you load into http://blotter.js.org with a fresh cache the page will mostly not load Blotter elements on the first load. A refresh seems to fix it. Additionally if you load up a material page (https://blotter.js.org/#/materials/FliesMaterial) first, with a fresh cache, Blotter seems to work fine and you can navigate to the homepage with everything working as usual.

Please investigate.

Reference comment on Designer News

I'm using LiquidDistortMaterial for a text, and whenever I change the content, the animation restarts making it very unpleasent. Is there any workaround to avoid this reset? Maybe an offset animation start parameter?

This is my normal text changing code blotterText.value = text; blotterText.needsUpdate = true;

Hi - I want to achieve this effect:

where I have multiple copies of the same line of text (or copies of the canvas, etc). I can get blotter to work on a single line of text, but I've tried numerous methods of creating a copy and non of them work.

For example:

<div id="distortion-text1" class="progress__content"></div>
<div id="distortion-text2" class="progress__content"></div>
<div id="distortion-text3" class="progress__content"></div>

and

var elem1 = document.getElementById('distortion-text1')
var elem2 = document.getElementById('distortion-text2')
var elem3 = document.getElementById('distortion-text3')
var scope1 = blotter.forText(text);
var scope2 = blotter.forText(text);
var scope3 = blotter.forText(text);

scope1.appendTo(elem1);
scope2.appendTo(elem2);
scope3.appendTo(elem3);

I've also just tried cloning the canvas and that doesn't work. Blotter seems to just append one single canvas to the last dom node (distortion-text3), no matter what I do.

Hi - just trying to get a local font to work in Blotter. My utilization of the font in CSS is as follows:

@font-face {
  font-family: 'gtf_adieu_trialbold';
  src: url('../fonts/gtfadieutrial-bold-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Does blotter utilize the CSS font face somehow? Or is there something specific I need to do to make that available to JS?

Hi, I'm new to both threejs and Blotter! After I read document about it and I intend to change some uniforms of FliesMaterial but it doesn't look like working

The overall structure is composed with init, animate, and render function as below.

var blotter, blotterMaterial;
var time = 0.0;
function init(){
  var text = new Blotter.Text("0.2", {
    family: "serif",
    size: 120,
    fill: "#171717"
  });

  blotterMaterial = new Blotter.FliesMaterial();
  blotterMaterial.uniforms.uPointCellWidth = { type: "1f", value: 0.01 }; // (R, G, B)

  blotter = new Blotter(blotterMaterial, { texts: text });

  var scope = blotter.forText(text);
  scope.appendTo(document.body);
}

function animate(){
  requestAnimationFrame(animate);
  render();
}
function render() {
  var delta = clock.getDelta();
  time += delta;
  if (blotterMaterial) {
    blotter.material.uniforms.uPointCellWidth.value += 0.01;
    blotter.material.needsUpdate = true;
  }
}

Based on documentation, I understood needsUpdate can be called across blotter, material and so on. I tried call needsUpdate as true with my blotter instance but also blotterMaterial but it didn't work.

What mistake that I made? Thanks.

Hey there! I'm trying to figure out how to change the text rendered on screen in a more dynamic way. Your documentation mentions a couple times that you simply just call blotter.needsUpdate = true, but it never provides an example of how to do so.

Essentially what I'm after is an interface with a text input box. When the user hits enter on the box, the text will be sent to blotter to render. The only way I've been able to do it so far, is to keep appending new scopes to the screen. I feel like I'm missing something, or is this how you intended things to work? Here's a little example written the p5js editor. Every click will add a new scope to the window. I know that I could keep track of the old scopes and remove them as I get new submissions, but I feel like there has to be a way to tell blotter to just redraw the text texture.

Can you give some clarity or guidance on how to do this kind of update?

Hey love this library!

I recently noticed a known vulnerability is being flagged up in Lighthouse (Dev Tools) as part of the inclusion of Underscore.js.

Any chance this could be updated to patch the vulnerability?

Thanks!

What other attributes are available for additional text decoration? Like if I wanted to outline the text, or fill with a gradient or even an image? Anyone have any thoughts on how to do this?

Hi,

Thanks for the awesome plugin - the only issue I have is with custom fonts such as Google Fonts.

I followed your example mentioned here, but it doesn't seem working. The strangest thing is that sometimes it works, then next time (refresh) it doesn't. The working example is here: https://twirling.space/playground/uiscape/treejs/blotter/ - Blotter still displays a serif font, but the family property is set to "'Roboto Mono'" in the text options. The init is within a document.fonts.ready callback, and the Google Fonts scripts/styles also seem to be called correctly.

Also - while you expressed clearly that you don't intend to improve Blotter's custom font handling, I'm a little bit lost here. Blotter is all about display, style, and modern typo effects - it seems to me that if custom fonts are not fully and reliably supported, it kinda questions the purpose of the script.

What do you think? Thanks for taking a look into this.

Hey, there you should set the style property whiteSpace to "nowrap", otherwise the Block for very long texts breaks after the Viewport width.

// Determines size of text within the document given certain style properties

sizeForText : function(textValue, properties) { // Using a here may not be the best approach. In theory a user's stylesheet // could override the necessary styling for determining sizes below. With growing // support for custom tags in html, we may consider using them if this raises problems. var el = document.createElement("span"), size;

properties = this.ensurePropertyValues(properties);

el.innerHTML = textValue; el.style.display = "inline-block"; el.style.fontFamily = properties.family; el.style.fontSize = properties.size + "px"; el.style.fontWeight = properties.weight; el.style.fontStyle = properties.style; el.style.lineHeight = properties.leading; el.style.maxWidth = "none"; el.style.padding = this.stringifiedPadding(properties); el.style.position = "absolute"; el.style.width = "auto"; el.style.visibility = "hidden"; el.style.whiteSpace = "nowrap";