Designing the Animated Atlas Grid

[estermer]

https://media.githubusercontent.com/media/blockstack/designs/master/brand/v3.0.0/assets/blockstack-atlas-grid%402x.png

This thing needs to get animated, and we need ideas!

more info can be found here: https://github.com/blockstack/blockstack.org/issues/292

[pstan26]

Nice @estermer -- However right now it is unclear at least to me that we would necessarily use same atlas grid.

Just to spin out a concept out there for a simple but demonstrative animation of decentralization to use in the current whitespace of the hero:

• show three big bubbles (evil corp ;-P) with lots of tiny, meager dots (people) linking to them from the outside fringe with data going from dots to bubbles only. Then an animation where those three large bubbles shrink and the dots on the fringe enlarge and link together sharing data bidirectionally to create a web (of trust).

cc @guylepage3

[guylepage3]

Nice @estermer -- However right now it is unclear at least to me that we would necessarily use same atlas grid.

We have determined that this is still core to the brand and is our foundational illustration.

[estermer]

Here was an Idea that I had using the above atlas grid. just for reference

maybe using this for help: http://vincentgarreau.com/particles.js/

[guylepage3]

@estermer @lacabra

Core illustration requirements When creating the initial blockstack atlas grid illustration we determined that creation of a grid like system that is open, random in it's decentralization and yet connected was something that would be appealing to blockstack. we also determined that this illustration would need to be unique and something that could be recognizable as a blockstack brand element.

There are 3 elements to the blockstack atlas illustration

1. The grid – this grid is made up of small solid squares and is intended to represent an open, yet structured grid where "atlas" nodes could appear and disappear as they come online and offline
2. Atlas nodes – these nodes are are small open circles to allow the eye to distinguish between the grid squares and the open atlas nodes. These nodes appear at random replacing the grid squares.
3. Atals node connections – lastly the atlas nodes are connected via lines enclosing the entire global system. there cannot be any lines or atlas nodes unconnected.

[estermer]

we could maybe keep it super simple and just show the paths that are already connected show a wider/brighter dot on the path moving from node to node? keeping the current structure?

[guylepage3]

we could maybe keep it super simple and just show the paths that are already connected show a wider/brighter dot on the path moving from node to node? keeping the current structure?

i think this is cool. what i am thinking is this..

What if we had the current atlas grid showing atlas nodes coming online and offline popping up in replace of the grid squares, with 3-5 highlighted nodes that appear brighter than others with a radius from the node that fades from bright to regular opacity, then there could be a card of some kind that is away from each of the highlighted nodes where we can randomly show a selected user's profile photo and possibly their blockstack id. the card would slowly float randomly away from the node but is connected by a line to the node.

In executing this we would be conveying a sense of movement, growth and user-centricity.

Thoughts?

[lacabra]

I like this virtual brainstorming of ideas. All this seems doable. I'd say we may have enough to prototype some of these ideas, and play a bit with them. My instinct is to try out some of the above, and that in turn will generate other ideas, and also get a feeling for what's possible. Sometimes I try to visualize something specific I have in mind, and in the process of doing so, the visulization FW makes it easy/harder to do certain things, and I go with the flow.

As an initial draft roadmap, I'd be happy to start putting the following together:

• Baseline canvas made up of the matrix of square nodes
• Populate the matrix with appearing and disappearing nodes
• Dynamically keep all nodes in view linked to each other
• Animate links to simulate flow of information from node to node (changing color/gradient) along links

Once we have that, we can then look into the cards, which I like as a way to convey user-centricity and bring the human aspect of the network into view.

How does this sound?

[estermer]

@guylepage3 I like the idea except for the avatars. I think that might be too much going on, and depending on the size could be too distracting.

[estermer]

@lacabra I really like the way that sounds as a baseline and then play around with added features incase we think there need to be added aspects to it.

I also like the way you described the animations of the pathways between nodes!

[estermer]

