rupl / bustashape Goto Github PK

modifier button causes a drag to create new copies of a shape instead of just moving it. easy way to make copies.

At Vetfest a guy suggested having stencils so that a group could generate shapes to decorate the stencil. It would provide a theme of sorts to avoid the totally random creativity that goes into it when people have a blank slate.

This might be paired well with other shapes. The example mentioned was a stencil of a person with different mustaches, hats, etc. (like a digital Mr. Potato)

Once #2 is implemented it would be nice to offer more cues that you can drag/resize/rotate etc. Perhaps drag/rotate handles.

Some people don't want to have their stuff messed with. We should add the option to choose when creating a room.

On the login page it would be great to show the most active rooms. This would require a server-side data store which doesn't exist yet, but the socket events are very easy to listen for and count.

Using the tools built in to Socket.io we can offer notifications when the connection is lost or regained, and using the events we already have inside bustashape, they can be notified when others join/leave.

• when connection is lost or timed out
• when connection is restored
• when someone joins your room
• when someone leaves your room

Once these events are handled in the codebase, we can perform other smart actions like #79

this one makes my head explode, but @afragon suggested we could layer whole rooms on top of each other.

It's possible to save the live state of a room (not an SVG or raster) using SW (#28) and load it up during a future visit. Instead of just injecting into the DOM, the client-side playback could issue socket commands so that someone else could join and "catch up" to where you left off.

There's much to discuss before making this happen, so I'm just jotting this down before I forget.

Disable panning completely (but retain zooming) and make it based on your physical location in the world!!! People in physical groups would naturally be in the same canvas area, and can draw together without configuring.

Done properly this would be like a virtual layer of graffiti overlaid on top of a city. You can zoom out and see other works at bird's eye view. But if you want to draw shapes somewhere else, you have to walk over and draw there!

From @mattgrill:

i wonder if you can do something with location aware drawing.

people that are physically close, can draw together.

Not only would it allow us to make sick pixel art, but a snap mode would help power any future LED-based displays.

add a button (Post) that saves the art into .png/.svg and post it on a public gallery.

This is the killer feature IMO. The problem with getting people to try is the lengthy onboarding process. I think the Bluetooth auth would be a great way to engage people, especially in public spaces.

🔗 https://github.com/google/physical-web
🎥 https://google.github.io/physical-web/

🔗 Broadcast Physical Web without a Beacon

Just like a public pool break time, it might be fun to enforce a moment of time where changes can't be made. Just a few minutes to admire everyone's work!

A good idea from @mattgrill was to use Leap Motion which has a JS API, using physical gestures to move things instead of touch dragging.

It would add an organic feel to it, and if you want to be more specific maybe we can add a modifier key to disable the drift when user releases.

Move shapes by waving a phone around instead of dragging it on the screen!

This will allow for easy testing of each PR.

Docs: https://devcenter.heroku.com/articles/app-json-schema

provide ability to break a shape into smaller pieces.

square ➡️ triangle

I looked at Spectrum for this. It has color+alpha (meaning we could drop separate opacity setting) plus it can fallback to native color picker when it is available.

cc @afragon

With #7 and #8 in place it would be awesome to watch a room get built as if you were watching it in real-time. Like watching this: https://www.youtube.com/watch?v=ztwSAZ7lJg8

It would make it more compelling to play. Also show occupied rooms!

If this thing is to be used at scale (at public events and so forth), we need to determine how much traffic a single server node can handle. Load testing is in order. I asked twitter and got a few links which I'm just dropping here to start my own discovery:

• WebDriver + JMeter load testing using various agents, perhaps via BrowserStack?
• websocket-bench custom tests that may be able to plug into other libs, e.g. a monkey test
• A fleet of Phantom or Casper agents with pre-programmed scripts (might be much easier for me to use pre-existing knowledge to simulate drags this way) — could definitely be combined with client-side monkey testing
• The Twitterverse suggested loadimpact.com and prosthetic-hand, a tool to simulate gestures.

Following that discovery process, we need to safeguard the app against it. Here are the options:

1. Limit users to a safe number below the threshold uncovered during load tests
2. Learn how to scale the app
3. Implement #11

1 is fairly easy but limits bustashape's potential. It's the short-term solution. 2 is a huge question mark that I maybe can do myself but maybe not. But hey, better to know our limits!

You know, the usual:

