Temperature Max and Min on an Arc

NT3

Hey guys,

I'm new to Processing. I was wondering if someone could teach me how to make charts like the attached image. I'm using a .csv file and tried to come up with something by watching the MeteorStrikes tutorial by Nicholas Felton but it's pretty different. Hope someone could help me out! Thank you!!!

stomachion

One way: 1. translate the coordinate origin to the centre of the dial. 2. rotate coordinate axes for the hour of the day. 3. plot the triangle (I'd do it straight up to take advantage of symmetry about the axis), scaled for magnitude using map().

Plotting those triangles looks like it'll take many parallel lines to get the color gradient, using map to control the hue.

Could you plot them with arcs instead? I think it'll look better and be less ambiguous. With triangles, I don't know which point on the far end represents the temperature because they're at different radii. Or is it the area that represents temperature (and rainfall)?

stomachion

Here's a start:

    size(800, 800);
    translate(width/2, 4*height/5);
    ellipseMode(RADIUS);
    colorMode(HSB);

    int radiusStart = 150; // the zero distance
    int radiusScale = 10; // pixels per degree
    float arcScale = PI/215; // angle per degree

    noFill();
    arc(0, 0, radiusStart, radiusStart, PI, TAU); // the zero arc

    float[] temperatures = new float[12];

    rotate(PI/2+PI/24); // initial rotation for zero angle

    float noiseSeed = random(100);
    //strokeWeight(10);

    for (int i=0; i<12; i++) {
       float temperature = noise(noiseSeed, i/2)*25; // random temp
       int radiusTemp = int(temperature * radiusScale);
       int radiusArcExt = 0;

       while (radiusArcExt < radiusTemp) {
         float arcAngle = map(radiusArcExt, 0, radiusScale, 0, arcScale);
         int arcHue = int(map(radiusArcExt, 0, radiusScale, 10, 12));
         stroke(arcHue, 255, 255, 80);
         arc(0, 0, radiusStart + radiusArcExt, radiusStart+radiusArcExt, PI/2-arcAngle, PI/2+arcAngle);
         radiusArcExt += 1;
       }
       rotate(PI/12);
    }

NT3

Thank you very much @stomachion for your time! I'll try to continue and play around with the code.

stomachion

Post back so we can see how you got on, and what you created!