3 May 2018.

Here's one thing that got the ball rolling:

Luigi: Hello Andrea. Sorry to bother you. I would like to learn how to develop an app. Am I crazy?

Me (Andrea): Hmm... I don't have your number... who are you?

Reading those two WhatsApp messages now makes me smile. But there are also two other pieces of interesting information:

First, that was May 2018. Now it is 2022... 3 years and some months later, we have published our very first game DEMO. So yes, it took us 3 years to release a demo.

But we are now producing at a steady pace, and in the first months of 2023 we will release the whole game.

That said, if you are planning to develop a game yourself, it won't necessarily take you 4 years…and I have some advice that hopefully will help!

Second, an app – everyone wants to make an app. Do we really need another app? What about a game instead? What I mean is: an adventure game is like a book, you install it, play it, enjoy and eventually uninstall it. It is not yet another app polluting your phone's memory.

Before I start, let me step back and explain what this article is about.

What We'll Discuss in This Article

This article is about how I (Andrea) and Luigi developed Occulto, our first adventure game.

It will cover some technical aspects of the project, as well as how we managed creating and developing it. I'll discuss both psychological and practical parts of the journey.

I'll also provide a shallow comparison between using web technologies (like WebGL) for development vs Unity 2D.

This article consists of:

• A brief story about my passion for Adventure P&C games, and how I ended up developing my own game.

• A section about Occulto, the game I am developing

• A tech section with a comparison between web technologies and Unity 2D

• A section about what I learned through the process, along with some advice if you're creating your own game.

How I got Into Adventure Games

Many years ago, a good friend introduced me to Machinarium. Machinarium is one of the best adventure games I've ever played.

After I finished it, I felt the need to create my own adventure game. This feeling was not immediate, but grew stronger over time. Eventually it led me to find Luigi and be actually able to create my own indie game.

First adventure game attempt

In my first attempt at building a game, I contacted some friends and created a small group of people who were enthusiastic about creating an artistic P&C game.

We managed to create a draft of the first scene (see the illustration above). The idea was to make an apple fall on Newton's head, who is resting under the tree.

I used the Playn Java framework to write in Java and export to Android, iOS and web. At the time I was a Java developer. Playn is still an active project, it may be worth considering if you are looking for a Java 2D game framework.

This first attempt didn't last long. We had a dinner all together, and asked two friends to present us with a draft story of the game. And then I didn't get any feedback from the others and the project vanished into nothing.

Second attempt

In my second attempt I managed to create four scenes and some game-play among them. But the project failed because I wasn't ready to lead the project. You'll read about that soon.

Below you can see an image of one of the scenes of the game. It was intended to be a modern revisiting of Little Red Riding Hood were wolves were not bad :).

Third and Final Adventure Game Attempt: Occulto

Developing Occulto is my 3rd attempt at creating an adventure game – and hopefully this one is successful!

Unity Editor: 1° Village

Intro to the game

It is a beautiful morning, and Eliot, a young mage apprentice, is going to the studio of his magister for a lesson about magical potions. Something is wrong from the first moment: why isn't the magister opening the door?

Inside the studio everything is a mess, and a note tells Eliot to go to the church in the village. What is going on? Where is the magister?

2° Magister studio

Will you help Eliot in his journey to find his magister and regain possession of the powerful forbidden book titled "The never written book" that an evil figure is trying to steal?

The demo consists of four scenes:

3° Monastery

and one secret passage between the monastery and the private studio of a monk.

4° Secret passage

Below you can see the last scene of the demo.

5° Monk private studio

Tech I Used to Build My Adventure Game

We developed Occulto in the beginning using Pixi.JS and HTML. Then, later, I switched to Unity using the 2D features that are now included as default in the editor.

Since this article is quite long, I will not enter in the details of the code. But I will provide a description of the technologies we used and the process of creating the game.

I am planning to write a second article for the technical part.

We are a group of 3 people:

• Myself, Andrea, the developer and project/technical manager. I contribute to the story and game/riddle design as well. I am a software engineer.

• Luigi, the wonderful artistic designer who designs and draws the scenes. He is also responsible for the game story and game-play. If you like the illustrations above, then you like Luigi's work :). He graduated in Mathematics.

• Antonio is the music and sounds designer. He is a software engineer.

Luigi draws the scenes using Photoshop and makes the animations using After Effects. Then he exports everything into images (jpg and png) that I later use to assemble the scenes.

In addition Antonio provides me with the sounds and music for the scenes. We are using mp3 files at the moment, but we are planning to switch to FMOD in the future.

The game uses FHD (1920x1080) images, and runs also on low end mobile devices. If you want to run on a device with 1 GB of RAM, you need to reduce the amount of FHD images. If you load in memory more than 50/60 FHD images, the game may crash on devices with not enough memory.

In normal Unity memory management, the entire scene is loaded on memory, so you have to pay attention to what you add to the scene.

A simple and classic solution to reduce the memory imprint, is to use sprite sheets for the animations. Most of the time an animation will fit in a 2048x2048 sprite. I use Texture Packer to create and import animation sprite sheets in Unity.

In addition I use ImageMagick CLI to trim images with an object inside. My input is a FHD transparent PNG with an object inside placed in the right position. Then I use:

magick mogrify -trim -verbose *.png > trim.txt

to trim the image and get the precise position of the object.

Finally I add the trimmed image to the scene and place it using a script I made that maps the coordinates inside trim.txt file to the x,y values of the Unity scene.

By trimming and using sprite-sheets, I solved all memory problems. Also smaller images means lower time when loading a scene. In cheap mobile devices, loading a scene can require like 5 or 6 seconds (whereas in more powerful devices it takes less than a second).

Regarding fps and performance, Unity is good – so basically you don't have to do anything special. You just need to avoid bad design. And pay attention to time complexity. For example, avoid searching for an element on every tick of the game loop.

As I mentioned earlier, I am planning to write a tech article about how I developed the game using Unity 2D. If you are interested, follow me or follow us on one of our social accounts.

Unity vs WebGL

Even if I used both technologies, I am not an expert (this is my first game). So below I will just list some of the pro and cons of both technologies.

Pros of WebGL

• Easy to port everywhere with Capacitor or Electron.

• Programmers friendly: PixiJS makes it very easy.

• Almost the only working solution if you need a web responsive version.

• Continuous integration and delivery to web is very easy, since the output is a bunch of files.

• Web development is mature, and you have access to tons of libraries, utilities as well as a web packers, like Webpack.

• Collaboration is very easy and mature with Git. There is something about collaboration in Unity, I didn't explore it. I don't know what happens if two people work on the same scene.

Cons of WebGL

• Slightly lower performances compared to more native frameworks.

• Subject to WebViews bugs (which you cannot solve).

• It can be difficult for programmers who do not know web development.

• WebViews doesn't seem to be ready to perfectly support WebGL. The game wasn't working well on my Neffos, and who knows on which devices it had issues. Maybe WebViews are not yet ready for gaming, but they are definitely ready for HTML and hybrids app.

Pros of Unity

• Graphical editor: it is easier to visualize/update the scene and fine tuning.

• Easy and complete: it has almost everything you need.

• Good performance: 60 fps even on low end devices at 1920 x 1080 resolution.

• Cross platform, but the WebGL version does not work well on mobile phones.

• A lot of indie games are made using Unity. If the Unity team introduces a bug, it will be found very soon.

Cons of Unity

• Graphical editor: you need a working updated Unity editor in each of the computers you are going to use. With Linux it's not that simple.

• Closed licence but it has a free tier if you earned up to $100K in the last 12 months.

• At the moment the mobile web version is not officially supported.

• Linux Unity editor is alpha (and I managed to make it work after many attempts).

• Not a lot of helpful info about it: most of the posts I read to find help about a particular topic were low quality or were videos. That's far away from stack overflow quality. But the documentation is well done.

Keep in mind that this section is not intended to be an exhaustive comparison between Unity 3D and WebGl frameworks. Depending on your target, one technology could be better than the other.

That said, even if I am a web developer, I must admit that Unity is great for developing a 2D games (and I guess 3D games too).

What I learned While Building Occulto

Someone needs to lead the project

This is my first insight: if it is you who propose a project to others (a game, an app or whatever), they will assume you will lead the project.

At the time I was thinking that I was just a programmer, and didn't act like a project leader. It won't work if someone doesn't actively follow every person in the project.

Have the right attitude

It is important to have the right attitude towards people that are participating in the project. You also need to understand if they can be productive.

In this context, "productive" does not have the same meaning it has at work. Productive means "actually able to produce". At work it means how much you produce and how good is your output.

Before I go on, let me tell you a story:

Before embarking on Occulto game development, I decided to help a guy develop the interface for his board game. I did it because I thought the game he invented was a good game that had some brilliant parts to it.

