Photos in photos in photos. This game is coming along great!

Game developer and student Matt Stark has come up with a simple idea that is expanding day by day into a really cool, conceptually mind-bending game.

At its core, the idea is that each picture you take with your camera contains a world within it. You can then place the photograph within your view… and step right into that world!

Mark tweeted a brief summary of what’s going down behind the scenes in his own words:

When the player takes a photo I duplicate the environment, make it greyscale and slice the meshes to remove anything outside the photo. When they place it into the world I slice the environment’s meshes to make a hole for the photo.

Matt has been sharing more and more details over the past couple of months as the idea itself has been growing into more and more of a game.

Something super neat to notice in this example is how the crates that are cut in half have internal textures! For those who are familiar with 3D development, generally each edge of an object has its own texture, but nothing on the inside. When something is cut in half in Matt’s demo, the volumetric shader makes sure the inside won’t be empty!

These are the dibs and dabs of detail that make a game captivating and truly enjoyable.

Are there more details?

This is interactive poetry at its best.

Thibaud Goiffon is a French student studying graphic & interactive design. His project, Intimacy, shows off an amazing spark of creativity and an ability to make curiously fun web toys!

Intimacy itself, is, in its creator’s words:

A short poem, composed of images, sounds and texts.

It really delivers on that promise. Each sketch has its own unique feel; often combining specific reactive animations, surprising interactive components, and quirky sounds.

What have people been making?

Broider your borders with this nifty tool!

The aptly named Broider by Max Bittker is a nifty tool for creating, and decorating, your borders.

Broider allows you to paint your borders in a one-bit style (the bit is either on or off, no colors), with a few small tools to help keep things in line: a 9x9 grid, an undo button (for people like me who never get things right the first time), and a little lock button that will keep all of your painting symmetrical.

The secret sauce behind Broider’s wonderful effect is utilizing CSS’s border-image property… honestly, not something that you see every day. The border-image property allows you to divide an image up into eight segments, one for each of the corners, and one for each of the edges (which will repeat). It’s got a lot of options that can make for a super unique style.

It’s easy to be turned off by the idea of adding a border-image due to it needing an unwanted additional asset. However, Broider takes care of that by nesting your created image in base64 format, so it can sit pretty in your CSS. Just copy and paste and you’re good to go!

What have people been making?

The best of PlotterTwitter, February 2020.

February has come and gone, and since it’s a leap year, 29 days have gone with it. Twenty-nine wonderful days of my favorite Twitter hashtag, #PlotterTwitter.

As with January, here’s another round-up of amazing artists & pen plottings, alongside any other commentary/algorithm I can spot within the works!

Straversi printed off an elevation map of SF in brilliant detail, using this fantastic open source tool that was built on top of Mapbox.

Joseph Wilk is doing some amazing work, hooking the axidraw up to an airbrush. With liquid ink, the outcome is intricate and super random.

Michelle Chandra created some spirographic patterns that remind me of the Mystify screensaver on my old Windows PC. The white ink on black paper is stunning.

Spongenuity created incredible multi-colored, multi-layered portraits that use flow fields in their fill pattern.

Sladix plotted reaction diffusion patterns with great results!

Neil Jenkins plotted archimedian spirals with images behind them, creating intricate mesmerizing plots!

More Please!

A generated space for your browser and walls.

The Generated Space is a gallery of procedural and generative art which encompasses a wide variety of techniques and methods. It was created by the wonderful developer and artist Kjetil Golid.

In Kjetil’s own words:

It presents a wide range of different generative algorithms; from organic flow fields and particle systems to rigid fractals and grammar-based shapes. Some more serious than others.

The variety of generative art is really astounding, with creations taking inspiration from a wide range of diverse origins and sources.

From artists such as Jackson Pollock:

Engineer and Mathemetician Oliver Byrne:

Exploring different generative algorithms and ideas, like Cellular Automata:

As well as amazing studies of isometric forms and shapes, creating wonderfully complex structures:

How do I buy them?

Beep beep bloop bloop - Listen to your webpage in action!

Debugging tools are better than ever, but some things still remain hidden to the un-observant eye… this small script is a delightful way to hear what webpages are doing behind the scenes.

Accurately named plink-plonk.js by developer Tom Hicks, this small snippet of JavaScript is a clever and simple way to create sounds from the browser whenever the webpage you’re on modifies itself in any way. (For single-page apps, this will be a lot!)

The script is activated by pasting it into your console (not always the best idea, if you can’t understand all the code). Here’s a quick video of it in action:

The simplicity of the script, is based in both the power of the Web Audio API and the Mutation Observer API.

So how does this work? Lets break it down!

Explain it to me