Scrolling results from JSON

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" ] }

Answers

  • 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

  • thanks kfrajer.

  • edited February 2017

    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

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

  • Answer ✓

    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);
    }
    
  • 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.

  • edited February 2017 Answer ✓

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

  • ah. thanks GoToLoop

Sign In or Register to comment.