Challenge:

Build upon a Design Challenge (or create something entirely new) to develop a socially useful, beneficial, or positive tool, application, or artwork. This project will be evaluated on its technical, aesthetic, and conceptual merits. You have six weeks to build this project, so its scope should be equivalent to six design challenges (i.e. MUCH more robust and polished than the previous Design Challenges).

You must also produce a Final Project Proposal Video (no more than one minute) due on November 18.

We will also have Working Critiques on December 2.

Final Project Critiques will be on December 9.

Solution:

Sky Gen – moved to p5.js from Processing
Building on my Milky Way natural scene creator from Design Challenge 6, my final project is an interactive postcard generator with the National Solar Observatory’s Inouye Solar Telescope as the main attraction. The telescope is nearing completion in Hawaii. I wanted a way to inspire and educate the public about the telescope and the Sun while creating something.
Retro, Depression-era National Park posters serve as the inspiration for this project.
NASA also has leveraged this look for their series of planet and exoplanet posters. I’ve always wanted to build on this concept.
How Built:
Built in HTML, raw JavaScript, p5.js and CSS, users choose their sky and Sun and a telescope. Ultimately, I will add a factoid and the ability to choose either poster or postcard. I opted for a “build your own” approach and scratched the random creation feature. I think it works pretty well.
Highlights:
A lot of combinations exist in this app but overall the interface is simple. And performance is snappy. The sky background drives the overall color palette for the poster. To that end, the identifier placard is placed once the sky is selected. I experimented with randomizing sky gradients but in the end settled on locking in more natural looking gradients. I think the remaining sky backgrounds, especially the night and eclipse skies, create a solid base to make some interesting art.
At first, I was going to silhouette the telescope. But after spending too much time on this phase, I didn’t find the results satisfying. So I switched to posterizing different images of the scope which matches more closely the aesthetic of the National Park posters.
 
Lessons:
Some challenges for this project were, and remain, in the migration of the Milky Way generator from Processing into p5.js. And I almost didn’t get this critical part done. The basic port was straightforward and was one of the first tasks to complete. This sketch is one of my all-time favorite creations. The hurdle was figuring how to target the Milky Way output to the poster’s display div while still placing the placard. Maybe this project would have been easier using p5.js instead of blending tools.

Some difficulties uncovered include:

  • I experienced yet another reminder of the pitfalls of timely design by committee as the design phase stretched. In the end, I just built the project but I will have to return to customize for Observatory purposes.
  • Building the prototypes faster and settling on artwork sooner would have eased some headaches later in the process.
  • Fine-tuning the CSS…it’s always the CSS.
  • Printing or exporting the poster. This challenge was largely unforseen and the difficulty lies in the nested nature of the poster div display. I am still writing some code that traverses the DOM to assist with this. This deficiency affects printing, emailing, or sharing the creations on social media.

One unexpected discovery comes straight out of the ‘if you don’t use, you lose it’ playbook. I currently spend my days creating content and developing in WordPress using PHP, Javascript and CSS. I have lost my chops for coding straight HTML even though I’ve been coding in this environment for more than 20 years. Humbling.

 

Because this project continues as a possible feature with the National Solar Observatory, I’ve fixed some things, such as the positioning of the telescope. It was not responsive. I’ve anchored the telescope to the poster div and adjusted position to accomodate.

I’ve created the ability to add some sun facts. I’ve been working on the ability to grab and move this blurb around to make the layout more flexible. It’s hard to foresee all possibilities with the positioning of the Sun and telescope. Allowing users to move this blurb into better positions seems a great way to add some creativity to the project.

It seemed like a good idea with all the elements to be able to remove items offering users even more combinations to create. This is accomplished by clearing the div with a JavaScript function that passes in the elementID of the div that needs to be cleared. This one function can be used for any div on the page.

function clearBox(elementID){
document.getElementById(elementID).innerHTML = “”;
}

Added a print button but this is not displaying the div correctly. Working on a media directive for print that will take care of this. It’s still a work in progress. The Save button works like a charm though. Next up is ability to email or post to social media.