In this case I was the developer, and he was leading the project (being the inventor of a game, doesn't unfortunately imply that you are also good as a project leader).

In the beginning everything was good, and I enjoyed developing the game. In addition I was learning React, which I used as the framework to build the game app. (It is a board game, not a classic one, so React was a good choice, and also it had a lot of pages, not just the game page).

Then things started to become weird: he started asking for deadlines, complaining about delays on the development, and asking for features which I thought weren't really useful in the first version of the game.

In the end it didn't work out and I couldn't work well with him, so I blocked all communication. Remember that I worked on his game for free, and I even solved a nasty bug that caused the back end side of the game to stop working.

So, why this story? To tell you that making a game with a bunch of friends is a very different job than what you do at work. Some advice:

• Don't push people too hard: if you are making a game for fun, it must be fun. Motivate people and help them. They are working (as you are) for free on a project they believe in.

• Don't act like a boss: even if you direct and follow every step of the game, people should regard you more as a project manager/team leader than a boss.

Work in your spare time

Being able to be "productive" applies also to you. Are you able to work in your spare time on the game? Can you provide a steady output, without long periods of time away from the project?

This is the first obstacle I encountered in my previous attempts. I wasn't able to provide a constant, timely output and people thought the project was falling apart.

In this case, as a programmer, it is important to integrate the output of your other team members (images, animations and sounds) as soon as possible. People will be more engaged if they see their work quickly integrated in the game. Also the sooner you integrate others' work, the sooner you will find and solve problems.

Remove as many obstacles as you can

In order to work in your spare time, you have to reduce or remove all the obstacles. These can be physical (slow computer, too small a screen, ...) or psychological. The psychological ones are the most subtle. I will try to list some of them:

Feeling guilty for not working: this is hard, and I think is one of the main reasons for quitting. You have to enjoy working on your project. So deadlines, pushing others to produce more, threatening (like "If you don't work enough you are out") do NOT work.

It is better to motivate people and help them understand what's blocking them (or you) to produce some output.

Obstacles that delays the moment you can actually work: you may think something like "I'd like to finish that thing I started, I think I can complete it in 10 minutes." Then you think: "But the PC is slow and it will take forever to start... may be tomorrow, now I'll just serf on Instagram".

It is important that when you think you can work a bit on the game, you can actually do it without any delay or obstacle.

Too tired to work on the game: indeed you must not overdo it. It is important to find a balance between how much you work and how much you rest. But it is also important to avoid long periods of not working on the game.

I noticed that small actions can help: for example for me it is enough to start the Unity Editor to increase the chances that I'll actually work on the game.

Share your results with the others: even though non technical people may not fully understand what you are doing (and vice-versa), it is satisfying to explain that you solved a performance problem, or that you reduced the bundle size, for example.

In fact, in agile methodologies, telling what you did and what your are going to do is one of the main points.

Persist. Not everything will be easy. You will have to persist. Even though you are probably making a game because of passion, it is still requires a lot of work and sometimes you have to persevere and overcome problems/blocks. You probably do that all the time at work, you can do it also for your game.

Not every moment is a moment of pleasure. Imagine when I discovered that the demo, almost ready to be published, wasn't working on some mobile devices and I had to rewrite everything in Unity. I really had a bad weekend.

But then I manage to change my attitude, start with Unity, and regain pleasure in working on the game.

Fortunately Luigi, my partner in the game, understood it and accepted that we needed to delay the release date of the game demo. While it took a lot of time to write the demo (2 years, if you count from the first commit), it took me 3 months to rewrite it.

Focus on developing the game

It is extremely important to focus on making the game, and not the framework for the game.

Being a programmer you will probably want to write more code than necessary and use your preferred language. Chose a framework based on your needs (cross platform? 2D or 3D? ...) and try to develop a simple level to understand if you made the right choices.

When you start, you won't necessarily have a clear view of the possible frameworks/technologies available to build a game – and there are a lot. In addition you will be biased towards some languages/features.

About that, I can tell you 2 mistakes I made:

I used PixiJS and HTML technologies at first. As opposite as you may think, I was able to go at 60 fps with FHD (1920x1080) resolution even in medium performance mobile devices.

This is because most of the work is done by WebGL. But at a certain point the game started flickering on my old mobile phone (Neffos X1 Max) when ported to a mobile app using Capacitor (webview). But it was working well on the browser and on the other phones I had. Even on my Motorola Moto G first generation (2013 low end device).

I should have tested earlier on mobile (not just with the browser). Also the game wasn't smooth on the my lower end device Moto G (still it was running near 30 fps).

I decided that I wanted my game to run smoothly even on low end devices, so I switched to Unity 2D. Unity is used by a lot of indie game developers, and C# is quite easy. I didn't try Unreal Engine, because I am too rusty on C++. Now it runs smoothly also on my Moto G (60 FPS).

The second thing that was almost a mistake is that I developed a library to find the shortest path on polygon areas with polygon holes. Here you can find the JS code (I have ported it to C#, but not yet release on GitHub).

I took me 3 attempts to get it working properly, and a lot of time. Fortunately by the time I started developing Occulto, the library was ready and working. Now I can just draw the walkable area and have the main character move inside it, avoiding obstacles (polygon holes).

The fact is that having an algorithm to move things inside a walk-able area is not strictly necessary, and it is better to focus on actually making the game. Other P&C games do not use this feature, they just move characters along predefined paths.

So, before you embark on something that is not strictly necessary for the game, see if you can find something already implemented or if it is really worth it.

Release a one scene version of the game

After you've chosen the right framework, take a scene, and develop the entire game which will consist on one scene plus a menu and every UI component that is cross scene. It is important to learn everything you need and to find problems as soon as possible.

Also, submit the game for internal testing (not public) to the stores you are going to use. Yes, do everything that's necessary from developing to publishing (privately) the game.

When I published the game demo on iOS, one animation wasn't working. It was working on Android, Desktop, and even on iPhone with the developer build. So yes, you need to test everything as soon as possible, even the process of publishing.

I made the mistake to first develop the whole demo (four scenes, plus menu and some other screens) just to find out that WebGL technology was not the right choice for my game.

Final Notes

I hope you enjoyed reading this article and found some interesting advice. Maybe I will write another article when I have published the whole game, sharing other insights.

If you are curious about Occulto game, follow us on:

• Twitter: https://twitter.com/SirioArtGames

• Instagram: https://www.instagram.com/sirioartgames

• Our website: https://www.sirioartgames.com

or try the demo: http://onelink.to/occulto!

In this article, I'll show you how to make an NFT without software engineering skills. Then we will learn how to make unlimited customizable NFTs with Brownie, Python, and Chainlink. And we'll see how to render and sell our creation on the OpenSea NFT marketplace.

If you're looking for a tutorial that uses Truffle, JavaScript, and fun medieval characters, check out how to Build, Deploy, and Sell your NFT here.

What is an NFT?

NFTs (Non-Fungible Tokens) can be summed up with one word: "unique". These are smart contracts deployed on a blockchain that represent something unique.

ERC20 vs ERC721

NFTs are a blockchain token standard similar to the ERC20, like AAVE, SNX, and LINK (technically a ERC677). ERC20s are "fungible" tokens, which means “replaceable” or “interchangeable.”

For example, your dollar bill is going to be worth $1 no matter what dollar bill you use. The serial number on the dollar bill might be different, but the bills are interchangeable and they’ll be worth $1 no matter what.

NFTs, on the other hand, are "non-fungible", and they follow their own token standard, the ERC721. For example, the Mona Lisa is "non-fungible". Even though someone can make a copy of it, there will always only be one Mona Lisa. If the Mona Lisa was created on a blockchain, it would be an NFT.

_Original Image from Wikipedia_

What are NFTs for?

NFTs provide value to creators, artists, game designers and more by having a permanent history of deployment stored on-chain.

You'll always know who created the NFT, who owned the NFT, where it came from, and more, giving them a lot of value over traditional art. In traditional art, it can be tricky to understand what a "fake" is, whereas on-chain the history is easily traceable.

And since smart contracts and NFTs are 100% programmable, NFTs can also have added built-in royalties and any other functionality. Compensating artists has always been an issue, since often times an artist's work is spread around without any attribution.

More and more artists and engineers are jumping on this massive value add, because it's finally a great way for artists to be compensated for their work. And more than just that, NFTs are a fun way to show off your creativity and become a collector in a digital world.

The Value of NFTs

NFTs have come a long way, and we keep seeing record breaking NFT sales, like "Everydays: The First 5,000 Days” selling for $69.3 million.

Image from Twitter

So there is a lot of value here, and it's also a fun, dynamic, and engaging way to create art in the digital world and learn about smart contract creation. So now I'll teach you everything you need to know about making NFTs.

How to Make an NFT

What we are not going to cover

Now, the easiest way to make an NFT is just to go to a platform like Opensea, Rarible, or Mintible and follow their step-by-step guide to deploying on their platform.

You can 100% take this route, however you could be bound to the platform, and you are shoehorned into the functionality the platform has. You can't achieve the unlimited customization, or really utilize any of the advantages NFTs have. But if you're a beginner software engineer, or not very technical, this is the route for you.

If you're looking to become a stronger software engineer, learn some solidity, and have the power to create something with unlimited creativity, then read on!

If you're new to solidity, don't worry, we will go over the basics there as well.

How to Make an NFT with Unlimited Customization

I'm going to get you jump started with this NFT Brownie Mix. This is a working repo with a lot of boilerplate code.

Prerequisites

We need a few things installed to get started:

• Python
• Nodejs and npm
• Metamask

If you're unfamiliar with Metamask, you can follow this tutorial to get it set up.

Rinkeby Testnet ETH and LINK

We will also be working on the Rinkeby Ethereum testnet, so we will be deploying our contracts to a real blockchain, for free!

Testnets are great ways to test how our smart contracts behave in the real world. We need Rinkeby ETH and Rinkeby LINK, which we can get for free from the links to the latest faucets from the Chainlink documentation.

We will also need to add the rinkeby LINK token to our metamask, which we can do by following the acquire LINK documentation.

If you're still confused, you can following along with this video, just be sure to use Rinkeby instead of Ropsten.

When working with a smart contract platform like Ethereum, we need to pay a little bit of ETH, and when getting data from off-chain, we have to pay a little bit of LINK. This is why we need the testnet LINK and ETH.

Awesome, let's dive in. This is the NFT we are going to deploy to OpenSea.

Quickstart

git clone https://github.com/PatrickAlphaC/nft-mix
cd nft-mix

Awesome! Now we need to install the ganache-cli and eth-brownie.

pip install eth-brownie
npm install -g ganache-cli

Now we can set our environment variables. If you're unfamiliar with environment variables, you can just add them into your .env file, and then run:

source .env

A sample .env should be in the repo you just cloned with the environment variables commented out. Uncomment them to use them!

You'll need a WEB3_INFURA_PROJECT_ID and a PRIVATE_KEY . The WEB3_INFURA_PROJECT_ID can be found be signing up for a free Infura account. This will give us a way to send transactions to the blockchain.

We will also need a private key, which you can get from your Metamask. Hit the 3 little dots, and click Account Details and Export Private Key. Please do NOT share this key with anyone if you put real money in it!

export PRIVATE_KEY=YOUR_KEY_HERE
export WEB3_INFURA_PROJECT_ID=YOUR_PROJECT_ID_HERE

Now we can deploy our NFT contract and create our first collectible with the following two commands.

brownie run scripts/simple_collectible/deploy_simple.py --network rinkeby
brownie run scripts/simple_collectible/create_collectible.py --network rinkeby

The first script deploys our NFT contract to the Rinkeby blockchain, and the second one creates our first collectible.

You've just deployed your first smart contract!

It doesn't do much at all, but don't worry – I'll show you how to render it on OpenSea in the advanced part of this tutorial. But first, let's look at the ERC721 token standard.

The ERC721 Token Standard

Let's take a look at the contract that we just deployed, in the SimpleCollectible.sol file.

// SPDX-License-Identifier: MIT
pragma solidity 0.6.6;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract SimpleCollectible is ERC721 {
    uint256 public tokenCounter;
    constructor () public ERC721 ("Dogie", "DOG"){
        tokenCounter = 0;
    }

    function createCollectible(string memory tokenURI) public returns (uint256) {
        uint256 newItemId = tokenCounter;
        _safeMint(msg.sender, newItemId);
        _setTokenURI(newItemId, tokenURI);
        tokenCounter = tokenCounter + 1;
        return newItemId;
    }

}

We are using the OpenZepplin package for the ERC721 token. This package that we've imported allows us to use all the functions of a typical ERC721 token. This defines all the functionality that our tokens are going to have, like transfer which moves tokens to new users, safeMint which creates new tokens, and more.

You can find all the functions that are given to our contract by checking out the OpenZepplin ERC721 token contract. Our contract inherits these functions on this line:

contract SimpleCollectible is ERC721 {

This is how solidity does inheritance. When we deploy a contract, the constructor is automatically called, and it takes a few parameters.

constructor () public ERC721 ("Dogie", "DOG"){
        tokenCounter = 0;
    }

We also use the constructor of the ERC721, in our constructor, and we just have to give it a name and a symbol. In our case, it's "Dogie" and "DOG". This means that every NFT that we create will be of type Dogie/DOG.

This is like how every Pokemon card is still a pokemon, or every baseball player on a trading card is still a baseball player. Each baseball player is unique, but they are still all baseball players. We are just using type DOG.

We have tokenCounter at the top that counts how many NFTs we've created of this type. Each new token gets a tokenId based on the current tokenCounter.

We can actually create an NFT with the createCollectible function. This is what we call in our create_collectible.py script.

function createCollectible(string memory tokenURI) public returns (uint256) {
        uint256 newItemId = tokenCounter;
        _safeMint(msg.sender, newItemId);
        _setTokenURI(newItemId, tokenURI);
        tokenCounter = tokenCounter + 1;
        return newItemId;
    }

The _safeMint function creates the new NFT, and assigns it to whoever called createdCollectible , aka the msg.sender, with a newItemId derived from the tokenCounter. This is how we can keep track of who owns what, by checking the owner of the tokenId.

You'll notice that we also call _setTokenURI. Let's talk about that.

What are NFT Metadata and TokenURI?

When smart contracts were being created, and NFTs were being created, people quickly realized that it's reaaaally expensive to deploy a lot of data to the blockchain. Images as small as one KB can easily cost over $1M to store.

This is clearly an issue for NFTs, since having creative art means you have to store this information somewhere. They also wanted a lightweight way to store attributes about an NFT – and this is where the tokenURI and metadata come into play.

TokenURI

The tokenURI on an NFT is a unique identifier of what the token "looks" like. A URI could be an API call over HTTPS, an IPFS hash, or anything else unique.

They follow a standard of showing metadata that looks like this:

{
    "name": "name",
    "description": "description",
    "image": "https://ipfs.io/ipfs/QmTgqnhFBMkfT9s8PHKcdXBn1f5bG3Q5hmBaR4U6hoTvb1?filename=Chainlink_Elf.png",
    "attributes": [
        {
            "trait_type": "trait",
            "value": 100
        }
    ]
}

These show what an NFT looks like, and its attributes. The image section points to another URI of what the NFT looks like. This makes it easy for NFT platforms like Opensea, Rarible, and Mintable to render NFTs on their platforms, since they are all looking for this metadata.

Off-Chain Metadata vs On-Chain Metadata

Now you might be thinking "wait... if the metadata isn't on-chain, does that mean my NFT might go away at some point"? And you'd be correct.

You'd also be correct in thinking that off-chain metadata means that you can't use that metadata to have your smart contracts interact with each other.

This is why we want to focus on on-chain metadata, so that we can program our NFTs to interact with each other.

We still need the image part of the off-chain metadata, though, since we don't have a great way to store large images on-chain. But don't worry, we can do this for free on a decentralized network still by using IPFS.

Here's an example imageURI from IPFS that shows the Chainlink Elf created in the Dungeons and Dragons tutorial.

The Chainlink Elf

We didn't set a tokenURI for the simple NFT because we wanted to just show a basic example.

Let's jump into the advanced NFT now, so we can see some of the amazing features we can do with on-chain metadata, have the NFT render on opeansea, and get our Dogie up!

If you want a refresher video on the section we just went over, follow along with the deploying a simple NFT video.

Dynamic and Advanced NFTs

Dynamic NFTs are NFTs that can change over time, or have on-chain features that we can use to interact with each other. These are the NFTs that have the unlimited customization for us to make entire games, worlds, or interactive art of some-kind. Let's jump into the advanced section.

Advanced Quickstart

Make sure you have enough testnet ETH and LINK in your metamask, then run the following:

brownie run scripts/advanced_collectible/deploy_advanced.py --network rinkeby
brownie run scripts/advanced_collectible/create_collectible.py --network rinkeby

Our collectible here is a random dog breed returned from the Chainlink VRF. Chainlink VRF is a way to get provable random numbers, and therefore true scarcity in our NFTs. We then want to create its metadata.

brownie run scripts/advanced_collectible/create_metadata.py --network rinkeby

We can then optionally upload this data to IPFS so that we can have a tokenURI. I'll show you how to do that later. For now, we are just going to use the sample tokenURI of:

https://ipfs.io/ipfs/Qmd9MCGtdVz2miNumBHDbvj8bigSgTwnr4SbyH6DNnpWdt?filename=1-PUG.json

If you download IPFS Companion into your browser you can use that URL to see what the URI returns. It'll look like this:

{
    "name": "PUG",
    "description": "An adorable PUG pup!",
    "image": "https://ipfs.io/ipfs/QmSsYRx3LpDAb1GZQm7zZ1AuHZjfbPkD6J7s9r41xu1mf8?filename=pug.png",
    "attributes": [
        {
            "trait_type": "cuteness",
            "value": 100
        }
    ]
}

Then we can run our set_tokenuri.py script:

brownie run scripts/advanced_collectible/set_tokenuri.py --network rinkeby

And we will get an output like this:

Running 'scripts/advanced_collectible/set_tokenuri.py::main'...
Working on rinkeby
Transaction sent: 0x8a83a446c306d6255952880c0ca35fa420248a84ba7484c3798d8bbad421f88e
  Gas price: 1.0 gwei   Gas limit: 44601   Nonce: 354
  AdvancedCollectible.setTokenURI confirmed - Block: 8331653   Gas used: 40547 (90.91%)

Awesome! You can view your NFT at https://testnets.opensea.io/assets/0x679c5f9adC630663a6e63Fa27153B215fe021b34/0
Please give up to 20 minutes, and hit the "refresh metadata" button

And we can hit the link given to see what it looks like on Opensea! You may have to hit the refresh metadata button and wait a few minutes.

Refresh Metadata

The Random Breed

Let's talk about what we just did. Here is our AdvancedCollectible.sol:

pragma solidity 0.6.6;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@chainlink/contracts/src/v0.6/VRFConsumerBase.sol";

contract AdvancedCollectible is ERC721, VRFConsumerBase {
    uint256 public tokenCounter;
    enum Breed{PUG, SHIBA_INU, BRENARD}
    // add other things
    mapping(bytes32 => address) public requestIdToSender;
    mapping(bytes32 => string) public requestIdToTokenURI;
    mapping(uint256 => Breed) public tokenIdToBreed;
    mapping(bytes32 => uint256) public requestIdToTokenId;
    event requestedCollectible(bytes32 indexed requestId); 


    bytes32 internal keyHash;
    uint256 internal fee;
    uint256 public randomResult;
    constructor(address _VRFCoordinator, address _LinkToken, bytes32 _keyhash)
    public 
    VRFConsumerBase(_VRFCoordinator, _LinkToken)
    ERC721("Dogie", "DOG")
    {
        tokenCounter = 0;
        keyHash = _keyhash;
        fee = 0.1 * 10 ** 18;
    }

    function createCollectible(string memory tokenURI, uint256 userProvidedSeed) 
        public returns (bytes32){
            bytes32 requestId = requestRandomness(keyHash, fee, userProvidedSeed);
            requestIdToSender[requestId] = msg.sender;
            requestIdToTokenURI[requestId] = tokenURI;
            emit requestedCollectible(requestId);
    }

    function fulfillRandomness(bytes32 requestId, uint256 randomNumber) internal override {
        address dogOwner = requestIdToSender[requestId];
        string memory tokenURI = requestIdToTokenURI[requestId];
        uint256 newItemId = tokenCounter;
        _safeMint(dogOwner, newItemId);
        _setTokenURI(newItemId, tokenURI);
        Breed breed = Breed(randomNumber % 3); 
        tokenIdToBreed[newItemId] = breed;
        requestIdToTokenId[requestId] = newItemId;
        tokenCounter = tokenCounter + 1;
    }

    function setTokenURI(uint256 tokenId, string memory _tokenURI) public {
        require(
            _isApprovedOrOwner(_msgSender(), tokenId),
            "ERC721: transfer caller is not owner nor approved"
        );
        _setTokenURI(tokenId, _tokenURI);
    }
}

We use the Chainlink VRF to create a random breed from a list of PUG, SHIBA_INU, BRENARD. When we call createCollectible this time, we actually kicked off a request to the Chainlink VRF node off-chain, and returned with a random number to create the NFT with one of those 3 breeds.

Using true randomness in your NFTs is a great way to create true scarcity, and using an Chainlink oracle random number means that your number is provably random, and can't be influenced by the miners.

You can learn more about Chainlink VRF in the documentation.

The Chainlink node responds by calling the fulfillRandomness function, and creates the collectible based on the random number. We then still have to call _setTokenURI to give our NFT the appearance that it needs.

We didn't give our NFT attributes here, but attributes are a great way to have our NFTs battle and interact. You can see a great example of NFTs with attributes in this Dungeons and Dragons example.

Metadata from IPFS

We are using IPFS to store two files:

1. The image of the NFT (the pug image)
2. The tokenURI file (the JSON file which also includes the link of the image)

We use IPFS because it's a free decentralized platform. We can add our tokenURIs and images to IPFS by downloading IPFS desktop, and hitting the import button.

IPFS add a file

Then, we can share the URI by hitting the 3 dots next to the file we want to share, hitting share link and copying the link given. We can then add this link into our set_tokenuri.py file to change the token URI that we want to use.

Persistance

However, if the tokenURI is only on our node, this means when our node is down, no one else can view it. So we want others to pin our NFT. We can use a pinning service like Pinata to help keep our data alive even when our IPFS node is down.

I imagine in the future more and more metadata will be stored on IPFS and decentralized storage platforms. Centralized servers can go down, and would mean that the art on those NFTs is lost forever. Be sure to check where the tokenURI of the NFT you use is located!

I also expect down the line that more people will use dStorage platforms like Filecoin, as using a pinning service also isn't as decentralized as it should be.

Going forward

If you'd like a video walkthrough of the advanced NFT, you can watch the advanced NFT video.

Now you have the skills to make beautiful fun, customizable, interactive NFTs, and have them render on a marketplace.

NFTs are fun, powerful ways to have artists accurately compensated for all the hard work that they do. Good luck, and remember to have fun!

Angela creates digital art and develops video games that speak to emotional issues. She has more than a dozen games in the Steam store. And she's almost completely self-taught.

Angela grew up in a suburb of Washington, D.C., and started studying art at the tender age of 3 (after her parents found her drawing on the walls of their home). From there, she has worked with and learned about all different kinds of art, and has taught herself much of what she knows.

As she grew older, she got into game development and started figuring out what sort of games - and art - her peers and the general public might like. When she came to Stanford to start university, she continued to explore new tech and expand her skills.

Now, Angela is launching a clothing and accessories line inspired by her art while going to school and landing internships at companies like Microsoft and Niantic (the Pokémon Go company). She loves exploring the Bay Area with her friends, enjoys shopping for house plants, and eventually wants to write an anime, among many other things.

This interview is a 1 hour listen in your favorite podcast player app - just search "freecodecamp" and you should find it.

If you have an Amazon Echo, you can just say "Alexa - play the freeCodeCamp podcast."

Or you can listen to it right here in your browser.

You can find Angela on twitter here.

And you can check out her website here.

You’ve been learning p5.js and you’ve created a wonderful animation and now you want to share it with the world. How do you go about that?

We could use screen capture software, but this only works if the animation is running at the right speed. With the above animation, I was getting less than half a frame per second. The ccapture.js library is mentioned in the p5.js documentation and has worked well for me.

If you’d like to follow along with this tutorial you can fork the sandbox below, which has all the code you’ll need to start.

View my codesandbox here.

The first thing we’ll need to do is download the minified CCapture javascript file. We’ll move the file into our project folder, or upload it to our sandbox folder. Then we need to add it to our index.html file:

<script src="p5.min.js"></script><script src="CCapture.all.min.js"></script><script src="sketch.js"></script>

In the sketch.js file, we need to initialize the capturer object. We also need to specify the framerate we’d like our animation to be. We can do this at the top of our file:

let framerate = 30;var capturer = new CCapture( {  format: 'webm',  framerate,  name: 'noise_visualization',  quality: 100,} );

Note that we don’t need to set the framerate using the p5.js frameRate() function.

As well as webm you can select jpeg or png for the format, both of which generate a tar file with each frame as an image. According to the documentation, the gif format may not perform as well. Keep that in mind if you’re planning on using it.

Using the WebM format means we’ll be able to view the animation as soon as it’s ready. That seems a lot more fun than having to go through converting the images into a video first so we’ll go with that.

Next, we need to start the capturer, we’ll do this at the end of the setup function. You could also start it at any point in the animation, or in response to a key press or mouse click.

function setup() {  // Setup code  // ...  capturer.start();}

Now we need to capture the frames, but to do that you need to pass the canvas to the capture function first. We can make a small change to the setup function so we can save the canvas to a variable:

// Initialise canvas outside of setup function so it can be used in the draw functionlet xseed, yseed, incrementxnoise,incrementynoise, canvas;

function setup() {  let p5canvas = createCanvas(200, 200);  canvas = p5canvas.canvas;  // Rest of setup code}

And now at the end of the draw function, we capture the canvas.

function draw() {  // Code for drawing the frame  capturer.capture(canvas);}

Now, all we need to do is decide when to stop capturing and then save the animation. We could do this based on elapsed time, using the millis() function in p5.js. But it’s likely we want our animation to be a specific length, and if the frames are rendering slowly the elapsed time won’t reflect that. Instead, we can work out how many seconds have passed using the current frameCount:

let secondsElapsed = frameCount/framerate;

Now if we want the animation to stop at, say, 5 seconds we could do it like this:

let secondsElapsed = frameCount/framerate;if (secondsElapsed >= 5) {  capturer.stop();  capturer.save();  noLoop(); // This is optional}

And that’s it! Here’s what it all looks like in a sandbox:

View my codesandbox here.

Note that I’ve commented out the code for downloading for the sake of embedding it on Medium.

Using ffmpeg to convert

Now you have your animation, which is awesome, but you may need it in different formats. There are a lot of programs and online converters which you could use. I’ve been using ffmpeg because it’s flexible and available from the command line. In their own words:

FFmpeg is the leading multimedia framework, able to decode, encode, transcode, mux, demux, stream, filter and play pretty much anything that humans and machines have created. It supports the most obscure ancient formats up to the cutting edge.

To convert the animation into a gif, you can use something like this.

ffmpeg -i noise_visualization.webm -filter_complex "[0:v] fps=15, split [a][b];[a] palettegen [p];[b][p] paletteuse" noise_visualization.gif

GIPHY have a great article that explains what all these options do.

And to convert into an mp4 for Instagram you can use something like this:

ffmpeg -i noise_visualization.webm -c:a copy -c:v libx264 -b:v 5M -maxrate 5M noise_visualization.mp4

If you reuse the same ffmpeg options often, it may be useful to save them into an alias. You’ll have to find out the specifics of how to do it for your own terminal program. In cmder it’s under Settings>Environment:

The cmder settings window

In cmder, the alias is set with a command like this:

alias ffinsta=ffmpeg -i $1 -c:a copy -c:v libx264 -b:v 5M -maxrate 5M $2

Here $1 is the first argument given to ffinsta and $2 is the second argument. Once the alias is set you can use it like this:

ffinsta noise_visualization.webm noise_visualization.mp4

Note that, in cmder, you have to restart the terminal after setting the alias. This may be the case for your terminal program too.

I hope you’ve found this tutorial helpful, don’t hesitate to ask if you need any help.

_Photo by [Unsplash](https://unsplash.com/photos/cn0-hgcpoL8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">Markus Spiske on <a href="https://unsplash.com/search/photos/canvas?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

Generative art can be an intimidating topic — it seems like there is a lot of math involved, and art is tricky in itself!

But, it doesn’t have to be difficult — you can build some really cool things without a math or art degree. This post will break down what generative art even is and how you can get started building your own generative art.

First, what is code art?

Code art is any art that is built using code. There are endless examples on CodePen — for example CSS art.

What is generative art?

Often, generative art draws inspiration from modern art, especially pop art that makes heavy use of orderly geometric patterns.

However, it is a very broad and rich category of art created with code with a central characteristic. Generative art incorporates a self-governed or autonomous system in some way.

Randomness is one type of autonomous system. By incorporating chance into a piece of code art, you get a different, completely unique piece of art each time you run your script, load your page, or respond to some user interaction.

There are also more orderly autonomous systems. One example is Mandelbrot’s Fractal, derived from a deceptively simple equation.

We can also integrate both approaches, blending order and chaos!

The artwork becomes a collaboration between the computer and the artist. Some aspects of the artwork are controlled by the coder, but not all of them. The artist controls both the randomness and the order in the art.

In a way, with an autonomous system, the artist gives up control over their art, and the computer is doing it for them. A more nuanced perspective emerges when a new creative process is considered.

The coder-artist engages in a feedback loop where they are constantly tweaking a system to produce more desirable and often more surprising results.

This process embraces experimentation and happy accidents in a way that reshapes the role of the artist. As generative artists, we use the code basics like loops, control flow and specialized functions. We then blend them with often unpredictable forces, to produce completely unique results unlike anything else that exists.

Examples of Generative Art

Kate Compton’s Flowers

Cellular Automata and the Edge of Chaos

Animated generative art in multi-colour by Phil Nash

Impressionists Blobs by Murasaki Uma

Generated Tree by Miriam Nadler

What goes into a piece of generative art?

• Randomness is crucial for creating generative art. The art should be different each time you run the generation script, so randomness is usually a large part of that.
• Algorithms — Implementing an algorithm visually can often generate awesome art, for example, the binary tree above.
• Geometry — Most generative art incorporates shapes, and the math from high school geometry class can aid in some really cool effects.

How can you approach a generative art piece?

There are two main strategies for creating generative art, though most will fall between the two strategies.

The first is to have no results in mind and see what the computer generates as you play around.

The second is that you have a very finalized idea of what you want the art to look like, and the randomness only slightly changes the end result.

Where should you start?

If you know JavaScript, p5.js is an awesome place to start. Its goal is to “make coding accessible for artists, designers, educators, and beginners.” It is a wrapper on the Canvas API, and it simplifies a lot of the math. It focuses on drawing, but you can also do sound, video, or webcam interaction with it if you are interested in those forms of art!

A Quick Introduction to P5

First, load in the p5 CDN. Then, in your JavaScript file, you will add two functions that will be used in pretty much ever p5 script: setup and draw. These names are necessary for p5 to call them.

setup is called when the program starts. You will probably create a canvas to draw on within it using the createCanvas function, and you may set some defaults there. It is only called once!

draw is called after setup, and is executed constantly until you call noLoop, which will stop it from running again. You can control how many times draw runs each second with the frameRate function.

With generative art, I usually put noLoop in the setup function, which makes draw only run once instead of continuously.

Here’s a p5 starter template on CodePen.

Since we’ve talked so much about the importance of randomness for generative art, another important function in p5 is random. It works similarly to JavaScript's Math.random but you can set a range for the numbers so that you don't have to do as much math to get the number to a useful format.

p5 Lines

You can create a line in p5.js like this:

line(startX, startY, endX, endY)

Then, you can randomly generate a bunch of lines and create a simple piece of generative art like this:

Even really simple scripts can generate cool pieces of art!

p5 Shapes

You can also create shapes with p5 — like circles, triangles, and squares.

Here’s an example of creating some shapes with p5:

// circle ellipse(xCoordinate, yCoordinate, width, height)

// square rect(xCoordinate, yCoordinate, width, height)

// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

Then, we can create some more shapes to build something more fun!

p5 Movement

We can add movement to our drawings by removing the noLoop function call in the setup function — check this out!

Color

You can also play with color with generative art by randomly choosing colors. You can do this mathematically through RGB values, or you can generate a color palette with your favorite color picker (we’ve been using this one).

You can set the fill color with the color function. It takes a bunch of different formats, like named colors, RGBAs, and hex codes.

You can also change the color of the outline using stroke. You can also remove that outline using noStroke or make it a different width with strokeWeight.

Putting it all together

Once we have all of those pieces in place, we can combine the techniques to build some really cool stuff.

Another Strategy: Tweaking Tutorials

You can also generate really cool generative art by taking someone else’s work and building off of it. For example, here’s the result of a tutorial by Dan Shiffman:

Here are two tweaks of it to create different effects:

Here’s a Codepen Collection with even more!

You can follow tutorials, fork CodePens, or Glitch projects and create something new and unique. Just make sure to give the original artist some credit too.

Cheatsheet

Here’s a cheat sheet with all of the P5 functionality we used for this tutorial.

Read More

• Generative Artistry
• Coding Train
• Talk by Tim Holman

Keep in Touch

This post was co-written with James Reichard. If you create your own art, make sure to Tweet it at us! (Ali and James).

Originally published at dev.to.

Learn how to dynamically inject JavaScript into webpages

For years I’ve been using the browser for my performances and installations using my own simple homegrown VJ engine. And now, after you learn a few simple tricks, you can too…

A quick intro

Firstly, what is a VJ engine? you might ask. And maybe even: what is a VJ? Here's a basic definition of the characteristics of VJing:

The creation or manipulation of imagery in realtime through technological mediation and for an audience, in synchronization to music.

And a VJ engine is simply the software used for VJing.

But why would I build my own when there are so many VJ engines out there?

I never really loved VJ software — they always felt bloated and made everyone’s stuff look kinda the same. It’s kind of like when you first got your hands on Photoshop, and just blended a bunch of stuff together, added some filters, and it was cool (because it was the 90s). But most of all, I wanted tighter and better integration between developing content and the sound input frequencies.

I rarely VJ these days, but it still drives most of my installations and performances — anywhere I need multiple visualisations I use RBVJ (the RB is for Radarboy — that’s me) as a wrapper/player.

RBVJ has gone through a number of iterations over the years, as I’ve bounced from Flash, to Processing, and finally now to JavaScript, all using the same simple system.

I had previously open sourced it and my content (before the days of Git and not really knowing there was a thing called open-source). It won a bunch of awards, and I saw my content being used in a whole bunch of places which was nice. So I thought it was time to make it available for others again, along with a bunch of content to show how I go about creative coding.

_from [radarboy3000 on Instagram](https://www.instagram.com/radarboy3000/" rel="noopener" target="blank" title=")

Ok, that’s a long enough introduction. Show me the money, you say!

1. Structuring the Content

Essentially, a VJ engine is just a fancy content browser and player. So what we really need is a way to retrieve and play our content.

You could just dump all your content in a folder, but this system is what has worked best for me, allowing a simple structure for keyboard control:

• Shift 0–9 to change sets
• Keys 0–9 to change banks
• Keys a-z to choose content within the bank.

This gives you 2,700 files to work with. If you really (really!?) wanted more, you could also double that by accessing another 26 files per bank with shift A-Z).

Like most HTML projects, I have a simple top-level structure, and keep the VJ content in a numbered structure inside the art folder, like so:

index.html/css/js/art <- content goes here

My content folder (/art) contains 10 numbered folders, which I refer to as sets. Inside each set are another 10 numbered folders representing banks. And inside each bank are 27 individual numbered content files, like so:

Inside /art are 10 sets of folders. Each set contains 10 banks, inside each bank are 27 javascript files. Banks and sets are accessed by the number keys and the content through keys a-z

2. Retrieving and Playing the Content

Now we just need a way to access our files, which is done by injecting content into our index page.

And it’s pretty simple to do this.

The magic happens in a function called I’ve loadJS(). It creates a script tag within the page’s head and then injects some JavaScript into it (which would be our content). We trigger this function via a keypress (but could also be a midi or OSC signal) and pass the filename of the content we want into it. Then the script is available on the page.

// INJECT JS ONTO PAGE

var my_script;

function loadJS(filename) {

 // delete injected JavaScript if there’s been some loaded in before if (my_script != undefined)   document.getElementsByTagName("head")[0].removeChild(my_script);

 // create a script element my_script = document.createElement(’script’); my_script.setAttribute("type", "text/javascript");

 // Load the file in and insert it into the page’s head tag my_script.setAttribute("src", filename); document.getElementsByTagName("head")[0].appendChild(my_script);

}

We listen for keypresses with an event listener, which calls a function called onKeyDown(), like so:

window.addEventListener( ’keydown’, function( event ) {   onKeyDown( event ); });

The listener passes the event object to the function, which contains a bunch of useful stuff. Here what we’re interested in: the event.keycode. Pressing the ‘a’ key gives us a keycode of 65, and pressing us a ‘z’ gives us a keycode of 90. So we simply subtract 65 from the keycode to give us the required file number and pass this value into a changeFile() function, which I’ll show in a bit.

Similarly we want keys 0–9 (keycodes 48 to 57, so subtract 48 ) to change banks. We also want test to see whether the shift key has been pressed to load sets. The event object has a handy event.shiftKey variable for this, so our onKeyDown function will look like so:

// KeyPress Stuff

function onKeyDown( event ) {

    var keyCode = event.keyCode;

   // CHANGE FILE // keys a-z   if ( keyCode >= 65 && keyCode <= 90 ) {      changeFile(keyCode - 65);

   // CHANGE SET AND BANK // keys 0-9   } else if ( keyCode >= 48 && keyCode <= 57 ) {

      // Test whether the shift key is also being pressed      if( event.shiftKey ) {       changeBank( keyCode-48 );      } else {       changeSet( keyCode-48 );      }

   }

}

The changeFile() function basically just takes the keypress and converts it into a URL. It calls our loadJS() function to inject the content into the page, and boom we’re away...

_from [radarboy3000 on Instagram](https://www.instagram.com/radarboy3000/" rel="noopener" target="blank" title=")

So our changeFile() function would look like this:

var current_file = 0;var current_set = 0;var current_bank = 0;

var art_location = "art/";

// FILE LOADER FUNCTIONS

function changeFile(file) {

  current_file = file;  var loc = current_set + '/' + current_bank + '/' + current_file;  var filename = contentLocation + loc + '.js';  loadJS(filename);  document.location.hash = loc; //console.log("File: " + loc);

}

I also have an art_location variable in case I want to have different collections of visuals (so I can have different folders for different shows and installations). I also add the filename as a hash (https://127.0.0.1/#set/bank/file) to the browser’s URL to make it easy to see where I am.

Our changeBank() and changeSet() functions set the current_bank and current_set variables. Then they just call the changeFile() function to pull up the correct file.

For housekeeping, I also reset all the counters — setting current_file back to 0 when I change banks, and the current_bank back to 0 when I change sets. This is so I know that when I change banks, the file playing will be the first file in the bank. Similarly, when I change sets, the file playing will reset to be be the first file from the first bank of the current set (current_set/0/0.js).

A bit of a mouthful, but the functions are actually super simple:

function changeSet(set) {

  current_set = set;  console.log("changeSet: " + current_set);

  // reset bank number  changeBank(0);

}

function changeBank(bank) {

current_bank = bank;  console.log("changeBank: " + current_bank);

  // reset file number and load new file  changeFile(0);

}

And so the complete code for your basic VJ engine looks like this:

// FILE LOADER FUNCTIONS

var art_location = "/art";

var fileref;var current_file = 0;var current_set = 0;var current_bank = 0;

function changeFile( file ) {  reset()  current_file = file;  var loc = current_set + '/' + current_bank + '/' + current_file;  var filename = 'art/' + loc + '.js';  loadJS( filename );  document.location.hash = loc;  //console.log("File: " + loc);}

function changeSet( set ) {  current_set = set;  current_bank = 0;  console.log( "changeSet: " + current_bank );  // reset  changeFile( 0 );}

function changeBank( bank ) {  current_bank = bank;  console.log( "changeBank: " + current_bank );  changeFile( 0 );}

function reset(){  ctx.clearRect( 0, 0, w, h );  ctx2.clearRect( 0, 0, w, h );  ctx3.clearRect( 0, 0, w, h );  ctx.lineCap = "butt";}

// INJECT JS ONTO PAGE

function loadJS( filename ) {

if ( fileref != undefined ) document.getElementsByTagName( "head" )[ 0 ].removeChild( fileref );  fileref = document.createElement( 'script' );  fileref.setAttribute( "type", "text/javascript" );  fileref.setAttribute( "src", filename );  document.getElementsByTagName( "head" )[ 0 ].appendChild( fileref );

}

_from [radarboy3000 on Instagram](https://www.instagram.com/radarboy3000/" rel="noopener" target="blank" title=")

All that’s left to show you is how I structure the actual content files, which use an encapsulated function like so:

// RBVJ art

rbvj = function() {

  draw = function() {     // do some creative coding here  }

}();

The function rbvj() is what gets injected into the page. It’s reused, so that every time a new file is inserted into my page, the memory gets flushed from all previous content.

By encapsulating the code (see the ‘()’ after the function), any code inside the rbvj() function will run automatically when the file is injected into the page.

You’ll notice that inside the content, I have a draw() function (this one from my own creative_coding.js utility script). It’s just a simple loop that uses JavaScript’s requestAnimationFrame() and is able to vary the frame rate.

var frame_number = 0;var frame_rate = 60;var last_update = Date.now();

function loop() {

var now = Date.now();  var elapsed_mils = now - last_update;

if ((typeof window.draw == 'function') && (elapsed_mils >= (1000 / window.frame_rate))) {    window.draw();    frame_number++;    last_update = now - elapsed_mils % (1000 / window.frame_rate);  }  requestAnimationFrame(loop);

};

And that’s pretty much it. You now have a working VJ engine in the bowser.

3. Some other things to know that may be helpful

I normally just plug my computer’s sound input straight into an input from the venue’s mixer or amp (I use a version of my standard microphone input mic.js file, which you can read more about here). And I have keys setup (in my case, the plus and minus keys) to adjust the input levels up or down, so I don’t have to keep accessing the mixer.

Also note that for sound input, you’ll need a secure HTTPS connection — or if you use something like Atom’s Live Server, then that’s built in.

I also have a bunch of other keys set up for simple audio and visual filters (see how to make a pixelation filter here).

I mostly don’t use a preview screen/interface, but it’s easy enough to build one. Just create a new HTML page and let the pages talk to each other through a socket.

And finally, one last tip: when developing content, simply make a function to read in the current hash value of the browser, and call the loadFile() function on page load. That way, when you’re working on a file and you reload the page, that file is automatically displayed.

And that’s pretty much it. Hope this helps you get out there and show more of your content. As I mentioned previously, I’ve included a whole bunch of content for you to play around with and test so you can get a feel of how I create my stuff. If you use or alter any of it, I’d love to see how, where, and what you did with it. So please drop me a line.

Happy coding. And thanks for reading!

As usual the full code is available on Github.

This article is part of an ongoing series of tutorials on learning creative coding in pure JavaScript. As yes, I should be doing this in ES6, but wanted to keep this as simple as possible to understand.

You can see previous all my previous creative coding tutorials here.

And follow me here for updates, techniques and eye candy:

@radarboy3000 * Instagram photos and videos
_3,960 Followers, 843 Following, 1,082 Posts - See Instagram photos and videos from @radarboy3000_www.instagram.comGeorge Gally (@radarboy_japan) | Twitter
_The latest Tweets from George Gally (@radarboy_japan). Media artist, technologist, tinkerer, dreamer. Motion reaction…_twitter.comRadarboy
_Radarboy. 130 likes · 7 talking about this. Art, design visualisation, hacks_www.facebook.com

• a game of 3D pong
• nested 3D shapes that slide around as the cube tilts
• a field of stars whizzing past as if traveling at near light speed
• a surreal humanoid figure that seems to tumble forever through space

Bali Balo is famous on CodePen not only for these explorations of geometry, but also for building a pure-CSS Minesweeper game.

That’s right — a fully functioning Minesweeper game — just like the one that has come pre-installed on Windows for decades.

You can play it here and see that it is indeed running without the use of JavaScript.

And if you have time, I encourage you to read Preethi Kasireddy’s excellent interview with Chris Coyier, who helped create the CodePen platform itself: (17 minute read)

Here are three other links worth your time:

1. A guide that the 500+ engineers at Asian ride-sharing startup Grab use to keep up with changes in front end development (22 minute read)
2. Token Network Effects: a new business model for a decentralized web (6 minute read)
3. Yes — some Coursera courses are still free. You just need to know how to access them. Here’s how. (6 minute read)

Thought of the day:

“I’ve been fairly successful at what I call ‘Tom Sawyering’; it’s the idea that if you want to get your fence painted, you trade something of value with the people with whom you work. You have to be committed to their success as well as your own.” — Chuck Thacker

Chuck Thacker — who helped create technologies like the mouse, laser printer, and ethernet — died this week. The ACM published this obituary for him: (6 minute read)

Image of the day:

“The Horrible CERN Girls” was the first image ever published on the World Wide Web. The photo shows a pop quartet comprised entirely of CERN employees.

You can read about the history of images on the web, and how they were originally proposed, here: (4 minute read)

Study group of the day:

freeCodeCamp Bridgend, UK

Happy coding!

– Quincy Larson, teacher at freeCodeCamp

If you get value out of these emails, please consider supporting our nonprofit.

The intersection of Disney and UX and why learning how to draw Mickey Mouse will change how you approach design

Recently I collaborated together with Glen Keane, Disney animator and legend, on a talk at SXSW. This article is a summary of what we shared during the panel.

Before I became a UX designer, I thought I wanted to be a title sequence designer. I took a course at Carnegie Mellon taught by Dan Boyarski called Time, Motion, and Communication. It was all about kinetic typography, rhythm, color, and movement. Dan used to describe every element on screen as if it were an actor on a stage — a character that we were directing, giving it behavior and personality.

“You are responsible for directing each element’s entrance, performance, and exit.”

We would constantly revisit this sequence, giving reason to why a character was there and what its role was. Introducing time and motion changed everything for me, because what I realized was that it gave you precise control over the emotion you are trying to convey and how an audience will interpret your message. I’d often look to title sequences for inspiration because I was fascinated with how a 30 second or 3 minute sequence had the ability to set the tone for an entire film and foreshadow what was going to happen. When the job hunt began, it was a happy accident how I ended up as a UX designer at R/GA. I knew R/GA had a history in title sequence design — had no idea if they still did that now — but knew it was a place I wanted to work. I intended to apply for a visual design position but was nudged into UX, so started day one thinking, “what are wireframes?!”

Fast forward to a few years later: I’ve created hundreds of wireframes and thousands of annotations that describe how things work and fit together. Things like: When the user taps on the menu icon, the panel will slide down from the top of the page. When the user clicks the thumbnail, the video will enlarge full screen. And then it hit me. We were stuck designing in these extreme states and a huge piece was missing in our work. When our deliverables consist of designing for these static comps like a home page or product page or article page and we only annotate how things flow together, we were completely failing to show what happens in between. Annotating doesn’t provide enough context: we had to start showing it.

The more wireframes I made, the more I started to realize that everything I had once learned about motion design was completely relevant to our roles as UX and visual designers. As I started to pay more attention to everything I engaged with day to day, I realized that the most fluid, delightful, and intuitive experiences were always the ones that put detail into motion design.

Disney & UX

If we’re going to talk about motion and start somewhere, it’s with Disney. Disney developed 12 Principles of Animation which I find to be so important because of the way they depict realistic movement and emotional engagement. Disney had a deep understanding of how things move and behave in real life. They knew that when an audience would watch something on screen, they expected things to move in a way that felt natural. Disney also knew that if they wanted to captivate their audience they needed a layer of emotional engagement. It’s how they became some of the first animators to create full-length feature films that captured an audience’s heart and made characters feel believable and relatable. Realistic movement, emotional engagement, solving extreme states… that’s how this all starts to come together.

UX Choreography is a combination of the how with the when and why — the proper techniques of applying motion and captivating an audience combined with the most integral moments in user experience where you can start engaging your user in a two-way dialogue.

The 5 Principles of UX Choreography

The biggest thing to take away here is that our job as UX and visual designers is not just to make things functional and follow best practices. We’re also trying to make these experiences enjoyable and, most of all, tell a story through experience sequences. The more I paid attention to how motion was applied in digital and the techniques that were being used, the more I started to see a pattern. I arrived at these 5 principles, which I feel address the most important communication points in UX, solve the gaps between extreme states, and overall create a more polished experience. Getting these details right is important because it influences people’s perception and trust in your product, which overall creates a more positive experience and enjoyable experience.

Feedback

Feedback helps demonstrate the result of a user’s interaction, whether or not it was successful, and why. It’s often used to show if something is correct or incorrect, if something is loading, if you’re making progress, or simply when you are making selections. Feedback is important because it builds trust with your users and it’s really satisfying and delightful for users to see! It helps add a tactile element to interactions because it makes you forget you may just be tapping a piece of glass and instead makes you feel like you’re interacting with real elements on the screen. It’s nice to feel like things are reacting to what you’re doing. When you think of designing for Feedback, it’s important to work on making it obvious to users. Feedback is more effective when multiple layers of elements are working together to react to what users do.

So, what can Disney teach us here? Exaggeration. Glen describes exaggeration as something that is felt, not just seen. Often you’ll see characters react a big, unmistakeable way.

Beast getting frustrated and surprised

He illustrated an example of Beast getting frustrated with Belle when she said she wasn’t going to dinner. Beast’s face stretched up and his eyes widened, making him look surprised. Then his face squashed down and his brows looked angry. An audience doesn’t even notice the subtleties of what’s happening because it happens so fast, but it makes the end result feel like a jolt and completely obvious.

Examples of Feedback. iOS password shake: simple head shake, directly relates to how we give feedback to each other. Dots: simple and delightful, many different layers working together. Yahoo News: each circle fills one by one, the counter updates, your progress is complete and you are rewarded with a full screen fact. Beats: genres react when you tap, progress building is a queue to the user. (PS — check out capptivate.co for great examples).

Feedforward

Feedforward: it’s a form of hinting. It’s visual affordance. It helps convey to users what possible interactions are and what to expect so that they better understand how things work and fit together. Feedforward nudges users through the correct sequence of actions so that they can avoid confusion and better accomplish your goals. It really helps prepare people for what’s about to happen and what to do, hinting at things like, “pay attention, look here!” or “you can drop that here” or “pull this a little further.” Often these are really subtle details… people may not even notice they are happening and recall what little cues helped them. Subtle, but powerful! The payoff can be huge when Feedforward is executed effectively.

Disney’s principle of Anticipation has a very similar goal: preparing an audience for what’s about to happen.

Mickey’s open hand becomes a symbol for the action of reaching across and grabbing a ball

In order to convey this principle, Glen first illustrated a very simple sequence of Mickey reaching across a table to pick up a ball. In the first drawing, his hand was close to him and Mickey was eyeing the ball across the table. In the next drawing, Mickey’s hand was already on the ball. It’s such a simple gesture, that’s all you think you’d need to illustrate, right? The downfall here is that there is no enjoyment for the audience; before they know it, an action is completed. They may not have been ready for what you were about to do, even if it seemed so obvious when you were illustrating it. Taking the time to build anticipation by adding in an extra frame with Mickey’s hand wide open, stretching across table becomes a symbol to the audience where they realize that something is about to happen.

“You can’t get impatient with the audience, they are just responding.”

Another example of Anticipation that Glen shared was a scene in Duet where Tosh was climbing down the tree. Initially, Glen just had Tosh hop off. He soon realized, however, that everyone had missed it because it happened too quickly. “You never want your audience behind you,” Glen described. He redrew this scene and had Tosh first look back at Mia, then turn his torso back forward to go down the tree. That subtle cue made all the difference in the world and helped the audience naturally follow where Tosh was going to go next.

Examples of Feedforward. Clear: a subtle hint at a new list item as soon as you pull. Moldiv: a slight peek at the controls behind the home screen gives users a cue. Yummly: what was previously just a white background now becomes an input field. Snapchat: pull to refresh, the hint of a color or a spinner is a cue that something is about to happen.

Spatial Awareness

Spatial Awareness helps orient users with their environment and clarify the relationships between every element. If you think about it, there are essentially unlimited possibilities to the fictional, digital environments you are creating. Every experience you make has a unique lay of the land… elements may “live” behind the screen, to the left or right, pinched in-between, in a drawer… anything your little designer heart desires. However, you need to make sure you give logic to your environment. It’s especially important to think this through on smaller screens where you’re forced to think about how to properly use the little screen real estate you have and how you can reduce complexity. Having this open canvas while designing an environment is great for you as a designer, but it means that users have to learn and understand what you made. They have to learn every environment they engage with. There’s always a period of onboarding and orientation. Users need to understand where things come from, where they go next, and where they can find them again. You really have to ease people through these transitions so they understand how they got from point A to point B so that it doesn’t feel like a stark, sudden change. Sudden change doesn’t exist in the real world! The main objectives of Spatial Awareness are orienting your users and giving logic to environments. Disney’s principle of Staging teaches us a lot about this.

Glen often talked about how the placement of a character in a scene can create expectation. For example, if a character is far left, the open space to the right creates want, “and when you have want, you have something to work with.” It creates an intensity, as if something is about to click with the audience.

sequence of Mia in Duet

There is a beautiful sequence in Duet where Mia jumps into a pond, swims and flips, then exits the water and does a cartwheel. Glen described the scene as having a “magnetic power” which responded to what Mia was doing and push her forward. For example, when she first hits the water there is a major change — the bubbles are like an explosion around her. He said, “You can’t change total environments without some kind of impact.” These bubbles help tell you where she’s been, and the fish that then surround her tell the audience where she is going next. It’s as if they are squeezing her to the next frame. What I love about this sequence is how the logic to the environment makes it feel like there is a connected thread from frame to frame, which guides the audience’s attention.

Examples of Spatial Awareness. Calendar: days of the week rest side by side, ease the user between each one. Stellar: a storytelling app takes the theme further into its UI with the use of pages. VSCO: trays of controls act like a toolkit you can pull up from the bottom. Nike Making: categories zoom full screen, push to top, then the layers of sub-categories drop down and float into place.

User Focus

User Focus guides your user’s attention and clarifies change states. It’s all about controlling the transitions of hierarchy at each moment in time. It puts emphasis on the right elements depending on what the objective is. There may be multiple layers of elements working together to support that action. It may not always be as simple as bringing one element to the foreground when it’s need… maybe the background reacts too. It could fade a little or darken in order to give more prominence to the focus. You’ll often see a technique like the use of contextual controls — these important little actions you always want to have on hand — and you know they’re there — but you don’t necessarily have to see them all the time. They only come into focus the second you call for them.

User Focus helps bring Clarity to every objective in your experience. Clarity: admittedly this is not an official Disney principle! Let’s name this an honorary 13th. But Glen would tell me how this is one of the most important techniques he learned while at Disney. Eric Larson would always emphasize how they should never leave their audience behind.

A scene from Little Whirlwind, animated by Freddie Moore.

“At Disney, I kept hearing about the plausible impossible,” Glen would say. There were moments were you could make someone believe something that may seem ridiculously crazy and they don’t question it. For example, in Little Whirlwind (1941), there was a scene where Freddie Moore was animating Mickey trying to hold down a basket of leaves that the whirlwind kept blowing away. All of a sudden, Mickey reaches into the center of himself and pulls out a huge hammer. It was so big because it was the only instance an audience was going to see it and was the most important thing in the scene at that moment. The audience doesn’t question why the hammer is there or where it came from because it’s what’s needed most in that moment. The plausible impossible makes you feel like you can break the rules a little bit.

“If the audience is with you, they’re happy. If you lose them, no one is happy.”

Examples of User Focus. Pinterest: contextual controls appear at the moment they are needed. Paper Notifications: layers of animation guide attention — the globe bounces, the tray slides out and there’s a slight glow in the title. Peek: selections take up full screen, get very bright while others fade back, selections float back into place when done. Yahoo Weather: motion is the first thing that grabs your attention at the bottom; communicates wind speed.

Brand Tone of Voice

I often tell people to think of this the same way we treat copy guidelines. Every project where we think about, “If a brand were to speak to us, what would it say?” we also need to start thinking, “If a brand were to move, what would it feel like?” Is it whimsical? Is it swift and powerful? Is it a subtle added detail that helps users recognize who exactly you are? Demonstrating your tone of voice leaves your users with these little moments where they feel like saying, “I could totally see this brand doing that” because it felt so right and appropriate.

Think about all of the apps, sites, and experiences you use day to day and why you keep using them. Often there are dozens of other apps out there that can do the same exact thing and accomplish the same tasks. They might all have a good user experience but the ones that people gravitate towards to something more. You feel like they delight you, or they enable you, or you get something out of it. They have more than just a good user experience. They have emotional appeal. Appeal is the last Disney principle we’ll reference. It’s one of the most magical, but admittedly can be difficult to design for.

“Appeal is a mysterious thing because you know when you’ve got it and you know it when you don’t have it but you have no idea how to get it.”

Freddie Moore was an animator at Disney who was really responsible for creating the “look and feel” of Disney, Glen described. Before he came along, Mickey was “just a circle.” It wasn’t the Mickey we know today. Freddie started creating a relationship between every element in his characters. Frank Thomas and Ollie Johnston would often tell the animators, “Every line relates to another line.” When drawing Mickey, everything would follow a theme. You would start with the circle of Mickey’s head, then draw his nose so it pointed up and followed the curve of his head. His eyes came closer to the nose and relate to it, the followed by his eyebrows and mouth — which would come up and push against his cheek. Suddenly there was something about Mickey that you were drawn to. Mickey had the power to pull an audience in because he had appeal. Glen has this belief that every character already exists before you draw them. When you get it right, you recognize them and you are the one who brings the character into the world. When you have Appeal, you find those moments and it’s a beautiful thing when it all comes together.

“That is the key to appeal. It’s like the harmony of elements… a chord that is perfect. You hear it and say, ‘that’s it.’”

Examples of Brand Tone of Voice. Snapchat: whimsical — the ghosts have become so iconic, people look forward to seeing what else they are going next. Flickr: subtle and clever — when you refresh someone’s profile, the iconic pink and blue dots cycle around. Nike+: the whole app follows the theme of running, with bold and powerful badges sliding into place on the track. Zappos: people love finding easter eggs…especially if it’s a cat wearing a cape.

These 5 principles are how you captivate your audience and how they interact with your story. It’s your responsibility to craft an experience sequence that is realistic and emotional, connecting all the keyframes in your work. This is where we start to solve for the missing pieces and define the characters in our work. But the characters we’re designing for aren’t just the ones on screen — we’re also designing for the human element — our main character is our user.

Whether it’s films, apps, sites, or books….no matter the context, the medium, the environment, our objectives are all the same. We’re all engaging with our character in a narrative, and it’s your responsibility to direct each character’s entrance, performance, and exit. The interface you are designing for is just a window into a larger story.

Designing for motion may be something new and unfamiliar, but we’ve all experienced these moments where you step into a new problem and are at a loss on how to solve it. Glen even shared how designing for Duet was an intimidating task at first — he was used to drawing on a piece of paper where if a character goes off the paper they are gone. But in this interactive experience where the audience could follow characters in every direction, it was as if he’d have to solve for an infinite canvas. That’s why having these principles in your back pocket is a great thing — they’ll serve as the foundation for any problem that may come your way.

“I’m always doing that which I don’t know how to do in order that I may learn how to do it.” — Picasso

FIN

BONUS: The making of UX Choreography and how I was lucky enough to work with a Disney Legend

Last year I had a simple goal: give a design talk on a topic I was interested in. It was as simple as that. Motion design is a topic I’ve always been interested in and find to be more and more relevant to what we’re doing today as UX and visual designers, so I put together a talk during an AIGA Mentor event last summer at R/GA (and was pretty happy just to accomplish that). I submitted it to SXSW not thinking anything else would become of it, but after a suggestion to find a Disney animator to collaborate with (where was I going to find that?!), a few attempts to reach out to people, a stroke of luck, a random introduction, and the stars aligning — I was introduced to Glen Keane, Disney legend. Glen worked at Disney for 38 years and was the animator behind the characters in some of our most beloved films of all time, such as the Little Mermaid, Beauty & the Beast, and Aladdin. He left Disney 2 years ago to see what else was out there and how he could apply his animation background to something else and continue to push himself (check out his work for Google’s Spotlight Stories, which includes his most recent animated short, Duet). When I told Glen about UX Choreography, he was interested immediately (!). You see, when he first joined Disney, the “9 old men” had to pass down their knowledge of Disney animation principles. “Some day you’re going to do bigger things than us,” Ollie Johnston told Glen. Glen felt like they had “passed the baton” to him. He never imagined that these Disney principles would be translated into something like UX, so he saw this as an opportunity to “pass the baton” to me. So once upon a time, we collaborated on an absolutely wonderful presentation at SXSW. I could literally go on for hours about the stories Glen shared and what I learned, but we’ll have to save that for another time!

_You made it this far, so thanks for reading! If you want more resources to get started here are a few, or tweet me @beccau

Find inspiration

Many of the examples in this article were curated by Alli Dryer, check out her site to see dozens of great examples of motion in practice.

http://capptivate.co/

other favorites:

http://hoverstat.es/

https://instagram.com/userinterfacesio

More awesome reading:

https://medium.com/@pasql/transitional-interfaces-926eb80d64e3

http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

Learn about Disney principles, then start making stuff

http://the12principles.tumblr.com/

http://uxinmotion.net/

http://digg.com/2015/12-principles-animation-ollie-johnston-frank-thomas-alan-becker