function adjustValue(val,zoompoint, c){

  strokeWeight(2);

  stroke(c);

  //const pushstrength = constrain(sqrt(1 - abs(val - zoompoint)),0,1);

  const pushstrength = constrain(map(1 - abs(val - zoompoint),0,1,1,0),0,1);

  const anchorVal = val < zoompoint ? 0 : 1;

  const newval = (val   +    (anchorVal * pushstrength)) / (1 + pushstrength);

  const final = constrain(newval,0,1);

  line(normalToScreen(val),CENTERY - (100*pushstrength), normalToScreen(final),CENTERY );

  return final;

}

​

​

​

​

const MONTHSINYEAR = 12;

const DAYSPERMONTH = 30;

​

let left, right, CENTERY;

​

function setup() {

  createCanvas(800, 400);

  randomSeed(222);

  MYINFO.sets.locations.ranges.forEach(setColor);

}

​

function draw() {

  left = width*.1;

  right = width*.9;

  CENTERY = height*.5;

  background(220);

  strokeWeight(4);

  stroke(40);

  line(left,CENTERY,right,CENTERY);

​

  drawRanges();

  noLoop();

}

​

function mouseMoved(){

   draw();

}

​

function screenToNormal(mx) {

   return map(mx,left,right,0,1); 

}

​

​

function setColor(range){

    range.color=([rc(),rc(),rc()])

}  

function rc() {

   return random(100,200); 

}

​

function drawRanges(){

   MYINFO.sets.locations.ranges.forEach(drawRange);

​

}

​

function drawRange(range){

  const zoompoint = screenToNormal(mouseX);

  const midValue = (normalizeMonthAndYear(range.from) + normalizeMonthAndYear(range.to))/2;

  const adjustedMidValue = (zoompoint >= 0 && zoompoint <= 1) ? adjustValue(midValue,zoompoint,range.color) : midValue;

  const screenValue = normalToScreen(adjustedMidValue);  

​

  strokeWeight(4);

  stroke(range.color);

  fill(range.color);

  circle(screenValue,CENTERY,10);

}

​

function normalToScreen(val){

  return map(val,0,1,left,right);

}

​

​

​

​

function normalizeMonthAndYear(ym){

   return map(monthAndYearToDay(ym.m,ym.y), monthAndYearToDay(4,1974), monthAndYearToDay(9,2021),0.0,1.0);

}

​

​

function monthAndYearToDay(month,year) {

    return (((MONTHSINYEAR * year) + (month-1)) * DAYSPERMONTH);

}

​

function dayToYear(day) {

    return floor(day / (MONTHSINYEAR* DAYSPERMONTH) );

}

​

​

​

​

​

​