i think with the pathways it would be nice to make it seem like there are 10-15 "bits" of information that are going from node to node along the pathways at a pretty decent speed and in a random fashion. Does that make sense?

[guylepage3]

I like this virtual brainstorming of ideas. All this seems doable. I'd say we may have enough to prototype some of these ideas, and play a bit with them. My instinct is to try out some of the above, and that in turn will generate other ideas, and also get a feeling for what's possible. Sometimes I try to visualize something specific I have in mind, and in the process of doing so, the visulization FW makes it easy/harder to do certain things, and I go with the flow.

As an initial draft roadmap, I'd be happy to start putting the following together:

Baseline canvas made up of the matrix of square nodes Populate the matrix with appearing and disappearing nodes Dynamically keep all nodes in view linked to each other Animate links to simulate flow of information from node to node (changing color/gradient) along links

@lacabra that all sounds good. let's get this going! Whoot!

@guylepage3 I like the idea except for the avatars. I think that might be too much going on, and depending on the size could be too distracting.

@estermer, i think there are some old card designs we have from the past that we can utilize and integrate. but you're right. let's mvp this and keep it simple for now.

[guylepage3]

Ok. so another really quick mvp could be to just have the atlas grid as we have it to date but then have the cursor "grab" the closest atlas node when it's within 100px radius.

see http://vincentgarreau.com/particles.js/#default. Then select > interactivity > onhover > grab

[estermer]

Also definitely need this to increase the number of open circle "nodes" to project growth.

[lacabra]

First prototype: forked particles.js (which is not based on D3.js, btw) and modified to our needs so that it draws the baseline grid, with squares and randomly positioned circles (while snapping to grid), and linking circle nodes to other nearby circles. It's not animated yet, but what's cool is that if you keep reloading the page, you'll keep seeing different designs. Take a look: http://oohmap.com/atlas-grid/

[pstan26]

Yea that is neat, it is like a snapshot each time you reload. Eager to see the animation!

On Fri, Apr 28, 2017 at 12:55 AM, Victor notifications@github.com wrote:

First prototype: forked particles.js (which is not based on D3.js, btw) and modified to our needs so that it draws the baseline grid, with squares and randomly positioned circles (while snapping to grid), and linking circle nodes to other nearby circles. It's not animated yet, but what's cool is that if you keep reloading the page, you'll keep seeing different designs. Take a look: http://oohmap.com/atlas-grid/

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/blockstack/designs/issues/250#issuecomment-297906848, or mute the thread https://github.com/notifications/unsubscribe-auth/AFWIsPBmom6GCW_BYL-ZGUHfq8zGBsxJks5r0XEsgaJpZM4NKP0a .

[guylepage3]

Awesome work! @lacabra.. There are some requirements that both @shea256 and I have established in order to convey true decentralization.

No. 3 of the requirements as seen in the atlas grid. https://github.com/blockstack/designs/issues/250#issuecomment-297746146

Atals node connections – lastly the atlas nodes are connected via lines enclosing the entire global system. there cannot be any lines or atlas nodes unconnected.

[lacabra]

