building a typewriter with p5.js

xtongch

Thanks to Allison Parrish sharing her code on https://creative-coding.decontextualize.com/text-and-type/ I am currently working on an infroamtion design project which is based on the idea of lost in translation, from the inspiration from Parrish, I programmed a typewriter which goes wrong (the letter shown upside down on the screen). I tried to use the createGraphics() and then rotate the image, but it didn't work somehow, then I used translate() and rotate() in p5.js reference, but I struggled to make the letter appears on the left top corner rather than the right bottom corner, and also I have problem with swtiching lines, letters only go to the next line if I use backspace when I type, but I would like to use ENTER to control just like we normally do.

Anyone can help fix the problem please?

    var contents = "";
    var r,g,b;
    var bell;
    var ding;
    // var img;
    var button;

    function preload(){
      soundFormats('wav');
      bell = loadSound('typing.wav');
      ding = loadSound('return.wav')
      // img = loadImage('paper.jpg');
    }

    function setup() { 
      createCanvas(600,400);
      angleMode(DEGREES);
      // image(img,0,0,600,400);
      button = createButton("Savs as image");
      button.position(610,380);
      button.mousePressed(saveImg);
    }

    function draw() {
       //background(200);
       noStroke();
       fill(r,g,b);
       translate(560,360);
       rotate(180);
       textSize(40);
       text(contents,0,0,560,360)
    }

    function keyTyped() {
      contents += key;
      r = random(255);
      g = random(255);
      b = random(255);
      bell.play();
    }

    function keyPressed() {
      if (keyCode === ENTER) {
        ding.play();
      }
    }

    function saveImg(){
      saveFrames('library/Your text', 'png', 1,1);
    }

KevinWorkman

Like I said in your last question, you're going to have better luck if you post a more specific technical question. Saying "it didn't work somehow" doesn't give us any information to work from. And we can't run this code, because it requires files we don't have. Can you please post a MCVE and a more specific technical question?

Which line of code is behaving differently from what you expected? Isolate that into its own example program that demonstrates the behavior without any extra code.