Scrolling results from JSON

leevanchief

I am trying to make a list of football results stored in a JSON file scroll across the screen from left to right. I have tried so many ways but i cannot achieve this. Looking at my code i think that it doesn't scroll because txtX resets to 0 each run through draw. But, whatever way i change this it doesn't achieve the desired results... Here is my code:

var scores;


function preload() {

scores = loadJSON("stats.json");

}

function setup() {

createCanvas(1400, 700);



}

function draw() {

background(254);

var txtX = 0;

var txtY = 550;

var stats = scores.results;

for (var i = 0; i < stats.length; i++) {

textSize(12);

text(stats[i], txtX, txtY);

var wordWidth = textWidth(stats[i]);

var currentOffset = 15;

var currentwordX = wordWidth + currentOffset;   

txtX = txtX + currentwordX;


}                                                                

txtX = txtX - 1;

print(txtX);


}

//Here is my JSON

{ "description" : "FA Cup results; 7th January 2017.", "source" : "http://www.bbc.co.uk/sport/football/results", "results":[ "Manchester United 4-0 Reading", "Accrington Stanley 2-1 Luton Town", "Barrow 0-2 Rochdale", "Birmingham City 1-1 Newcastle United", "Blackpool 0-0 Barnsley", "Bolton Wanderers 0-0 Crystal Palace", "Brentford 5-1 Eastleigh", "Brighton & Hove Albion 2-0 Milton Keynes Dons", "Bristol City 0-0 Fleetwood Town", "Everton 1-2 Leicester City", "Huddersfiled Town 4-0 Port Vale", "Hull City 2-0 Swansea City", "Ipswich Town 2-2 Lincoln City", "Millwall 3-0 Bournemouth", "Norwich City 2-2 Southampton", "Queens Park Rangers 1-2 Blackburn Rovers", "Rotherham United 2-3 Oxford United", "Stoke City 0-2 Wolverhampton Wanderers", "Sunderland 0-0 Burnley", "Sutton United 0-0 AFC Wimbledon", "Watford 2-0 Burton Albion", "West Bromwich Albion 1-2 Derby County", "Wigan Athletic 2-0 Nottingham Forest", "Wycombe Wanderers 2-1 Stourbridge", "Preston North End 1-2 Arsenal" ] }

kfrajer

Format your code. Press the gear icon to edit your post. Select your code and press ctrl+o to indent and format your code. Leave a line above and below the code.

Kf

leevanchief

thanks kfrajer.

kfrajer

Try moving line 22 to outside draw(), like to Line 17. Also, don't initialize it to zero but to the canvas' width like this: var txtX = width; The reason is because you are decreasing this value in Line 45. The effect is that your text will be going from right to left.
https://p5js.org/reference/#/p5/width

Line 30, textSize can go in setup()

Notice your text will flow fast. You can slow it down by either calling

frameRate(2);  // 2 frames per second. Add this line inside your setup() function  
// p5js.org/reference/#/p5/frameRate

or by using this trick in line 45:

if(frameCount%15==0) txtX = txtX - 1;   
// p5js.org/reference/#/p5/frameCount

The effect of the last trick is to execute the command every 15th frame (or in other words, 2 times per second). Notice Processing usually runs at 30 frame per second.

Kf

leevanchief

Its so strange, it is still not working. I run print(txtX); and the txtX value increase hugely despite slowing the frame rate down to 2 like you said... did the code work with you? Thanks for your input :-)

kfrajer

txtX value increase hugely

I can see an issue. You are changing your value of txtX at two points, line 40 and 45. You need to decouple them.

Kf

var scores; 
var stats;
var txtX=0;
var txtY = 550;    

function preload() { 
  scores = loadJSON("stats.json"); 
}

function setup() { 
  createCanvas(1400, 700); 
  textSize(12);
  frameRate(2);

  txtX = width;   //Can only be init after createCanvas() is called!!!
  txtY = height*0.78;   //550;  //THIS way it will adjust automatically to diff canvas size
  stats= scores.results;
}

function draw() { 
  background(254); 

  var currX=txtX; 
  for (var i = 0; i < stats.length; i++) {
    text(stats[i], currX, txtY);
    var wordWidth = textWidth(stats[i]);
    var currentOffset = 15;
    var currentwordX = wordWidth + currentOffset;  
    currX = currX + currentwordX; //THIS will lay out scores left to right
  }                                                               

  txtX = txtX - 1; //THIS will move your score banner from right to left

  if(currX<0) txtX=width;  //IMPORTANT: It will reset your banner to start from the right side when it has swept through your screen.

  print(txtX);
}

leevanchief

Thanks so much, that works! One question however: why do you initialise var txtX = 0; as a global variable and then again in setup as: txtX = 0; ?? Thanks for all of your help.

GoToLoop

Obviously those 1st initializations for both txtX & txtY were completely unnecessary, b/c the actual correct values only happen within setup(). ;;)

Better leave them all uninitialized: let scores, stats, txtX, txtY.
They'll get their correct values later after all. >-)

leevanchief

ah. thanks GoToLoop