Slider to control spacing between characters

Hello, I am struggling with a creative coding school project. I want to use slider to control spacing between characters like this code example below:

let han;

function preload(){

let spacingSlider;
let textToDisplay = "汉字在古文中只称“字”"; //set what text on display
let letterSpacing = -100; // Initial letter spacing value
let points;
let inputElement;

function setup() {
  createCanvas(1080, 1080);
  spacingSlider = createSlider(-100, 50, letterSpacing); 
  // Create a slider,  that allows you to adjust the letter spacing dynamically. The slider ranges from -100 to 50 and starts at the initial letterSpacing value.
  spacingSlider.position(20, 10);
  // Call updateSpacing() when the slider changes. We position the slider at the bottom of the canvas and specify an input event handler function (updateSpacing) to call when the slider value changes. an event includes mouse movement, mouse clicks, typing on the keyboard and so on .  Frequently you would want some JavaScript code to be executed in response to a user event. The most common way of creating event handlers is by specifying some function to be executed when an event occurs.In this case is updateSpacing(function)

function draw() {
  textAlign(LEFT, TOP);
  // Get the current spacing value from the slider
  letterSpacing = spacingSlider.value();
  // Initialize the x-coordinate
  let x = 200;
  // Draw each letter with the adjusted spacing。 We get the current spacing value from the slider using spacingSlider.value().We iterate through each character in the textToDisplay string and draw them with the adjusted x-coordinate, incorporating the letter spacing.
  // .length  property is used to iterate through the array or string, performing some operation on each element or characters
  for (let i = 0; i < textToDisplay.length; i++) {
    text(textToDisplay[i], x, height/2);
    x += textSize() + letterSpacing; // Adjust x with letter spacing
function updateText(){
   let textToDisplay = inputElement.value();

function updateSpacing() {
  redraw(); // Redraw the canvas when the slider changes

I hope to apply the same idea of slider on this sketch and keep the textToPoints, but I really coudn’t figure out how:

let han; // the font
let points = []; // array
let fontSize = 160;
let spacingSlider; // for creating a slider
let letterSpacing = -100; // initial value for letterspacing, variable for slider
let textPoints;
let inputText; // Input element for user input
let smallText;

function preload() {
  han = loadFont('寒蝉团圆圆.otf');

function setup() {
  createCanvas(1980, 1080);

  spacingSlider = createSlider(-10, 10, letterSpacing);
  spacingSlider.position(20, 10);

  inputText = createInput('伪装是一种生存技能'); // Create an input element with default text
  inputText.position(20, 40);
  inputText.input(updateText); // Call updateText when the input changes

  letterSpacing = spacingSlider.value();
  updateText(); // Initialize the points based on the initial input text

function draw() {


  // Draw ellipses at the points along the path
  for (let i = 0; i < points.length; i++) {
    let pt = points[i];
     let txt=smallText.value();
    text(txt, pt.x, pt.y);

function updateSpacing() {

function fontToPoints(textToDisplay, x, y, size) {
  let points = [];

  let textPoints = han.textToPoints(textToDisplay, x, y + size, size, {
    sampleFactor: 0.07,
    simplifyThreshold: 0.02,

  for (let i = 0; i < textPoints.length; i++) {

  return points;

function updateText() {
  let textToDisplay = inputText.value();
  let txt=smallText.value();
  points = fontToPoints(textToDisplay, 100, 500, fontSize);

Thank you!

is there any live link (repl/codepen/etc) to this where we can actively poke around and see it in action?

happy coding :slight_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.