Project Name

Bloop

Project Description

A multi-user online coding environment for collaboratively making GLSL shaders on a blob geometry

In Collaboration with Anna Garbier

Year

2020

Tags

  • Socket.io
  • GLSL/OpenGL
  • Three.js

Bloop is a multi-user online coding environment for collaboratively making GLSL shaders on a blob geometry.

How do we user it? It's pretty simple! Coders enter the Bloop room, edit the shader code, and share their shader sketch with everyone in the room through a blob geometry!

There are a couple of benefits coders can interact with each other’s sketch. “Preview” allows you locally compile and preview your current code; “Push” allows you to upload your current local sketch to the server(that gets overwritten by whoever pushes the last); “Force push” allows you to instantly update others’ blobs and code with your current local version(Risky and bold); “Pull” allows you to update your current sketch with the latest update from the server. Last but not the least, “Random Sketch” will get you a random sketch stored in the Bloop library, in case you need some inspiration.



Social Shading & Social Distancing: A Shader workshop

This web editor was made in response to our shader community study class at Parsons D&T program being moved online during Covid19 social distancing protocol. We wanted to create a platform that makes remote learning and collaborating fun. You can find the workshop materials here.

For the workshop, we added a game mechanism where the system randomly picks up a coder in the room to start coding with a 30-seconds countdown. Then when the next person is up, they will need to pull the latest sketch and make edits. The goal is to collectively create an interesting shader blob with everyone in the room.

Some beautiful work made collectively during our first session of “Social Shading during Social Distancing”: bloop00 bloop01 bloop02 bloop03