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);
}
data = loadJSON("comments.json",gotData);
}
function gotData(){
console.log(data);
}
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);
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.