Cloudinary (a tool for storing/manipulating/serving images and video) had a new manipulation feature that is pretty impressive. Your best bet is just to try it out!

img
  1. You upload one image that provides the style
  2. You upload a second image where the style is applied to
  3. See cool result

I always have some stock photography laying around, so I picked out a few of my own to try it up. I uploaded an image of some sketchy gridy hard lines as a source and a hiker in some mountains as a target. Here's my result, which is pretty dang cool if you ask me:

img

After I've done that, I can enter the contest (you'll see the button). Then my entry will be in the running, where it's pitted against other submissions.

img

The content only runs for a week (ending October 4th), so get on it! They are going to send the winner some Beats Solo3 Wireless On-Ear Headphones, which are solid $300 headphones.

The Magic

Cloudinary's style transfer feature is the star of the show here, but it's extra fascinating to us to see how this can all come together on CodePen.

You already know you can build and show off things with HTML, CSS, and JavaScript on CodePen, and that's exactly what's happening here. Using Cloudinary's upload widget, we get the power to upload images with very little effort right on the front end. Wire up some buttons to open it, accept the image file paths, and do what you will.

It gets even more magical here as they are leveraging Webtask, a really cool service that allows you to write "serverless endpoints". You essentially write some Node code that does whatever you need it to do and return whatever you'd like it do. In this case, the submissions and voting are all happening through Webtask. Webtask even offers JSON data storage, so there is an easy place to put persistent storage.

That's a lot to digest, but don't worry, I skimmed over it on purpose because in the coming months we'll have a lot more to share about that. We're hoping to do a lot more education and demo-making on what is possible with CodePen and other cloud-based services.