Imitating interfaces

wip
1

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

image
image612×546 7.37 KB

  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
2

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

2 Likes
3

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
4

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.

5
  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
6
  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
7

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
8

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

Could you try this @schlonzo?

coverflow.zip (5.9 MB)

9

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