const MYINFO = {

    sets: {

        locations:

        {

            title: 'where i lived',            

            ranges: [

                  {name:'Philadelphia', from: {y:1974, m:4}, to: {y:1974, m:6}, img:"locations/philly/001_560.d.in Philadelphia, around 2 months old.jpg", yoffset:150},

                  {name:'Cleveland (Torbenson)', from: {y:1974, m:7}, to: {y:1976, m:6}, img:"locations/torbenson/003_560.c.Cleveland 1975 with Alice Joseph.jpg"},

                  {name:'St. Thomas', from: {y:1976, m:7}, to: {y:1977, m:6}, img: "locations/stthomas/012_560.a.St Thomas Lindberg Bay with Dad - taken early evening on a free public beach - a couple of minutes from our house - by the airport.jpg"},

                  {name:'Cincinnati', from: {y:1977, m:7}, to: {y:1978, m:6}, img: "locations/cincinnati/011_560.a.Cincinnati Fountain Square, Spring 1978 .jpg"},

                  {name:'Salamanca', from: {y:1978, m:7}, to: {y:1983, m:3}, img: "locations/salamanca/011_560.d.Christmas in Salamanca 1981 or so.jpg"},

                  {name:'Glens Falls', from: {y:1983, m:4}, to: {y:1986, m:6}, img: "locations/glensfalls/006_560.c.Sanford Street with Mrs Dorvee and Principal Andy Garuchio, Fifth Grade.jpg"},

                  {name:'Cleveland Heights', from: {y:1986, m:7}, to: {y:1988, m:6}, img: "locations/clevelandheights/021_560.a.with dad sick at euclid christas.jpg"},

                  {name:'Euclid', from: {y:1988, m:7}, to: {y:1992, m:6}, img:"locations/euclid/081_560.b.room in euclid.jpg"},

                  {name:'Cleve (Smiths)', from: {y:1992, m:7}, to: {y:1992, m:8}},              

                  {name:'Tufts (Lewis)', from: {y:1992, m:9}, to: {y:1993, m:5}, img:"locations/lewis/103_560.b.rob kogan in freshman lewis hall.jpg"},

                  {name:'Cleve (Witczaks)', from: {y:1993, m:6}, to: {y:1993, m:8}, img:"locations/witczaks/107_560.b.marnie in witczaks room summer 1993.jpg"},

                  {name:'Tufts (Hodgdon)', from: {y:1993, m:9}, to: {y:1994, m:5}},

                  {name:'Wigglesworth', from: {y:1994, m:6}, to: {y:1994, m:8}},

                  {name:'Tufts (Hodgdon)', from: {y:1994, m:9}, to: {y:1995, m:5}, img:"locations/hodgdon/131_560.a.anthony tony colindres.jpg"},

                  {name:'Wigglesworth', from: {y:1995, m:6}, to: {y:1995, m:8}},

                  {name:'Tufts (Bridge/Metcalf)', from: {y:1995, m:9}, to: {y:1996, m:5}, img:"locations/bridge/151_560.b.in bridge metcalf with rebekah.jpg"},

                  {name:'Waltham (1st Apt)', from: {y:1996, m:6}, to: {y:1997, m:5}, img:"locations/first/dylan_artsy_stuff__kirk_in_chair.jpg"},

                  {name:'Cambridge (Inman Sq)', from: {y:1997, m:6}, to: {y:1998, m:5}, img:"locations/inman/05_holiday__partypix__mo-gesture_560.jpg"},

                  {name:'Cambridgeport', from: {y:1998, m:6}, to: {y:1999, m:5}, img:"locations/cambridgeport/murphyrorar.jpg"},

                  {name:'Arlington (Crackerbox)', from:{y:1999, m:6}, to: {y:2000, m:6}},

                  {name:'Watertown', from: {y:2000, m:7}, to: {y:2002, m:1},img:"locations/watertown/04_fall__10-26_Thanksgiving_etc__p1010009_560.jpg"},

                  {name:'Waltham (House)', from: {y:2002, m:2}, to: {y:2004, m:5}, img:"locations/walthamhouse/2002-10-22_new_england_classic_gameers_and_salem_sunset__img_3410_560.jpg"},

                  {name:'Arlington Center', from: {y:2004, m:6}, to: {y:2008, m:4}, img:"locations/arlingtoncenter/03_560.19_party_pix__IMG_0004.jpg"},

                  {name:'Wigglesworth', from: {y:2008, m:5}, to: {y:2009, m:5}, img:"locations/wigglesworth/04_fall__2001_560.09.09_wigglesworth_stoop_with_aunt_susan_uncle_bill_and_six_flags__img_0880.jpg"},

                  {name:'Cambridge (Clay St)', from: {y:2009, m:6}, to: {y:2010, m:5}},

                  {name:'E Arlington (Milton)', from: {y:2010, m:6}, to: {y:2013, m:7},img:"locations/arlingtonmilton/2011_560.12.11.massmoca__IMG_0424.JPG"},

                  {name:'E Arlington (Mass Ave)', from: {y:2013, m:8}, to: {y:2017, m:4}, img:"locations/arlingtonmass/2013-11-02 22_560.11.14.JPG"},

                  {name:'Somerville', from: {y:2017, m:5}, to: {y:2021, m:3}},

                  {name:'Arlington (Mystic River)', from: {y:2021, m:4}, to:{y:2021, m:9}}

            ]

        },

    }

};