@guylepage3 got your comment on no nodes unconnected. I'll look into it. In the meantime, I've uploaded an initial rough animation (disclaimer, I don't quite like it), but it's a start: nodes randomly appear and disappear, updating the links correspondingly. Make sure you force a reload manually: http://oohmap.com/atlas-grid/ Thoughts and reactions welcome :)

I have a question for you: in the original drawing there are no intersections between the links, but in the current implementation there are plenty because the way it's implemented is hard to track those intersections. How important is it that there are link intersections or not?

[guylepage3]

How important is it that there are link intersections or not

This is actually what I mean by, "there cannot be any lines or atlas nodes unconnected." It is very important that nothing is unconnected as then it will not represent decentralization. If this is too difficult to produce, no worries. I think we should add this in on v2/v3 of the new hero section. It's really just a nice to have but would give the feeling of highly advanced tech to people who hit the landing page. 😄

[lacabra]

I would like to clarify that there are actually two different issues:

1. The first you brought up is that there are no nodes unconnected. Straightforward and doable.
2. The second one is that for all those nodes that are connected to their neighbors, in some cases there are crossing between these links. Take a look at the attached image: the left is the original, the right is the one that the visualization is currently generating:

What's your take on the second issue above?

[guylepage3]

@lacabra ahhh.. i see.

So what's actually happening in the 2nd image is that we need to set a max number of possible connections to each node. Let's say 3. That should clean up the issue we're seeing.

[lacabra]

@guylepage3 Limiting the max number of possible connections would not really fix it (it would just decrease the probability of that happening), you have to keep track of all possible connections and make sure you don't intersect. That's what I did, here's the next revision: http://oohmap.com/atlas-grid/ Not having intersections makes it so much more visually pleasant, in my opinion. As for the issue of not having nodes disconnected, I'm not tracking that explicitly, but the probability of that happening is so low, that I don't feel like accounting for it: for each dot in the matrix, the probability of there being a node is 0.5, so the probability of that node being disconnected in the inside of the network is (0.5)^16 = 0.00001. At the corners would be (0.5)^5 = 0.03. In my mind it's now low enough, that I dismiss it. As for the animation, 2 new nodes appear and 2 other disappear every 50ms.

[lacabra]

The nodes are continuously changing size now, as if they are breathing life ;) http://oohmap.com/atlas-grid/

[lacabra]

Created a repo with the current version for others to build upon it: https://github.com/lacabra/atlas-grid-animation

[guylepage3]

ok. so these are awesome @lacabra. I understand it's a bit difficult to get these nodes to all connect. maybe we should try to resolve this issue and put the animation to the side for the time being. lastly i am not so fond of the pulsating atlas nodes as i am not sure how this is a representational animation of how the atlas nodes perform. it is also a bit distracting for the user.

[shea256]

@guylepage3 @lacabra I actually think the connectedness is pretty good. What I was most worried about is something like this (http://oldsite.english.ucsb.edu/faculty/ayliu/unlocked/misc-images/network-decentralized.gif) because it's clearly hierarchical. The current system does the job pretty well because 95% of the nodes have multiple neighbors they're connected to.

[shea256]

The only thing about this map is that it's very dark. I can't even see the lines on the dark purple background and my computer brightness is turned all the way up.

[shea256]

Otherwise amazing job on this!

[lacabra]

@guylepage3 @shea256: I've tweaked the algorithm so as to leave no node behind. I'm tracking neighbors now, and a node will not disappear if any of its neighbors has it as its only connection. @guylepage3: I've disabled the changing size of nodes. They are back to fixed size. It can be turned on or off in the particles.json config file. @shea256: I used the color scheme from the image provided in the first post of this issue. I've adjusted it slightly to put more contrast between the nodes+links and the background. The color can be very easily tweaked adjusting a parameter of the config file (particles.json), so I suggest that whoever puts in place adjusts it accordingly.

The demo can be seen at http://oohmap.com/atlas-grid, and the repo is up to date at https://github.com/lacabra/atlas-grid-animation

[guylepage3]

The only thing about this map is that it's very dark. I can't even see the lines on the dark purple background and my computer brightness is turned all the way up.

But this is our atlas grid brand. We can change the color once we apply the brand as a whole.

[guylepage3]

Colors and other "brand architecture" changes should be discussed by opening a new issue. Think of major brand items as changing the architecture of Blockstack Core.

If we start ad-hocing and executing one-off designs into our brand it will become very fragmented and our communications would suffer as a result. (Reference on Ad-hocing. http://www.marketingprofs.com/6/young34.asp)

I will add our written brand guide to our live Blockstack Brand Guide (located on blockstack.org. Link in the footer.) and provide a link and description in our README.md for contributors to follow.