Skip to content

Instantly share code, notes, and snippets.

@mjvo
Last active June 14, 2021 18:53
Show Gist options
  • Save mjvo/2dce29799eb75b7ee1a571380f12ef1b to your computer and use it in GitHub Desktop.
Save mjvo/2dce29799eb75b7ee1a571380f12ef1b to your computer and use it in GitHub Desktop.
p5js Typewriter - uses the text() function but could easily use createElement() and html().
var data = "This is a sentence!";
var data2 = "This is a second sentence";
function setup() {
createCanvas(400,400);
typeWriter(data, 0, 20, 30, 100);
typeWriter(data2, 0, 20, 50, 500);
}
function draw() {
}
function typeWriter(sentence, n, x, y, speed) {
if (n < (sentence.length)) {
text(sentence.substring(0, n+1), x, y);
n++;
setTimeout(function() {
typeWriter(sentence, n, x, y, speed)
}, speed);
}
}
@siusoon
Copy link

siusoon commented Nov 3, 2019

great thanks! that's useful!!

@Simon-de-Vries
Copy link

Simon-de-Vries commented Jun 14, 2021

Veeery cool! And simple!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment