text: fractional position, anti-aliased?

procjohn · December 2017

I'm interested in switching a project to processing and want to know how Processing handles drawing text with a fractional (non-integral) pixel coordinate and whether it is anti-aliased in such a manner. It might be a better solution.

Alternatively, some of you might know how to resolve my problem in a different way.

I began this project in Javascript using the HTML5 Canvas element. I'm creating videos that show animated text and simple diagrams, like an animated powerpoint presentation.

I have lots of ideas for cute ways to have text move around the screen, but the problem is that text movement becomes jerky when it's slow. It appears that Canvas is rounding pixel positions to integers. I know this sounds like a small deal, but I was surprised to see how disruptive and unnatural even 1-pixel jerks look on a 720P sized screen. And many of my ideas for animation and movement would involve trajectories just a few pixels wide, so they need to be smooth.

So I wonder if Processing could do this better.

There might be some alternatives that let me keep using Canvas. For instance I could draw on a Canvas that is twice as wide and high as I intend, then display it in a browser at 50% magnification. I haven't tried it yet, so I don't know if that would make any difference. I'm sure that it has a lot to do with how the browser chooses to downsize images.

J

jeremydouglass · December 2017

All versions of the Processing API use fractional pixel coordinates internally - p5.js, Processing(Java), Processing.py, Processing.R etc. This is true for all forms of drawing (rect, ellipse, line, point, PShape, etc. etc.), not just text.

Here is a simple "slow text follows mouse" demo sketch in p5.js:

var x = 0;
var y = 0;
function setup() {
  createCanvas(400,400);
  textSize(32);
  textAlign(CENTER,CENTER);
  fill(0, 102, 153);
}
function draw() {
  background(255);
  x = lerp(x, mouseX, 0.02);
  y = lerp(y, mouseY, 0.02);
  text("word", x, y);
}

The sketch is using linear interpolation and moving the text 2% of the distance towards the current mouse location. In Chrome I can see this create a smoothly antialiased sub-pixel slow drift effect -- your browser might vary, but probably not.

procjohn · December 2017

Thanks very much! great news

Howdy, Stranger!

Categories

In this Discussion

text: fractional position, anti-aliased?

Best Answer

Answers