D3 Examples - FnCrandow

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
</head>
​
<body>
  <script>
    wait=1000;
    
function setup() {
  createCanvas(640, 480);
  image(img,0,0,400,200);
  now=millis()
  
  
}
    function preload() {
        img = loadImage("https://foodandcode.github.io/assets/images/footer_back.png");
      var url = 'https://api.openweathermap.org/data/2.5/weather?APPID=81ebc63f8b56bfcf22d04eb32c223d8e&q=Moscow,RU'
loadJSON(url,drawWeather); 
    }
​
     function drawWeather(weather) {
​
  // Get the loaded JSON data
  console.log(weather); // inspect the weather JSON
  var humidity = weather.main.humidity; // get the main.humidity out of the loaded JSON
  console.log(humidity); // inspect the humidity in the console
​
  background(40, 90, 200);
  fill(0, 255, 255, humidity); // use the humidity value to set the alpha
  for (var i = 0; i < 50; i++) {
    ellipse(random(width), random(height), 30, 30);
  }
     }
       
function draw() {
  //text(a)
  fill(255,0,0,12);
      rect(width/2  + cos(millis()/100)*100 + random(10),
           height/2 + sin(millis()/100)*100 + random(10),
           50, 50); 
  if ((millis()-now)>wait) {
    now=millis()
  if (mouseIsPressed) {
    background(0)
  } else {
    background(255)
  }
  
  tint(255,255,255); // Color, so plays like stroke and fill
    image(img,random(width)-100, random(height)-50, 200, 100);
  //ellipse(mouseX, mouseY, 80, 80);
  }
}  </script>
</body>
​
    