rupl / bustashape Goto Github PK
View Code? Open in Web Editor NEWCollaborative, real-time artboards
Home Page: https://bustashape.art
License: MIT License
Collaborative, real-time artboards
Home Page: https://bustashape.art
License: MIT License
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)
๐ 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.
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.
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
From @mattgrill:
i wonder if you can do something with location aware drawing.
people that are physically close, can draw together.
It would make it more compelling to play. Also show occupied rooms!
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.
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.
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.
Once #2 is implemented it would be nice to offer more cues that you can drag/resize/rotate etc. Perhaps drag/rotate handles.
There are SVG morphing libraries around, maybe we could integrate one with two.js
๐ Example: http://greensock.com/morphSVG
would be great as a temporary way to change view and orient yourself, or offer zoomed out view when choosing certain options
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.
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/
Instead of being a purely human-powered tool, it might be fun to create art from a data source.
This will allow for easy testing of each PR.
This might have to be a global mode or something, but making shapes be globby or gooey.
example: http://codepen.io/lbebber/pen/lFdHu
With #7 in place it would be cool to join a pre-existing room and see everything that's there already.
this one makes my head explode, but @afragon suggested we could layer whole rooms on top of each other.
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.
Not only would it allow us to make sick pixel art, but a snap mode would help power any future LED-based displays.
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.
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.
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:
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
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!
modifier button causes a drag to create new copies of a shape instead of just moving it. easy way to make copies.
Take a photo and use it instead of a background color. Front-facing camera = avatars
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!
provide ability to break a shape into smaller pieces.
square โก๏ธ triangle
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.
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! ๐
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.
add a button (Post) that saves the art into .png/.svg and post it on a public gallery.
Move shapes by waving a phone around instead of dragging it on the screen!
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.
Once these events are handled in the codebase, we can perform other smart actions like #79
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!
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.
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.
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.
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:
Following that discovery process, we need to safeguard the app against it. Here are the options:
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!
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.
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:
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.
Some people don't want to have their stuff messed with. We should add the option to choose when creating a room.
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/
cc @afragon
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.