Comments (5)
Well here's how i handle mine
I calculating a new font and padding size based off the windows width on resize
let size = Math.min(Math.max(window.innerWidth * 0.13, 30), 120);
let padding = Math.min(Math.max(window.innerWidth * 0.05, 50), 150);
const createBlotter = (size, scene, padding) => {
const text = new Blotter.Text("Yusuf KanBai", {
family: "Playfair Display",
size: size,
fill: "#fbf8f4",
paddingLeft: padding,
paddingRight: padding,
weight: 800,
});
let material = new Blotter.LiquidDistortMaterial();
material.uniforms.uSpeed.value = 0.4;
material.uniforms.uVolatility.value = 0.04;
material.uniforms.uSeed.value = 0.5;
let blotter = new Blotter(material, {
texts: text,
});
blotter.needsUpdate = true;
let scope = blotter.forText(text);
scope.appendTo(scene);
};
createBlotter(size, scene.value, padding);
window.addEventListener("resize", () => {
let newSize = Math.min(Math.max(window.innerWidth * 0.13, 50), 120);
let newPadding = Math.min(Math.max(window.innerWidth * 0.08, 50), 150);
if (newSize !== size || newPadding !== padding) {
size = newSize;
padding = newPadding;
scene.value.innerHTML = "";
createBlotter(size, scene.value, padding);
}
});
from blotter.
Hi, I just took the height of the window and thought about it
var textvh = $(window).innerHeight() * 0.0533; // 5.33 vh
var text = new Blotter.Text("Эксперты", {
family : "'TT Jenevers', serif",
weight: 300,
size : textvh,
fill : "#000000"
});
from blotter.
Unfortunately youre correct, because of how blotter is built you wont be able to make the font sizes responsive as attempted in either of the above examples.
When a Blotter instance is initialized for a material and a text (or array of texts), the texts are drawn into a single "back buffer" image which is then collectively rendered on all draw calls. For example, if you gave a Blotter instance a material and 50 texts, all 50 texts would be rendered at once every frame, rather that 50 renders per frame. This has a performative advantage, but also means that Blotter has taken the opinion that continuously re-accounting for text size (as declared in the text's properties object at instantiation time) is disadvantageous.
There is however a possible solution for you all: set the needsUpdate
property to true
on either the individual text instance or on the material instance youve given to your Blotter instance. From the documentation for Blotter.Text
:
needsUpdate text.needsUpdate = true
Rarely, you may need to perform actions on your instances of Blotter.Text that require it to tell the instance of Blotter to repeat important preparatory steps necessary for rendering the instance's texts. To do so, set the value of text.needsUpdate to true and the instance will take care of the rest. You can listen for the Blotter instance's update event if you need to do any work after the update has completed.
Keep in mind that this is costly performance wise and you are advised not to do this on every window resize event. Rather, my advice would be to do this after specific window size breakpoints. This may not fit your specific needs. If you really need your blotter texts to resize smoothly, scaling along with some other element, another approach may be to simply hook into the Blotter.RenderScope
for your text and add css to the domElement
from there (which is the canvas the text has been rendered into).
Hope this helps.
from blotter.
Hi @bradley !
Would you be able to elaborate a bit more on how the needsupdate
property should be used? Trying to create mobile responsivity here.
Current code in my script:
`var text = new Blotter.Text("Brianna Hawkins", {
family : "'Gascogne Serial', serif",
size : 138,
weight : 300,
fill : "#fff",
paddingLeft : 120,
paddingRight : 120,
});
text.needsUpdate = true;
var material = new Blotter.LiquidDistortMaterial();
material.uniforms.uSpeed.value = .2;
material.uniforms.uVolatility.value = .05;
material.uniforms.uSeed.value = 1;
var blotter = new Blotter(material, {
texts : text
});
var elem = document.getElementById("one");
var scope = blotter.forText(text);
scope.appendTo(elem);
document.onmousemove = function distort(){
material.uniforms.uVolatility.value = (event.clientY * .0006);;
}
`
from blotter.
I found a very easy solution for this if anyone interested.
let fontsize = window.innerWidth/25
....
...
let nameText = new Blotter.Text("MERT",{
family:"Orbitron",
size: fontsize,
fill:"#fff",
paddingTop:0,
paddingBottom:0,
leading : 0.8
}
from blotter.
Related Issues (20)
- liquidDistort up and down instead of horizontally HOT 1
- multiline text, or copies of the same line of text HOT 2
- Not much vertical distortion with a long string of text HOT 1
- Font Loading behaving strangely with multiple fonts
- Gradient color
- Uncaught TypeError: Cannot read property 'prototype' of undefined
- Publish materials to npm
- Responsive text? And help with making Channel Split material rotation and offset follow cursor!! HOT 1
- reduce the font size on tablet and mobile HOT 1
- Flies Material working in iOS Chrome and Safari but not in Android Chrome
- Animation resets when text changes HOT 2
- Multiline
- svg logo HOT 1
- Very long text breaks if the Text is longer than the Viewport
- Blotter still doesn't work with custom fonts HOT 2
- dont suport in all brosers
- additional text decoration
- Can I use another js code with blotter?
- Underscore JS known vulnerability
- Liquid distortion material no longer functioning
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blotter.