I was inspired by the Matrix/green Digital Rain tutorial and wanted to use JSON/API in it for learning it.
It was interesting to find APIS and tried to visualize it, but I found out that my foundation of using logic in coding is not strong enough yet, so I decided to use simple JSON file with more complex logics.
I chose the Instagram .Json file of my account and chose to use comments in my account.
Then I console.log it and found out there is an array with 719 length. And each one have 3 things in it.
I want to use the second [2] for picking the comments.
And I tired to visualize it as a whole first.
function preload(){
   data = loadJSON("comments.json",gotData);
}
function gotData(){
  console.log(data);
}
And I followed the tutorial...however, the logic of that code is to difficult to be understand, I couldn't fully absorb the logic of it. So I recoded it and make it into my own logic. 

reasons: The code in the tutorial never use class. And it use functions within other functions' functions...
Here is my code:
function setup(){
  createCanvas(window.innerWidth,window.innerHeight);
  //background(0);
  textFont('Consolas');
  textSize(symbolSize);
  symbol = new Symbol(width/2,height/2,random(0.5,10),20);
}

function draw(){
  background(0,10);
  for (i = 0;i<=random(2,7);i++){
    symbol.render();
  }
class Symbol{
  constructor(x,y,speed,opacity){
  this.x = x;
  this.y = y;
  this.value;
  this.speed = speed;
  this.changeSpeed = floor(random(5,30));
  this.opacity = opacity;
}
 rain(){
    if(this.y>=height){
      this.y=0;
    }else{
    this.y += this.speed;
  }
}
 render(){
    fill(0,255,70);
    stroke(5);
    if(frameCount % this.changeSpeed ==0){
    let randomIdx = floor(random(0, data.media_comments.length));
    this.value = data.media_comments[randomIdx][1];

    text(this.value,this.x,this.y);
    this.rain();
  }
  }
}

I struggled a lot for making it rain in the whole screen....I still didn't figure it out, but I will keep figuring and trying.
Back to Top