what's up with my textWidth()

beccarose

Hey!

OMG I am so close to making a wonderful thing! BUUT::::

For some random reason (and I cannot see why) the textWidth() is always the wrong number on start up. It should be the width of "book", but it is different number and I cannot find where this different number comes from. When you click "more" for each subsequent request it is the right width. WHY oh WHY oh WHY? (any help or magic much appreciated)

the code is below and the images can be downloaded from here: https://www.dropbox.com/sh/vqi2mr7ri7j4p62/AADWxWIh2-ZegTFc0zSd0j2Ra?dl=0

Becca :)

//inspired automated sketches of by james paterson http://presstube.com/blog/category/james-paterson/ i wanted to experiment with 
//used some of my drawings +images and see what occurred
//becca rose 2016
// this kind of evolved into a random book cover generator


var img = [];

var imgW;
var aspect;
var imgH;
var randISBN1;
var randISBN2;
var imageSnapButton
var book;
var bookStart;
var textW = 0;

function preload() {
  // load images
  for (var i = 0; i < 35; i++) {
    img[i] = loadImage(i + ".png");
    println(i);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  noLoop();
  imageMode(CENTER);
  noStroke();


  // create button
  imageSnapButton = createButton('- M O R E -');
  imageSnapButton.position(40, 20);
  imageSnapButton.mousePressed(imageSnap);

}

function draw() {
  imageSnap();
}

/////////////////////////
//find the JSON data page
function newBook() {
  randISBN1 = ~~random(256);
  randISBN2 = ~~random(256);
  loadJSON('http://" + "openlibrary.org/api/get?key=/b/OL1' + randISBN1 + randISBN2 + 'M', gotData);
  println("textW =  " + textW);
}

///////////////////////
//make the image titles
function gotData(data) {
  book = data.result.title;
  textW = textWidth(book);
  println("book = " + book);
  println("textW =  " + textW);

    fill(20, 255, 70, 125)
    rect(38, 80 - 32, textW + 2, 39);
    fill(0);
    textSize(35);
    text(book, 40, 80);
}

////////////////////////////////
//function to make those imaages
function imageSnap() {
  background(255);
  //image randoms
  var rand1 = ~~random(35);
  var rand2 = ~~random(35);
  var rand3 = ~~random(35);

  //display images
  image(img[rand3], (width / 2) - 200, (height / 2) - 200, imgW, imgH);
  image(img[rand2], width / 2, (height / 2) - 100, imgW, imgH);
  image(img[rand1], (width / 2) + 200, (height / 2) + 30, imgW, imgH);
  newBook();
}

GoToLoop

• textWidth()'s result depends on current textFont() + textSize(), plus the String's parameter itself.
• However, you call textSize() after textWidth()! #-o
• So the value got from it before doesn't match anymore. :-SS
• Given you're using noLoop(), you need its redraw() counterpart every time the canvas needs to update.
• And it's much strange that imageSnap() is called back from both draw() & button's mousePressed().

beccarose

ahhhh yes so simple. fixed it! Thank you!

-I am not sure what you mean by using the redraw() -the sketch seems to work without that, but maybe I am missing something?

-also not sure what else I can do with imageSnap(). I have tried not putting it in draw, but I want to use it when I start the sketch. Would you have an alternative recommendation?

Thanks!!

GoToLoop

I have tried not putting it in draw(), but I want to use it when I start the sketch.

Well, call it at the end of setup() instead. *-:)

GoToLoop

... redraw() - the sketch seems to work without that, but maybe I am missing something?

Seems like p5.js doesn't need callback draw() in order to refresh the canvas like Processing Java does. :-??

In all Processing's variants, if we activate noLoop(), we've gotta call redraw() manually in order to refresh the canvas. 8-X

beccarose

Thanks -it works in setup :)

(I suppose if there is noLoop() draw function is acting a bit like setup!)