KeuzeProject-Dodo-Scrap- WeatherSystem

https://editor.p5js.org/SuperiorCrane1/sketches/p3V8dLgnK

var city = "New York City";
var icon;

var cn;
var fcn;
var scn;
var bcn;
var srn;
var rn;
var tsn;
var sn;
var mn;

var cd;
var fcd;
var scd;
var bcd;
var srd;
var rd;
var tsd;
var sd;
var md;

function preload() {
  loadJSON(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=14a93f26717be81876d666a58179967a&units=metric`,
    gotData
  );
  //night weather
  cn = loadImage("/01n.jpg");
  fcn = loadImage("/02n.jpg");
  scn = loadImage("/03n.jpg");
  bcn = loadImage("/04n.jpg");
  srn = loadImage("/09n.jpg");
  rn = loadImage("/10n.jpg");
  tsn = loadImage("/11n.jpg");
  sn = loadImage("13n.jpg");
  mn = loadImage("/50n.jpg");

  //day weather
  cd = loadImage("/01d.jpg");
  fcd = loadImage("/02d.jpg");
  scd = loadImage("/03d.jpg");
  bcd = loadImage("/04d.jpg")
  srd = loadImage("/09d.jpg")
  rd = loadImage("/10d.jpg")
  tsd = loadImage("/11d.jpg")
  sd = loadImage("/13d.jpg")
  md = loadImage("/50d.jpg")
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  //night weather
  if (weer.weather[0].icon == "01n") {
    tint(255, 150);
    image(cn, 200, 200, 400, 400);
  } else if (weer.weather[0].icon == "02n") {
    tint(255, 150);
    image(fcn, 200, 200, 400, 400);
  } else if (weer.weather[0].icon == "03n") {
    tint(255, 150);
    image(scn, 200, 200, 400, 400);
  } else if (weer.weather[0].icon == "04n") {
    tint(255, 150);
    image(bcn, 200, 200, 400, 400);
  } else if (weer.weather[0].icon == "09n") {
    tint(255, 150);
    image(srn, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "10n")) {
    tint(255, 150);
    image(rn, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "11n")) {
    tint(255, 150);
    image(tsn, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "13n")) {
    tint(255, 150);
    image(sn, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "50n")) {
    tint(255, 150);
    image(mn, 200, 200, 400, 400);
  }

  //day weather
  else if ((weer.weather[0].icon == "01d")) {
    tint(255, 150);
    image(cd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "02d")) {
    tint(255, 150);
    image(fcd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "03d")) {
    tint(255, 150);
    image(scd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "04d")) {
    tint(255, 150);
    image(bcd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "09d")) {
    tint(255, 150);
    image(srd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "10d")) {
    tint(255, 150);
    image(rd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "11d")) {
    tint(255, 150);
    image(tsd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "13d")) {
    tint(255, 150);
    image(tsd, 200, 200, 400, 400);
  } else if ((weer.weather[0].icon == "50d")) {
    tint(255, 150);
    image(md, 200, 200, 400, 400);
  } 

  fill(0);
  textSize(70);
  text(round(weer.main.temp) + "°", width / 2, height / 3 + 10);

  strokeWeight(1);
  noFill();
  textAlign(CENTER, CENTER);
  textSize(70);
  text(round(weer.main.temp) + "°", width / 2, height / 3 + 10);

  textSize(50);
  fill(0);
  text([city], width / 2, height / 6);

  strokeWeight(1);
  stroke(255);
  textSize(50);
  noFill();
  text([city], width / 2, height / 6);

  fill(0);
  textSize(25);
  text(
    "Feels like " + round(weer.main.feels_like) + "°",
    width / 2,
    height / 3 + 50
  );

  noTint();
  imageMode(CENTER);
  image(icon, width / 2, height / 2 + 35, 75, 75);

  fill(0);
  textSize(25);
  text(weer.weather[0].description, width / 2, height / 2 + 70);
  
  //wind
  push()
  angleMode(DEGREES)
  textAlign(CENTER)
  text('🔘', width/2, height/2 + 155);
  translate(width/2, height/2+152)
  rotate(weer.wind.deg);
  text('↓', 0, 0);
  pop()
  
  textSize(25)
  text(round(weer.wind.speed*3.6, 1) + ' km/h', width/2, height/2 + 125)
}

function gotData(data) {
  weer = data;
  icon = loadImage(
    `https://openweathermap.org/img/wn/${weer.weather[0].icon}@2x.png`
  );
}