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.
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/92d65086-0f7b-49fe-8f45-e9cd64113adf_rw_1920.jpg?h=fcaf58f35c483b1ae4f54e56fc12e3ae)
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.
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/64dc04d1-26b4-4278-8a5a-ab418893a1c7_rw_1920.jpg?h=dde40f1c337b50873979f45b636d641b)
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/01ca4b16-2daa-494f-afd8-b994269c5696_rw_1920.jpg?h=3956806fa5b8f0b94837659a2d75cfb7)
And I tired to visualize it as a whole first.
function preload(){
data = loadJSON("comments.json",gotData);
}
data = loadJSON("comments.json",gotData);
}
function gotData(){
console.log(data);
}
console.log(data);
}
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/355b4d95-a421-4e9c-81cd-45c7c51281ed_rw_3840.jpg?h=73d92708fd04d28ed6fc5efda7828122)
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/adcae25e-dfb8-4f64-b871-3c943771c850_rw_3840.jpg?h=a3e3f5f69c99f45d184ec8d91ac9c2e7)
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...
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/e6333063-9fc1-4404-b6ba-9ed8a4bb64e4_rw_1920.jpg?h=7b09a37821580cb74823933ef72e4d15)
Here is my code:
function setup(){
createCanvas(window.innerWidth,window.innerHeight);
//background(0);
textFont('Consolas');
textSize(symbolSize);
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();
}
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;
}
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;
}
}
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();
}
}
}
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.