icm

New tab window to the sky /  by Sebastian Morales

This idea was inspired by spending too much time in front of the computer and not enough time looking at the moon. 

I first started by looking at the Astronomical Applications Department website (aa.usno.navy.mill), in particular at their moon phase api. 

Here I learned that the most basic api call I could make was something like this:

"http://api.usno.navy.mil/moon/phase?date=today&nump=1"

Which in tern returned a JSON string with well... todays moon. 

{
  "error": false,
  "apiversion": "1.3.0",
  "year": 2016,
  "month": 10,
  "day": 27,
  "numphases": 1,
  "datechanged": false,
  "phasedata": [
   {
      "phase": "New Moon",
      "date": "2016 Oct 30",
      "time": "17:38"
    }
  ]
}

See how the date I entere (Oct, 27) doesn't match the date returned for the phase (Oct 30)? Thats because Oct 27 did not have a full phase and the next actual phase was Oct 30. 

 

This was my first swing at using APIs but I realized that I could go much deeper still exploring this same API.

The sun

Using a couple of extra parameters, I could get not only the phase of the moon but also the time it would set and rise for a given location. The same was true for the sun which made me excited about doing a day animation.

{
"error":false,
"apiversion":"1.3.0",
"year":2016,
"month":10,
"day":26,
"dayofweek":"Wednesday",
"datechanged":false,
"state":"NY",
"city":"New York",
"lon":-73.92,
"lat":40.73,
"county":"",
"tz":-5,
"isdst":"yes",

"sundata":[
            {"phen":"BC", "time":"6:52 a.m. DT"},
            {"phen":"R", "time":"7:20 a.m. DT"},
            {"phen":"U", "time":"12:40 p.m. DT"},
            {"phen":"S", "time":"5:59 p.m. DT"},
            {"phen":"EC", "time":"6:27 p.m. DT"}],

"moondata":[
            {"phen":"R", "time":"3:17 a.m. DT"},
            {"phen":"U", "time":"9:50 a.m. DT"},
            {"phen":"S", "time":"4:16 p.m. DT"}],

"closestphase":{"phase":"Last Quarter","date":"October 22, 2016","time":"3:14 p.m. DT"},
"fracillum":"15%",
"curphase":"Waning Crescent"
}

The structure is slightly different so it required a little tweaking but nothing crazy. What took a while to figure out is that for some days, the moon will set before it rises... WHAT??? This happens when the moon rises duing the evening and sets in the morning, as you would usually expect, the problem is that the moon is setting on the next different day. Which means that if you only look at one day, the moon will set before it rises. This kept causing all this problems in my animation where you would see the moon come out from the wrong side and set on the opposite time at the wrong time. 

At the end I decided to include this little program as my default new tab in chrome, meaning that every time I open a new tab I see a subtle reminder that there is more than pixels in this world, and that perhaps it is worth going outside to explore it.

Gradients!!! /  by Sebastian Morales

For this weeks assignment I wanted to explore making gradients and smooth transitions without using the lerpColor() function. This to have total control on the gradient and shape. 

This prove difficult to achieve on the online editor due to a bug that will think I was running infinite loops. I filed the bug but in the mean time hosted my sketch on amazon s3. 

Point Waves /  by Sebastian Morales

This is a simple animation demonstrating a couple of principles. The circles change size based on time, they also change size and color based on the mouse position. Every time the page is refreshed the color scheme also changes.

CUSTOM SLIDERS USING P5.JS /  by Sebastian Morales

Having some experience with P5, I wanted to take advantage of this assignment to do something that I can reuse later in future sketches. In the past I have used the DOM elements but didn't really like the default sliders so I decided to make my own.

Ideally I would like to make some sort of library of design tools that I can just drop into projects. Although currently I don't really know how to do that. 

Using the live web editor could be a life changer, it definitely made embedding my sketch on squarespace a lot easier.  After trying to do it for almost 1h in the traditional fashion I gave up and embed it directly from the editor.

A potential problem I see with this process is that anyone can modify the content of the sketch as long as they know link, which can be easily found from the developer tools.