August 1: Final Presentation
0 Mermaids to go?!
What did you accomplish today?
A link to my final project presentation.
0 Mermaids to go?!
What did you accomplish today?
A link to my final project presentation.
0 Mermaids to go?!
What did you accomplish today?
Today, I went through my final presentation with Chris and Selim. I received some great feedback regarding my project and slides. I'm really struck my Selim's art and math inspired animations as well as Chris' creative aesthetic. I've learned so much from my classmates this semester and I'm very grateful for their feedback and support.
I also made my final mermaid! This one is extra special and involves my favorite furry creature who was named after the Iara mermaid of Brazil. :)
I would also like to share a folder with the teaching team containing all of the code for my mermaid project.
What are your goals for the next session?
I'm hoping to finalize all of the text on my mermaid pages and prepare a good presentation.
What can the teaching team do to help?
I think I'm good! Thank you all so much your help and support!!
The End is Near :(
What did you accomplish today?
Today, I created slides for my final presentation using reveal js availale here. It covers my time in the course this spring and summer with a focus on my final project.
I would also like to submit the following links to the teaching team:
The code pen of Eric should feature Eric's dog and a pulsating "Woof" sign, which should appear when the user clicks on the image. When the user presses a key, a woof noise should be heard.
Wrapping Up
What did you accomplish today?
Today, I made three mermaids animations using Adobe AfterEffects (AE) and CSS, including:
Fun with After Effects
What did you accomplish today?
Today, I made four mermaids animations using Adobe AfterEffects (AE) and CSS animations, including:
Fun with Photoshop
What did you accomplish today?
Today, I worked in Photoshop to design the Moana mermaid. I'm not happy with it yet, but I'm hoping to finish a draft tomorrow.
Progress and Circles
What did you accomplish today?
Today, I worked with Chris P. to apply javascript animations to a series of circles. I was able to change the colors and number of different circles, and swap out the images of the cats. After working on this for 30 minutes, I broke away from group work to focus on my mermaid map. An example of one of the circle designs can be found here.
I also worked with Alec and Bakhtiar to determine why my most recent changes aren't appearing on Github.
What are your goals for the next session?
I'm hoping to create my final two JS animations: (1) Moana of Polynesia and (2) Sirenas of the Phillipines. In addition, I'm hoping to create 6 GIFs to represent the other mermaids.
What can the teaching team do to help?
I'm not sure yet! I'm still in the design phase for the Sirenas and Moana.
First Drafts and Presentation Ideas
A first draft of my project can be found "Map of Mermaid Lore" here. Although for some reason, the most recent mermaids I've added/updated to the Middle East and England aren't appearing. I've played around with a couple things in Github, but I'm still not sure why this is.
I'm very excited to begin working on the final presentation for this class. I'm debating whether to learn how to make a Reveal JS presentation (which would be cool to know how to do) or make a video describing the work I've completed in this course. I'm also deciding whether to incoproate the work I did last semester into the presentation or not. A tentative outline might be: (1) describe my interest in mermiads/the sea, (2) describe my process deciding on the idea, (3) share initial mockups, (4) share milestones in the development of the project, and (5) display the map.
Mermaid of Zennor
What did you accomplish today?
Today, I worked with Molly to find a new solution to animating Atargatis (mermaid for the Middle East page). It now moves back and forth within a div, which creates the illusion of movement. I also created an animation to represent the Mermaid of Zennor, which I am quite happy with. I made hearts and music notes appear using keyframe css animations.
What are your goals for the next session?
I'm hoping to work on two more JS/CSS animations to represent: (1) Sirenas of the Phillipines and (2) Moana of Polynesia. I'm also hoping to figure out why some of my changes aren't appearing on Github. I'm pretty sure that there is something very basic and fundamental that I'm doing wrong.
What can the teaching team do to help?
I may need help on Wednesday troubleshooting my Github process.
Twin-tailed Mermaid
What did you accomplish today?
Today, I designed and animated the twin-tailed mermaid of North America. The background shifts in and out of the frame, which I accomplished by animating the z-axis. The twin-tailed mermaid appears to move closer to the frame, which I accomplished using the shrink animation.
Sedna
What did you accomplish today?
Today, I designed and animated the Sedna mermaid of Canada. I found a painting of Sedna online and cut out the different sea creatures along her hair. I placed them on top of each other in 3D space and implemented a hue-rotate effect in CSS.
Atargatis and Yemaya
What did you accomplish today?
Today, I designed and animated the Atargatis mermaid of ancient Syria. I tried to create movement by switching out two versions of the mermaid, but I'm having trouble getting this to work. (Atargatis disappears for a period of time and I'd prefer her image just swap back and forth.) I'm planning to work on this effect in studio time on Monday.
I also designed and animated the Yemaya mermaid of Africa, which glows when the user hovers over it.
Positioning on Hover
What did you accomplish today?
Today, I worked with Shaunalynn to find a solution to make the mermaids glow on hover. It turns out that I was missing several divs in the HTML, so I had positioned the mermaids in relation to each other, not the map. After the studio session, I worked from home to correctly positioning the mermaids. I also implemented a solution to make the mermaids glow when the user hovers over them.
I also followed the advice of Alec and guidance from my classmate and added a custom font to my map, so the region text that appears on hover matches the header text. I also made the background blue to account for the white space that was appearing on the bottom of the screen. I'm really happy with the look and feel of the map, and I'm very grateful for the help and support of Shaunalynn, Alec, Molly, and my classmates in putting it together.
Arduino
What did you accomplish today?
Today, I worked with Eric to make a responsive rain effect using an arduino. When the user touches the LED, it changes the amount of light reaching the arduino, which makes the color changes from a dark to a light blue. In addition, we configured it so a rain effect appears when the LED is enclosed. Video below!
What are your goals for the next session?
I'm going to attend the optional session on Thursday to make small adjustments to my map. Over the weekend, I hope to build many of the mermaids.
What can the teaching team do to help?
I'm still reading through the materials Alec sent me, but it is very likely that I could use some pointers getting the mermaids to glow on hover and better position the map so it displays well on the page.
Embedding
What did you accomplish today?
Today, I successfully embedded a GIF and a CSS animation into my Europe and Australia pages. I also picked a new song for the map. I think I'm going with a royalty-free song by Moby, which he offers to students and independent filmmakers through (Moby Gratis). I've tentatively chosen the song "18" and I may add water sounds to it... still debating. I'm also busy reading through the links Alec sent me.
Excitement Meter
What did you accomplish today?
Today, I worked with Selim to create a physical computing project named the "Excitement Meter" Selim wanted to work with sound volumes to create a response in the browser. We worked with a code example Alec provided to create a happy-looking rainbow visualization. It changes dramatically when we whistle-- so fun!
What are your goals for the next session?
My goals for next session include:
What can the teaching team do to help?
I'm planning to attend the TA session on Thursday and may need some help with:
Video Animation
What did you accomplish today?
Today, I designed a 4-second video animation to represent the Melusina mermaid of France using key frames and a CC particle effect.
Melusina from Maisie on Vimeo.
Melusina's backstory: According to French lore, a nobleman named Raymond fell in love with a beautiful woman named Melusina and asked for her hand in marriage. She agreed to his proposal on the condition that he never see her on Saturdays. After Melusina gave birth to several deformed children, Raymond spied on her while she was taking a bath one Saturday night and discovered that she had the tail of a snake! Furious that Melusina had tainted his bloodline, Raymond confronted her and she left him for breaking his vow. It is said that Melusina now flies through the skies of France, crying out whenever tragedy is about to strike. (Mermaids: the Myths, Legends, and Lore by Skye Alexander, pg. 123)
CSS Animations
What did you accomplish today?
Today, I designed an animation for the Australian "Yawk Yawk" mermaid and implemented two animations using CSS. The Yawk Yawk now shakes and the background changes from cloudy to sunny to lightning. (The Yawk Yawk are thought to control the weather.) It was a little tricky to get the background to switch, but I was able to accomplish this by transitioning the z-axis. Progress- woot!
Mermaid Pages Exist!
What did you accomplish today?
Today, I created pages for the 16 mermaid regions and linked them to specific areas on the map. I listened to several great NPR podcasts while doing this and it was a very enjoyable process overall! I'm feeling really good about the progress I've made so far and my goals for the weekend are:
Things Move in Relation to Other Things- yay!
What did you accomplish today?
Today, I worked with Alec to position the mermaid icons on the page in relation to the map. I ended up going with Molly's original suggestion, although I learned a lot reading about CSS grids. I was making a --very silly-- error by not using the vw increments uniformly and instead using a combination of vw and px. I also made two mermaids links! Yay!
I plan to build out all of the individual mermaid pages tomorrow and then link them to the map.
CSS Grid Layout
What did you accomplish today?
Today, I workshopped my project ideas with two of my classmates who offered valuble feedback on the look and feel of my mermaid map. They were split on whether or not to include music that autoplays on the map page.
I spoke with Shaunalynn about using CSS grid layouts to make the mermaids on the map responsive and I'm currently reading this tutorial. I think accomplishing this will be the trickiest part of my project and I think I'll feel really solid once I figure it out.
What are your goals for the next session?
By the next session, I hope that my map is interactive and linking to the individual mermaid pages. From there, I hope to build out the other pages and make small JS/CSS/HTML or video animations to accompany them.
What can the teaching team do to help?
I'm going to the Sprouts space tomorrow night and could use some pointers for implementing the CSS layout.
Some Progress
What did you accomplish today?
I worked on putting together the map and positioning the mermaids. I had some mixed results. I wasn't able to turn the mermaids into links-- maybe because they're background images? I was also unable to add multiple mermaids, though I was successful in positioning one in a specific position on the map. I would like the map to take up the entire page without repeating or stretching, maybe by constraining the dimensions of the window-- if that is possible?
I'm wondering whether I should use Dreamweaver to create dynamic links on the map. This was Selim's suggestion (classmate).
I also tried building out secondary pages, but I'm having trouble lining up the header with the white text box-- essentially the same challenge I'm having with positioning icons on the map: Australia page.
Also, I fixed the images on my journal, so they should be visible via the public slack link.
Also, I played around with the Yawk Yawk image in CodePen, but don't have anything worth sharing yet. I'm happy to be getting the hand of DIVs, IDs, and Classes.
What are your goals for the next session?
My goal for next session is to come up with a plan for getting the mermaids onto the map, and for them to link to region-specific pages. This is my big to-do this week.
What can the teaching team do to help?
I could use some help deciding whether to stick with HTML/CSS/JS for the map or to try using Dreamweaver or another program to get the mermaids to function as dynamic links. Thank you!!!
Yawk Yawk Changes Color!
What did you accomplish today? With lots of help from Elise, Selim, Molly, and Shaunalynn, I now have a Yawk Yawk that is changing color-- wow! The link is available here: Colorful Yawk Yawk
Also, I learned that the pictures I was uploading to my journal are not visible to others because I was missing a step in uploading them via Alack-- eek!
What are your goals for the next session? My goal for today is to fix the problem with the pictures and continue working on the Yawk Yawk. In addition, I hope to take a look at the tool Molly sent me to place the mermaids on the map as they correspond to different regions.
What can the teaching team do to help? I am planning to attend the session on Thursday and will likely need some help with JS animation and aligning mermaids on the map. Also, I am hoping to figure out how to make the mermaids glow when the user hovers over them, and to make a dialogue box pop up identifying the region.
Mermaid Pages Mock Up
I completed a mock up that could be used for the mermaid pages. The background image might repeat as the length of the pages will vary. (I think it's abstract enough that this could work.) I took a photo of coral and ran it through a filter in Photoshop. The Yawk Yawk image will (hopefully) be replaced by a JS/CSS/HTML animation or video.
Also, Rihanna on a recent mermaid-inspired Vogue cover!
Descriptions are Complete and Organized by Region
I've finished the mermaid text, so every mermaid will be accompanied by a short paragraph describing their mythology. Although my list is certainly not comprehensive or exhaustive, I'm moving forward with it for now. I have divided the 48 mermaids into 15 categories (see list below) and drafted 1-2 paragraph descriptions for each.
New Font, New Mock-Up/Functionality
I've finally settled on a design and determined where the mermaids will be located. I swapped out the font and added a background shadow to the map, which gives it some depth. Ideally, when the user hovers over each mermaid, they will glow and a box listing the name of the region will appear. When the user clicks on the mermaid s/he will be brought to a page listing the mermaids native to that region.
Progress and Planning
What did you accomplish today?
Today, I worked with Molly to turn the map into a HTML file and get the mermaids to display on the page.
What do you aim to have done by next session?
My goals for the weekend are to: (1) finalize the mermaid text, (2) divide the mermaids up by region, (3) determine how they will display on the map, (4) settle on a final map mock up, (5) watch JS tutorial, and (6) mock up one secondary, specific mermaid page.
What can we (the teaching team) do to help?
Molly is helping me by writing a piece of JS that will make it easier to place the mermaids on the map in a responsive way.
More Feminine Colors
I wasn't happy with the previous map colors, so I swapped them out for more feminine shades. I'm not 100% happy with the font, but will stick with this design for now. I'm looking forward to animating it!
Jellyfish
I was having lots of trouble getting the wave background to fit the screen resolution of 1920 x 1080, so I decided on a jelly fish theme. I'm not sure if I like it. I hated it last night, but I'm coming around. The border for each mermaid page might be a coral theme. I haven't mocked it up yet. Inside each mermaid page will be either a picture, JS animation, or a video representing the mermaid along with some text describing the lore specific to that region.
One challenge I hadn't considered is that many regions are home to several mermaids. This may make the map appear cluttered with too many icons. One way to resolve this would be to group mermaids of different regions together somehow on the page. I'm not sure how much more complicated this would make the code.
Mermaid of Zennor
According to Cornish folklore, a strange and beautiful woman fell in in love with a man named Matthew Trewella after hearing him sing. After church one Sunday, Matthew followed her to an area marked by steep cliffs overlooking the sea and the pair was never heard from again. According to the legend, Matthew went to live with her under the sea. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 100)
Lake Goddess Aine
Ireland's Lake Goddess Aine is reputed to live at bottom of Ireland's Lough Gur. She was captured by the Earle of Desmond who stole her magic cloak and fathered her child. After the child was born, the Earle set Aine free and she returned to the lake. Years later, her son joined her in the lake. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 103)
Blue Men of the Muir
Dangerous blue-grey water spirits native to Scoltand, the Blue Men of the Muir were know to approach sailors and ask them a question. If the sailors answered incorrectly, the blue men would sink their ship and drag them overboard. The Blue Men were also rumored to cause high tides and dangerous stormy seas. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 103)
Mermaid of Derbyshire
The presence of a malevolent mermaid dwelling in a pool below Kinder Downfall in Derbyshire, England has sparked an unusual tradition. On Easter's Eve, townsfolk gather at the stroke of midnight to gaze into what is known as "Mermaid's Pool." They see either their future or are sucked under water by the mermaid. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 105)
Neptune and Amphrite
Though there is little mention of mermaids in Greek and Roman culture, there are many water spirits and water deities, which may have served as the inspiration for mermaids. Water nymphs were sweetly seductive, nubile creatues dwelling in both fresh water (known as naiids) and oceans (known as oceanids). In Greek mythology, the powerful serpent-like river god Oceanus was able to circle the earth with his massive body and his wife, Tethys, created the world's 3,000 rivers. Triton is the best known of the Greco-Roman water gods. He was the son of Poseidon (Neptune to the Romans) and Amphrite, and the family lived together in a palace under the ocean. Triton is often pictured with a fish tail and blowing a conch shell. His music was said to control the sea. In addition, the Greek's Aphrodite and the Roman's Venus have acquatic qualities in common with Atargatis, the first mermaid. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 83-87)
Selkie
Appearing in Scottish, Irish, and English lore, selkies are mysterious creatures who don seal skins that enable them to live freely on land and sea. When they're ready to come ashore, selkies remove their seal skins and transform into human beings with no visible aquatic characteristics. Know to be both male and female, selkie women are especially beautiful with enchanting singing voices. Selkies can live on land for long periods of time and form close relationships with humans. Some even start families, though they often yearn to return to their true home, the sea. Unlike other types of mermaids, selkies are generally benevolent towards humans, and fishermen consider selkie sightings to be good luck. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 94-96)
Merrow
Known in Ireland as The Merrow, these menfolk are benevolent and gentle creatures with human torsos and fish-like lower bodies. They can be both male and female and are known for their enchanting singing voices, webbed fingers, and cohuleen druiths- magical red hats that allows them to live underwater. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 97)
Atargatis
Known as the world's first mermaid, Atargatis was a powerful deity worshipped by the ancient Assyrians. She was associated with the moon, fertility, and life-giving water.
"Mythology connects both the moon and water with the dark, mysterious, and ever-changing nature of women. Early people both revered and feared their female deities. These qualities, which people throughout the ages have associated with mermaids, may have originated with Atargatis." (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 78)
Enki
Revered by residents of ancient Sumer (present day Iraq), Nammu was the sea goddess who birthed humankind. Sumerians also worshiped her son Enki, lord of water and wisdom. Enki is often pictured with water flowing from his shoulders and has ties to serpent deities found in other cultures. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 81)
Ea
According to the ancient Babylonians, all of the earth floated atop fresh water and was ruled by Ea. Considered to be the earliest depiction of a merman, Ea was often represented with a human torso and the tail of a fish, though he was also depicted with fish scales and as a hybrid of a man and bird. In addition to holding dominion over the sea, Ea was the Babylonian's god of wisdom, art, and farming. (Mermaids: the Myths, Legends, and Lore by Syke Alexander, pg. 80)
Modern vs. Ancient Mermaids
When I was little my favorite Disney character was the Little Mermaid-- hands down. With her bright red hair, green mermaid tail, and conflicting desire to occupy both the land and sea, I couldn't image a more compelling backstory or costume. I grew up visiting my grandparents who lived in Cape Cod, and I image my affinity for the Little Mermaid and the ocean began there. I loved swimming, searching for shells, and making sandcastles. As an adult, I feel a sense of calm when I visit the ocean and I think that my fondness for mermaids lies in nostalgia for my childhood summers spent at the beach.
It's interesting to me that ancient mermaids were associated with danger, vanity, and uncertainty. Across the ancient world, they were depicted as beautiful, but fearsome, and likely to drag unsuspecting passerbys to a watery grave. Today, mermaids adorn walls in beach houses, table cloths and place settings, and attend children's birthday parties. They're a staple in summertime consumer products. I look forward to working on my project and learning more about this once fearsome mythic figure.
Pinning!
Pinterest is my favorite social media platform. I love finding recipes, home decor, and design inspiration on this site. As part of this project, I have expanded my sea-themed board to include mermaids. I've found it to be superior to a google search in terms of image quality, and I would recommend it to anyone looking to find inspiration or refine the aesthetic for their project.
My mermaid board:
Mermaid Map
Today, I played around in Photoshop trying to establish a style for my final project. I hope to create an interactive map displaying mermaid lore across the world. The map will feature small mermaid silhouettes representing mermaids specific to different regions of the globe. I think it's important that the design have a unified appearence, so I'm considering running all of my imagery through the same "cut-out" filter in Photoshop.
Eric's People Card Plus "Woof!"
Today, I worked with Molly to enhance my people card for Eric. In the new and improved Eric card, the user clicks on the card and the "Woof" dialogue box appears and changes sizes. The dog also appears. When the user presses a key, a "Woof" sound happens-- this is so fun!
See the Pen Eric Jonassen People Card (by Maisie) by Maisie (@Maisie28) on CodePen.
In addition to working on my people card, I also brainstormed final project ideas with the people at my table. I'm excited to get started on my map representing mermaid lore. In addition to creating the map using CSS and HTML, my hope is that I can incoporate animations into the mermaid representations.
Interactive Installations
My "something cool" is a creative studio that Alec informed me of last semester called Design I/O, specializing in immersive installations for exhibitions and public spaces. Design I/O's website showcases their stunning interactive art pieces, including two that I am particularly fond of: Connected Worlds and Weather Worlds.
According to Design/IO, "Connected World's is a large scale immersive, interactive ecosystem developed for the New York Hall of Science. The installation is composed of six interactive ecosystems spread out across the walls of the Great Hall, connected together by a 3000 sqft interactive floor and a 45ft high waterfall. Children can use physical logs to divert water flowing across the floor from the waterfall into the different environments, where they can then use their hands to plant seeds. As the different environments bloom, creatures appear based on the health of the environment and the type of plants growing in it." Weather Worlds is "an interactive installation that grants children weather controlling superpowers...Using their bodies children can conjure a storm, release a twisting tornado or rain down bolts of lightning from their fingertips."
Both installations remind me of an exhibition that was housed at the Museum of Science in the 90s when I was growing up. Visitors would stand in front of a wall and see colorful projections of their silhouettes. A camera-like feature would cause the silhouettes to freeze at regular intervals. It was so cool! I think it's amazing how programming and physical computing have evolved to produce such striking, impactful art!
People Card
My people card for Eric has undergone several iterations. I used a series of Photoshop filters to achieve a sketch effect for his portrait and I found some fun 70s wallpaper to serve as the background. My original idea was to have the "Woof! Woof" dialogue box appear, followed by Eric's beagle, which I'd hoped would ascend upwards within the frame. I figured out how to make the beagle appear when the user hovers over him, which looks okay too. Going forward, I'd like to iterate on Eric's people card and make the beagle rise after the user clicks on the card. I'd also like to incorporate a "Woof" noise and event listener.
See the Pen Eric Jonassen People Card (by Maisie) by Maisie (@Maisie28) on CodePen.
General Reflections
Although sometimes difficult, I truly appreciate the problem-solving, project-based nature of this course. In creating Eric's people card I ran into a host of challenges trying to layer images atop one another. I've found that programming in small increments works better for me than spending several hours straight working on a project. It's helpful to address a challenge with a fresh pair of eyes.
Eric's People Card
It's the second day of class and I'm excited to be working on Eric's people card. I came up with four mock ups based on his interest in scuba diving as well as his love of steak, video games, and his pet beagle. I'm getting used to using Github Desktop, Sublime Text, and Slack, and looking forward to increasing my familiarity with these tools.
