✨bloggu✨

welcome back :^)

2020-04-12T00:00:00-07:00

back and better than before with a fresh update and qol fixes ^_^

Big Moo, Big Ideas

2016-12-21T00:00:00-08:00

Throwback to Wildhacks 2016! Hosted at Northwestern, this was the first hackathon I attended back in 2014. Now, this is my 5th hackathon :) My best friend from high school G came from UIUC to make something cool, and we wanted to keep the project relatively freeform and lowkey - we just wanted to have fun, especially with the increasingly intense pressures from school (heh). Since receiving my Google Cardboard at Grace Hopper, I’ve really wanted to make music-related VR experience for the platform.

(the egg that started it all)

Let’s get down to our process, shall we?

Friday, November 18th 2016

We found a really amazing library for making VR experiences using web technology, WebVR, and from this we found the framework we would ultimately use, A-Frame (It’s pure magic!!! Do check out their dazzling samples)
After forking the A-Frame repo, we began brainstorming concepts (including: sampling beats on 3D objects, visualizing music in VR, incorporating moos and quacks (some longrunning jokes between us), and creating a music player with ‘sick visuals’)
We familiarized ourselves with the framework by playing around with the Hello World demo and the provided boilerplate
and created a Slack channel to keep all of our links and files neatly organized in one place

(no, we did not pull all nighters - 36 hours are brutal)

Saturday, November 19th 2016

We set up our repo with a Github pages branch (had to brush up on my git!)
and tested the Hello World demo
For our music, we selected and downloaded various sample packs from Prime Loops, and then combed through them to find suitable tracks and sound bites
Now, the learning phase - we went through the tutorials and documentation, slowly picking apart the Metaverse demo, changing and adding entities (mostly geometric shapes) to the scene
We figured out how to change the “sky” to a custom galaxy background, as well as make entities animated and interactive (finally we can play music!)
There are several types of interactive shapes in our scene: 1. a loopy, morphing overhead “sun” shape that continuously plays a looping track
1. several linked geometric shapes playing samples that are controlled by a central shape that acts like a switch
2. other spinning geometric shapes that play and pause music
3. orbiting stars to add visual interest and contribute to the space theme
4. a cat and a dog (that meow and bark, respectively, when you look at them)
5. lots of random foods, many of which use textures (cos we had free time and wanted to make goofy items floating in space) - how many can you spot?

Sunday, November 20th 2016

We wrapped up the night before, so we submitted in the morning
and celebrated a successful, goofy hackathon weekend with brunch :)

Overall, I was blown away by how much A-Frame streamlines the process of creating a VR experience! I’ve taken a computer graphics course in which we had to code even the simples shapes from scratch in WebGL, no libraries or anything. We really appreciated that A-Frame handles the camera, shading, basic geometries, clicks, converting between normal and VR views. Our project was just one html document - pure magic. This was the smoothest, most stress-free hack I’ve ever done!

Try Big Moo, Big Ideas for yourself on either web or mobile! (Source code here) We’d love to hear what you think. Of course, this hack shouldn’t be taken terribly “seriously” (as you might be able to tell from our Devpost submission), but we had so much fun over the weekend creating it! Working on a cool (stress-free) project with a good friend one weekend - what more could you ask for in a hackathon?

First Zine

2016-12-20T00:00:00-08:00

Recently (through Bubblesort zines and listening to podcasts) I discovered zines - a fun and snappy medium for sharing your own content – essentially mini magazines. I love the pocket-friendly size and creative liberty you have with zines, and they are historically associated with experimental subcultures. The organic, hands-on process of making your own limited batch of publications is very gratifying.

One weekend partway through fall quarter, I wanted to just take a break (especially having just returned from Grace Hopper), so I took a stab at making graphics with Sketch (don’t judge me) to digitally make a zine, in hopes of making physical copies using this tutorial.

I was a bit at a draw for topics, so I stuck with something close to heart: habits I am currently forming. I worked primarily with my beloved pastel rainbow color scheme and incorporated a lot of gradients and clean, simple geometric shapes. Numbering the pages helped with folding it all together in the end, as well as created a distinct ranking for these habits.

Update: My Site

2016-08-20T00:00:00-07:00

Here's a fun (read: colorful) update: I finally have the home page of my personal site up! I came up with the overall concept during this past school year (spring quarter of sophomore year, to be exact) and eventually got around to creating it over the last month or so. Once I was pretty satisfied with how the page looks, I bought a domain (that's a first), set up the repo, and put it all together. After lots of tweaking and experimenting, I'm really happy with the results so far! I wanted something that could really capture who I am and is aesthetically pleasing. Some of the effects (thanks to hover.css) that I like the most were actually completely on accident, for instance the faint white highlighting when you hover over the body text.

Up next, I'd like to add some graphics with cool entrance animations or even parallax-like effects when you hover on the 5 W's headers, and then flesh out the pages for the 5 W's. WHO will probably have some more details about me, including a picture of myself, WHAT will mostly likely highlight my favorite projects, some codepens in the future, as well as my resume, WHEN will probably have a timeline of sorts, WHERE a map, and WHY might have some of my inspos and a link to this blog.

You can find my little corner of the internet at ljhan.com.

ljhan?

2016-07-17T00:00:00-07:00

Heylo, and welcome! So, you’re probably wondering… ljhan? What could these five random letters possibly mean? Let me introduce myself and get some basic facts and stats out there: my name is Alyssa Liu and at the time this post is being written I’m a rising juinior at Northwestern University, where I study computer science, linguistics, and design. I am fascinated by the magic and the humanity of technology just as much as I love expressing myself creatively. Here, I want to let my thoughts and ideas roam freely, and share my projects and challenges with you, dear reader. Thanks for coming along for the ride c:

Long story short, ljhan is me - 劉錦涵 (liu2 jin3 han2, my Chinese name)/Alyssa Nichole Liu, and this site is where stories meet, from me to you.