• Enable HTTPS on bustashape.com (#88)
• some caching
• add to homescreen (#71)
• manifest (#71)

Currently, if you lose your connection or have any sort of network hiccup, you basically drop from the room. This doesn't have to be so fragile. The client stores the room name and can auto-join the proper room when reconnecting.

This same issue occurs when the server reboots as well. So any updates to the app currently kill all activity on the site. Sadness.

Filing as a bug because it's a subtle event which causes a major UX disruption. It took me a while to figure out what was happening during a flaky moment on my own home wifi.

Sometimes people will have high-latency connections that don't work well with the stream of data. Or the physical distance might just prove to be too wide. There should be an easy way to toggle your client so it requires only a minimal amount of data to receive updates from others.

I'm thinking of marking "final" movements somehow (like when you release the shape rather than all the movements broadcasted during a drag). Combining the occasional update with CSS transitions will still provide nice interactivity without requiring 10-20ms ping.

This can be a checkbox that each client toggles when things get laggy. If a person wants to give the more real-time option a try, they can just switch modes again.

While I'd love to consider myself such a code-maestro that the UI needs no explanation, that's probably not the case for most folks. Luckily I saw a tool that can provide an intro automatically once descriptions are attached to various parts of the UI: http://introjs.com/

would be great as a temporary way to change view and orient yourself, or offer zoomed out view when choosing certain options

Instead of being a purely human-powered tool, it might be fun to create art from a data source.

so what happens if a user throw out a couple of objects and then press a button called "scramble" and they randomly mix up and align new positions? I don't know the value of it more than it could bring forth new elements which the user later can build on. I would argue that this is a late stage feature and not urgent.

Could we somehow pipe the output of bustashape to other media? Like a laser projector or something wild? People would go nuts over controlling lasers. Or at least I would! 😋

it's a super PITA to mouseover the save button and click. Since the behavior in Chrome is already auto-downloading on click, adding a S modifier would make it much easier to save on the fly.

Part of creativity is constraints. There are so many flexible settings (even with just four options!) that it can get overwhelming or even messy without some guidance to keep things on track.

It would be cool to have some presets that you choose when creating a room, and the bonus is that some or all of the controls could be completely suppressed to reduce the UI to the bare minimum.

Some random ideas:

• pre-populate the room with some shapes. Kind of like giving people a "kit" to work with to make things. No UI needed at all. (#56)
• hard-code the blend mode, color, opacity, shape for a room. Only the "add" button remains.
• hard-code blend mode and restrict to a specific palette and opacity (for example using the difference blend mode and only allowing one color at full opacity is really trippy)
• choose some initial settings like color and leave only opacity as an option that the user can change.

Possibly explain some gestures or something.

free graphics! http://www.smashingapps.com/2015/07/22/11-free-mobile-gesture-icons-packs-psd-ai-eps.html

It would be fun to include an author attribute on the shape. We could display the names, or even perform operations (like sorting / grouping) on shapes according to author.

You could even drop the shapes into layers per author, or restrict interacting based on this prop.

Once the Service Worker (#28) is in place, push notifications would be a great way to encourage real-time interaction with other folks.

I suppose you'd have to "follow" a room or something in order to opt-in for notifications. But if you leave and another person joins, you get a notification that the room has other people in it.

We spun this off from the branding/design task because it got too big. We want to mock up a demo, kind of like an intro in a SNES game where it plays itself in a 60-second loop.

Maybe we could log a real session and just store the data? Or just hand-code one.

Right now we're just using position: absolute with top/left coords for positioning. Not only would CSS transforms be more GPU-friendly, but but using <canvas> or maybe even something like leaflet would be a good way to create a more robust surface for drawing that isn't so bound to the DOM/viewport.

There are SVG morphing libraries around, maybe we could integrate one with two.js

🔗 Example: http://greensock.com/morphSVG

🔗 https://medium.com/@samthor/add-to-home-screen-apps-and-their-lifecycles-9ccd05f96e71#.glqyimpg6

Although bustashape shines when connected to others, it can also be a great sketching tool on its own. Once a Service Worker is in place (#28), I'd like to make it feel a bit more like an app.

The first benefit would be the ability to fullscreen or otherwise diminish browser chrome, which takes away from drawing space and overrides event listeners sometimes when people are dragging about.

Combined with SW cache for drawings (#41), you could even save and reload drawings in a future session.

Judging by many demos on its site, it appears that after #21 is finished we can use two.js to implement collision detection. So if you drag a shape around, it bumps others out of the way.

I showed this to a dude and he asked for the ability to delete a shape. Sometimes you want to change properties too. I think tapping and holding is the key to doing this. need to think on it a bit. Once the menu is activated we could:

• show a little delete button, maybe just a little ❌ in the corner
• allow the color/shape to be changed, etc

Similar to photoshop layers. Bonus points for being able to clone a group.

This is making the rounds: https://github.com/googlecreativelab/anypixel

Looks really cool and does many things that I was avoiding even considering because I didn't want to climb the hardware hill on my own. Would love to hook this up and power really large displays!

Not to be confused with grouping shapes #5

I'm thinking of an organic process, not just a clone button. For instance, two people grabbing the same shape at the same time. Instead of having them battle it out, it would be cool to make a copy and have the shape be naturally cloned.

With #7 in place it would be cool to join a pre-existing room and see everything that's there already.

This might have to be a global mode or something, but making shapes be globby or gooey.

example: http://codepen.io/lbebber/pen/lFdHu

A possibility mentioned in #25. After observing people for a few days at vetfest, it became clear that the controls are way too open-ended for first-timers being asked to try it on the spot. Offering visual presets would be a great way to boil the UI back down to one tap. Don't even offer menu toggling, just show the shapes.

Take a photo and use it instead of a background color. Front-facing camera = avatars