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(){
han=loadFont('寒蝉团圆圆.otf')
}
let spacingSlider;
let textToDisplay = "汉字在古文中只称“字”"; //set what text on display
let letterSpacing = -100; // Initial letter spacing value
let points;
let inputElement;
function setup() {
preload()
createCanvas(1080, 1080);
textSize(160);
textFont(han)
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);
spacingSlider.input(updateSpacing);
// 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)
inputElement=createInput();
inputElement.position(20,45);
inputElement.input(updateText);
noLoop();
}
function draw() {
background(220);
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();
redraw()
}
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);
textSize(fontSize);
textFont(han);
background(255);
spacingSlider = createSlider(-10, 10, letterSpacing);
spacingSlider.position(20, 10);
spacingSlider.input(updateSpacing);
inputText = createInput('伪装是一种生存技能'); // Create an input element with default text
inputText.position(20, 40);
inputText.input(updateText); // Call updateText when the input changes
smallText=createInput('你好');
smallText.position(20,70);
smallText.input(updateText);
letterSpacing = spacingSlider.value();
updateText(); // Initialize the points based on the initial input text
noLoop();
}
function draw() {
fill(0);
// Draw ellipses at the points along the path
for (let i = 0; i < points.length; i++) {
let pt = points[i];
textSize(3);
let txt=smallText.value();
text(txt, pt.x, pt.y);
}
}
function updateSpacing() {
redraw();
}
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++) {
points.push(textPoints[i]);
}
return points;
}
function updateText() {
let textToDisplay = inputText.value();
let txt=smallText.value();
points = fontToPoints(textToDisplay, 100, 500, fontSize);
redraw();
}
Thank you!
