Imitating interfaces

Heya! wip category is nice. I am using vvvv to recreate existing interfaces I see to learn about what goes into creating them:

  1. Coverflow

Inspiration: This post

  1. Word-by-word lyrics

Inspiration: Apple Music app

  1. QlockTwo

Inspiration: QlockTwo

  1. Shimmer effect

Inspiration: FB Paper


Hopefully I’ll be able create something of my own next year (the hardest thing to do!)

Happy new year!

12 Likes

Super cool initiative! If you’re willing to share the patches I’m sure they’d be great learning material.

2 Likes

Well I haven’t given a focus on organizing my patches so they will appear messy (and some parts would be inexplicable because I haven’t put comments). But I’m still dropping them here for reference purpose:

coverflow, qlocktwo, text shimmer.zip (6.2 MB)

I am aware that I should have put computations to create initial state from XML/JSON into a cache. Beside that, suggestions are welcome!


I’m skipping Word-by-word lyrics patch because it would be a lot difficult to parse by anybody in its current state.

2 Likes

music-lyrics.zip (83.7 KB)

To use this patch:

  1. Put the song in “songs” folder
  2. Pull the lyrics from Apple Music web’s syllable-lyrics API and save it under “songs folder” with .xml extension
  3. Open format_lyrics.py and on line 4, change She Looks Like Fun - Arctic Monkeys.xml with your xml filename. Then run python format_lyrics.py
  4. Open music-lyrics.vl, select the music and the lyric file (appears at top left of the patch, inside a violet frame) and then press play

To do step 2, you have to open Apple Music web app, play the appropriate song, open lyrics panel, open n/w tab in devtools, and then look for syllable-lyrics API. You have to look for ttml in the response and copy its value. This value is XML.

  1. Link grabber

Inspiration: This twitter post

link-grabber.zip (56.4 KB)

How to use:

  1. Left click on the Result pin to start a connection
  2. Get close enough to one of the pins on the right. When you see a line formed, left click to confirm connection
  3. Right click anywhere to break the connection and start again
6 Likes
  1. MacOS dock

  1. Rubbberbanding and decay

Don’t have fancy demo for these, but these are essential components when building touch-based interfaces.

3 Likes

I wanted to take a look at how you solved the cover flow, but unable to open it. tried with 6.6 and 6.7 but vvvv is stuck in a loading loop.

btw I think we all here enjoy your very empathic link grabber :)

1 Like

Strange, I’m able to reproduce the issue too.

Could you try this @schlonzo?

coverflow.zip (5.9 MB)

This works for me; was expecting a stride solution rather than skia. cool! I did not know Skia can skew. thanks :)