xxxxxxxxxx
105
let data;
let slider;
let starsCount = 11;
let months = [
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
"Jan",
"Feb",
];
let zeroRadius = 125;
let oneRadius = 200;
let cold, warm;
function preload() {
data = loadTable("giss-data-apr-11-2023.csv", "csv", "header");
}
function setup() {
createCanvas(600, 600);
cold = color(0, 0, 255);
warm = color(255, 0, 0);
slider = createSlider(0, data.rows.length * months.length - starsCount);
slider.size(width);
slider.input(draw);
noLoop();
}
function draw() {
background(0);
if (frameCount == 1) {
translate(300, 300);
frameCount++;
}
data.rows
.map((row) => row.arr.slice(1, 13)) // extracting only the values
.flat() // merging into 1 array
.map((x, i, arr) => [parseFloat(arr[i + 1]), parseFloat(x)]) //making [next,current] pairs
.slice(0, -starsCount) //removing the stars
.slice(0, slider.value()) //limiting the lines
.map((v) => v.map((x) => map(x, 0, 1, zeroRadius, oneRadius))) //remapping to radius
.map(([a, b], i) => {
let avg = map((a + b) / 2, zeroRadius, oneRadius, 0, 1);
stroke(lerpColor(color(255), avg < 0 ? cold : warm, abs(avg)));
let angle = map(i, 0, months.length, 0, TWO_PI) - PI / 3;
let x1 = a * cos(angle);
let y1 = a * sin(angle);
let x2 = b * cos(angle - PI / 6);
let y2 = b * sin(angle - PI / 6);
line(x1, y1, x2, y2);
});
stroke(255);
strokeWeight(2);
noFill();
circle(0, 0, 500);
circle(0, 0, zeroRadius * 2);
circle(0, 0, oneRadius * 2);
textAlign(CENTER, CENTER);
textSize(16);
fill(255);
noStroke();
text("0°", zeroRadius + 10, 0);
text("1°", oneRadius + 10, 0);
months.map((month, i) => {
let angle = map(i, 0, months.length, 0, TWO_PI);
push();
let x = 264 * cos(angle);
let y = 264 * sin(angle);
translate(x, y);
rotate(angle + PI / 2);
text(month, 0, 0);
pop();
});
textSize(32);
let year = 1880 + Math.floor(slider.value() / 12);
text(year, 0, 0);
noFill();
stroke(255);
}