what's up with my textWidth()


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");

function setup() {
  createCanvas(windowWidth, windowHeight);

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


function draw() {

//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);
    text(book, 40, 80);

//function to make those imaages
function imageSnap() {
  //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);


  • edited November 2016 Answer ✓
  • 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?


  • 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. *-:)

  • ... 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

  • Thanks -it works in setup :)

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

Sign In or Register to comment.