Lumar-Clock
Note: for the version of code that was submitted before the due date (aka – the embed right below) was not tested for 10, 11, and 12 o clock times. (If I change the code structure significantly in my leisure time – like besides the superficial color values coded in – I will post new versions in a separate post)
If you notice, the fattest circle drawer draws out the hour digit, the next biggest gives the number by ten minutes, and the thinnest automated one draws out the single minute digits. Move the mouse very slowly and have fun entwining the lines with eachother!
I feel like my first explorations into this effect were more successful.
lumar-circlechanging
(you can find more process on that in the other post I made early in the week)
The background() function seems to have changed some of its abilities from last year to this year’s current p5 version (Edit of previous statement, I ran the program with an older p5 version but it was exactly the same. I must have remembered things wrong….pity- I could have sworn it was different)
ex: A background of 3 opacity put in draw() only overlays over the previous frame’s shapes once (or only to a certain extent before it seems it no longer effects previously drawn afterimages) – it seems overlaying multiple layers of opacity 3 does not = overall opacity of 3 * number of layers.
(above shows 3:46 pm – the colors reflect the kind of light and shadow expected at that time. The direction of the light also reflects the position of the sun if east was right and west was to the left. It’s how I know it’s pm as opposed to 3:46 am in the night)
this is the code that I used to convert hershey font data to vectors stored in arrays:
(edit of converthersshey link above – I don’t recall what version I posted for that. I’m pretty sure the final version that I used to generate the info used in the final clock that I posted was made after I started this post…….well, anyway, if anyone tries to run that program and it doesn’t work – here’s the up to date version:https://github.com/MohahaMarisa/Interactivity-computation/blob/master/Lumar_ConvertHershey/Lumar_ConvertHershey.js)
Concept mental map of all possible ideas for the clock: I wanted to establish a breadth of ideas before going in depth anywhere. I was too excited for the project just to explore only one area – which I’ll admit may or may not have been a bad thing given we have deadlines to meet. From the concept map, I really wanted to explore telling time through location and utilizing weather API’s to visualize realtime, location specific data. That combined with an interest in dendritic growth which later evolved into an exploration of recursive fractal trees (thank you Dan Shiffman!) ended up being a fairly…heavy program to figure out. The idea I actually settled on was actually just a tangent off a visual effect I coded up for fun.
The left page was a further exploration of possibilities for the location clock (tell time through the scene – ex: clock shows sunrise in China tells you it’s say…6 pm in Pittsburgh). The fractal/recursive trees would be generated according to certain presets that would allow it to grow within patterns specific to the region (ie – wider angles of branching to achieve the twisted/squat bonsai look as opposed to branches all reach fairly consistently up for tropical trees, etc). If I can finish debugging the start of that code – I will upload.
These were some inspiration pics:
The page to the right is for the idea I actually ended up doing – I had spent too much time experimenting and not narrowing down and focussing in one direction that I feared I wouldn’t have time to finish. Since I had the bulk of the visuals for this soft gradient circle clock, I had thought I would be able to finish it in a timely manner and debugging without losing sleep….so I switched over.
Reflection: I predicted very very wrong. This soft gradient clock was definitely not quick. Linearly interpolating presented very curious challenges because it was a series of vector points that I generated out of Hershey font data online. I thought some sort of vector path addition would work – but if it does, the solution evaded me. Paul Bourke ad more complex interpolation that I want to explore over the weekend so I can tweak this clock to look be smoother with it’s motion.
The colors of the clock writing spheres reflect the kind of light and shadow that are outside. (see process book for details) In retrospect, it would’ve been much much smarter to fill my color array with the HSB color mode in a for loop than to personally hand pick my colors. Other than that the direction of the light reflects where the sun is in the ‘sky’.
Ex: 6 o clock means the light part of the gradient is on the right (EAST) side of the circle as if a sun was rising and casting light on that side.
Things to improve on:
1.nonlinear interpolation
2. the concept of the piece (conceptually….not that insightful on anything)
3. Visually appealing and fun to interact wit but I should probably throw in some slight noise into the colors for minutes and hours to differentiate it with more than just size.
4. Time management/a more efficient ideating process
5. The code is inefficient in some places – but I couldn’t figure out how to make it cleaner without doing some major overhaul – will definitely see what I can do about it next time.
I’ll probably add things on just for fun over the weekend – feel free to check out this link for anything new:
https://rawgit.com/MohahaMarisa/Interactivity-computation/master/Lumar_CircleGradient/index.html
RESOURCES:
Cambu and Krawleb for inspiration and reference help! Thank youuuu! (they are awesome ppl to talk to for idea bouncing or a fresh perspective!)
Golan Levin the awesome
Hershey Text:
https://github.com/techninja/hersheytextjs/blob/master/lib/hersheytext.js
https://forum.processing.org/two/discussion/9520/hershey-line-font-library
and who else? Yup. Paul Bourke!