Pixelsorting! It looks awesome! Pixelsort your art and turn it into GLITCH ART!

After reading Crespy Baptiste's excellent writeup on Pixel sorting in GLSL (Shadertoy link), I wanted to build on the work he did, to implement this style of image distortion in FFGL.

I originally wrote this effect plugin 5 years ago, using Resolume FFGL. However since then, Resolume Wire has made writing Video Effects way more accessible. I recently converted the ffgl code over to Wire and made some upgrades.

Parameters:

• Distance: each frame, how far can pixels move as they're being sorted?
• Threshold: prevent pixels from sorting past each other if their difference is too large. At 0, this rule doesn't apply; at 1, no pixels will sort.
• Freshness: how much of the new video do we mix into the pixelsorted image? at 0, thie image is essentially frozen. At low values, sorted pixels fill the output. At 1, we mix in a lot of the new video image.
• Toggle: toggle to start/stop sorting
• Vertical: switch from horizontal to vertical sorting
• Reverse: swap left/right and up/down sorting

This is designed for Resolume 7.18 and up; it probably won't work with older versions! To use with Resolume, drop these .wired files into your Plugin Directory (set under Preferences->Video) and restart Resolume.

Recently, Slack changed their payment model such that free accounts can only see 90 days or 10,000 messages of history. However, those messages aren't deleted: they still exist and are freely accessible to you, just in a less-than-helpful format. This guide will show you how to stand up your own Slack Archive website so that you and your fellow Slack members can use your archive as a reference when you're looking for old conversations.

Downloading Your Slack Archive

From Slack, click on the workspace menu > Settings & administration > Workplace settings.

• Click Import & Export Data.
• Click the Export tab.
• Choose "Entire history" for your Export date range, then click Start Export.

Save the zip file you received during this process. I renamed this file to export.zip.

Converting Your Slack Archive to HTML

There are two excellent projects on Github to help us with this step:

https://github.com/hfaran/slack-export-viewer - Hosts a website locally to display your Slack data.
https://github.com/hfaran/slack2html - Run slack-export-viewer and export your data as web assets (html, css, images etc.)

Clone the slack2html repo. You need to change a line in requirements.txt from click to click==8.1.3 to deal with some incompatibility issues between Flask and Click. After that, from the slack2html folder, run these commands:

mkdir out
python3 slack2html.py -z export.zip -o out

You can verify that the export worked by opening the file slack2html/out/index.html and confirming that your content is there.

If you're on Windows and having trouble getting this script to work, I recommend using WSL2 for your shell.

Setting Up Webhosting for a Static Site

If you already have web hosting for static files, you probably have your own idea about the fastest way to get your files hosted online. What I have here, is how to set up your site using DigitalOcean, Portainer, and nginx-proxy-manager. This setup allows me to expand to serve more domains and subdomains with different containers; i.e. I can run multiple services off of one DigitalOcean droplet.

Setting Up a Droplet on DigitalOcean

In DigitalOcean, create a Droplet from the Docker image in the marketplace:

Installing Portainer

Once your droplet is running, you can install Portainer, which will give you a web interface to manage your Docker containers. From the console of your droplet, run this:

docker volume create portainer_data
docker run -d -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce:latest

From there, you can navigate to {droplet-ip}:9443 and create a login for Portainer.

Installing nginx-proxy-manager

Once inside, choose your local environment, then navigate to Stacks and click Add Stack. You can follow the instructions here to create a docker-compose file. This page also includes the default admin user credentials. I used something like this:

version: "3.3"
services:
  npm-app:
    image: 'jc21/nginx-proxy-manager:latest'
    container_name: npm-app
    restart: unless-stopped
    ports:
      - '80:80' # Public HTTP Port
      - '443:443' # Public HTTPS Port
      - '81:81' # Admin Web Port
      # Add any other Stream port you want to expose
      # - '21:21' # FTP
    environment:
      DB_MYSQL_HOST: "npm-db"
      DB_MYSQL_PORT: 3306
      DB_MYSQL_USER: "npm"
      DB_MYSQL_PASSWORD: ${DB_MYSQL_PASSWORD}
      DB_MYSQL_NAME: "npm"
      # Uncomment the line below if IPv6 is not enabled on your host
      # DISABLE_IPV6: 'true'
    volumes:
      - ./npm-data:/data:Z
      - ./letsencrypt:/etc/letsencrypt:Z
    depends_on:
      - npm-db
    networks:
      - npm-network
      - npm-internal

  npm-db:
    image: 'mariadb:latest'
    container_name: npm-db
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: 'npm'
      MYSQL_USER: 'npm'
      MYSQL_PASSWORD: ${DB_MYSQL_PASSWORD}
    volumes:
      - ./npm-data/mysql:/var/lib/mysql:Z
    networks:
      - npm-internal

networks:
  npm-internal:
  npm-network:
    external: true

Note that you will need to set environment variables for DB_MYSQL_PASSWORD and MYSQL_ROOT_PASSWORD which should be set to something secure. You will also need to create a network named npm-network to enable communication between nginx-proxy-manager and your other containers.

Loading Content Into nginx

From the container npm-app, open the console. From here, you want to upload your files to the container. I ran a script like this:

cd /data
mkdir subdomain.example.com
cd subdomain.example.com/
# here, use a tool to upload content.zip
unzip content.zip 
rm content.zip

Setting Up Authentication

To set up Basic authentication, you'll want to do something like this to set up a single username/password combination that you'll use to authenticate to your site:

cd /etc
openssl passwd # util for generating a password hash
echo "{username}:{hashed password}" > .htpasswd

Once this is set up, you can log in to nginx-proxy-manager by navigating to {your droplet IP}:81.

Configuring nginx-proxy-manager

Under Details, add your domain/subdomain with a forward host IP of 127.0.0.1 on port 80.

On the SSL tab, you can request an SSL Certificate. This will work as long as you have set up an A record with your DNS registrar.

Under Advanced Configuration, use this custom configuration:

location / {
  root /data/subdomain.example.com;
  auth_basic "Authorization Required";
  auth_basic_user_file  "/etc/.htpasswd";
}

At this point, you can navigate to your host subdomain.example.com and you should see your Slack archive!

Here's an LED coat I put together in 2022, which runs over 700 individually addressable LEDs. This uses WS2812 IP65 144 leds/m style LEDs, powered off an Arduino Nano Every. Code here.

This coat went through a handful of iterations. Originally I was running this off a Raspberry Pico using python code - but this was running too slow and I was getting around 4 frames per second. I figured this was due to the language (and/or the hardware) so I switched the code over to C++ running on Arduino. The Nano Every is plenty powerful and is probably fancier than needed for this project - but it uses 35% of the working memory and runs at 60 fps for most of the patterns I throw at it.

When switching to C++ I also was able to dig into the FastLED libary code some more and found a ton of example patterns that are easy to modify and showcase some pretty cool functions for designing patterns - like easy conversion between HSV and RGB, sin wave functions, fades, mixing etc., all stuff I usually had to write myself on the python side of things.

I also iterated on how to best diffuse the LEDs. Originally I was using 60 leds/m strips and diffusing with white paint, painted over the waterproof cover. This ended up being a terrible idea as white paint just ends up getting everywhere, and I should've done more to seal the paint. I even tried adding scotch tape over the top of the strips, but this just looked cheap & bad.

Next I tried using aluminum channels, like I use for Lightdream. I found some that were flexible - they do bend, but they were still extremely stiff and formed a weird shape around my body. The flexibility in the shoulers wasn't really flexible enough ex. they couldn't wrap around my shoulders.

Eventually I decided this wasn't the outfit where I was going to have "great diffusion" - but I did increase the LED density and lowered the brightness, which lets me create smoother patterns and hopefully won't hurt people's eyes when they stare at it.

Turn your video clip into tiles. Customize the size, # of rows and # of columns of your tiles. Then start scrolling them!

I saw this effect at the 2020 MUTEK.SF virtual festival and wanted to recreate it. I can't find the stream I saw anymore. If I've learned anything from this virtual festival season, it's that Twitch doesn't keep archived videos around for long, and Vimeo keeps their live streams locked down.

I think this looks best when you get a single column of frames and slowly scroll them. But, I included "# of columns" as a parameter in case you want to get creative with it.

This is designed for Resolume 7 64-bit; it probably won't work with other versions! To use with Resolume, drop these .dll files into your Plugin Directory (set under Preferences->Video) and restart Resolume.

Turn your video clip into a filmstrip!

I went a little crazy with the customization options for this shader. You can even control the width of the "frame borders" and the size of the film feeder holes. It's a little cheesy, but I wanted to make the film holes respond to audio input.

This is designed for Resolume 7 64-bit; it probably won't work with other versions! To use with Resolume, drop these .dll files into your Plugin Directory (set under Preferences->Video) and restart Resolume.

Want to show just a wedge of your image? Want to animate your videos with Pac-man reveals? You're literally clicks away from doing it.

I needed this for my Lightdream project, so I can easily apply videos/effects to specific sections of the dome we're covering with LEDs.

This plugin has the following parameters:

• Angle: the starting angle for your mask
• Range: the % of the circle you want to show

This is designed for Resolume 7 64-bit; it probably won't work with other versions! To use with Resolume, drop these .dll files into your Plugin Directory (set under Preferences->Video) and restart Resolume.

Watch the video above for a walkthrough, or read below if that fits your learning style!

To get the most out of this tutorial, you'll want some familiarity with OpenGL and C++. You don't need to be an expert, but you'll want to have some basic familiarity with concepts like vertex shaders, fragment shaders, and texture mapping.

If you're looking for online resources, I recommend The Book of Shaders. However, if you really want a good foundation, I highly recommend this book, Computer Graphics Programming in OpenGL with C++. This has helped me with basically everything I do with computer graphics even if I'm not directly using either OpenGL or C++.

You'll also need Git and Visual Studio installed.

Step 1. Running the Examples

Resolume's FFGL repository

Check out the repo above and open up the included solution file at build/windows/FFGLPlugins.sln

Once it's imported, you can see the folders here for the different types of plugins you can create. sources are also known as generators - they take no texture input and create an output just from the code you write. effects have one input texture, and mixers have two or more input textures.
I'm going to focus on effects since that should give you an idea of how to use textures and variables controlled by Resolume.

Next, let's export one of the example plugins just to make sure we can do this process from start to finish.  Let's take the effect AddSubtract and go ahead and build it (by right-clicking the project file and clicking Build).

Open Resolume 7. Go to Preferences->Video and make sure that Resolume's looking in the right folder for your FFGL plugin.

Step 2. Duplicate the Project Files

You can follow the steps here: Create your first plugin

If you have Git Bash installed or some other bash-like command prompt, try running this function from the FFGL repository directory (subbing "Vignette" for the name of your plugin):

# first parameter is the effect filename to use. CamelCase, no spaces
create_effect () {
  cp build/windows/AddSubtract.vcxproj build/windows/$1.vcxproj
  sed -i "/ProjectGuid/d" build/windows/$1.vcxproj
  sed -i "s/AddSubtract/$1/g" build/windows/$1.vcxproj

  cp -r source/plugins/AddSubtract source/plugins/$1
  cd source/plugins/$1
  mv AddSubtract.cpp $1.cpp
  mv AddSubtract.h $1.h
  sed -i "s/AddSubtract/$1/g" $1.cpp
  sed -i "s/AddSubtract/$1/g" $1.h
  cd ../../..
}

create_effect "Vignette"

Step 3. Add a Float Parameter

Let's go into the constructor here and we'll replace the RGB sliders with a simple float parameter. It ranges from 0 to 1, very straightforward. To do that, just add a parameter like this:
AddParam( ffglqs::Param::Create( "Sensitivity" ) );
You can namespace ffglqs if you prefer.

That is actually all you have to do to get the parameter set up. The function SendParams is going to take care of setting uniform variables and all the stuff you'd expect to do to get your shaders and your variables connected.

Make sure SetMinInputs and SetMaxInputs reflect the number of inputs you're using.

Step 4. Developing Your Shader

One way you can start writing your effects is to just come into this frag shader code and start making edits. This will work fine if you can write perfect code, but if you make mistakes, you'll find that this part is a huge headache. Say you make a typo (like, missing a semicolon) and go to build your shader. It will build just fine, and then it loads in Resolume, but nothing happens and you don't get any error messages.

For editing shaders, I like to use VS Code with a few shader plugins. First, there's glsl-snippets, which gives you autocompletion and function descriptions - SUPER helpful.
The other plugin I use is GLSL Linter - the alternate GLSL Lint works fine too. Make sure you read the installation instructions - basically what you do is you need to install the shader validator - so you go to this github page, go to releases and grab the appropriate package. Unzip it. In VSCode, after you have this installed, open user settings and make sure your GLSLang Validator path is filled in.

Give your file a .frag extension - this lets the validator know that you're writing a fragment shader (assuming that's what you're using).

Sidenote: Shadertory

If you want to use something like ShaderToy to develop your shaders, you totally can, but there are a couple differences you should know about. ShaderToy uses OpenGL 3.0 ESS, which is pretty old at this point. You'll notice we're using OpenGL 4.1 for our FFGL plugin. I could be wrong, but I don't think you're able to change the OpenGL version on ShaderToy, which is too bad.

The signatures to the functions main() in FFGL and mainImage() in ShaderToy are different. Basically, in ShaderToy you end up doing a bunch of math with the screen resolution and mouse coordinates. In this project, since uv is a vec2 with both coordinates from 0 to 1, you don't need to know the exact resolution.

Step 5. Debugging

One of the nice things about Resolume 7 is you can make changes to your plugins without having to close and restart Resolume. To do that, just make sure you clear out any instances of your plugin like this. ... Then you can make changes over in Visual Studio

Lastly, I wanted to cover how to use the debugger. This is important when your plugin "just doesn't work" and you need to see the error messages.

In Visual Studio, Make sure your build target is Debug instead of Release. In the Debug menu, and click Attach to Process, then find your Resolume process and click Attach. Now, when you load your plugin in Resolume, you'll see error messages in your output panel.

Questions?

Email me or try Resolume Forums

Followed this tutorial to something trippy-lookin'. Basically, this is a wireframe with a short cone shape, inside a spherical mirror. The crossing lattices give that nice diamonds-resizing-and-morphing effect...O_O

Took some advice on color theory (from watching this video) to maybe tone down the saturation and stop attacking people's eyes so hard. Don't always need to be so intense with bright & clashing colors!

Made with Blender and touched up in After Effects.

Followed Blender Guru's tutorial to make this nice-lookin' donut! I like the way he keeps image boards for himself to keep track of stuff like, "good looking sprinkles". I got to play with texture-painting, used particle/hair effects to get the sprinkles looking varied in shape and color, and figured out a bit of Eevee vs Cycles.

Developing in Cycles is a real pain with an old graphics card. Might be time to update - the render above took about 70 minutes. Here's what it looks like in Eevee (without post-processing):

Here are some earlier WIPs:

Followed an intermediate-level tutorial here: Create a Modern Bedroom in Blender in 35 Minutes. Reference image here.

This tutorial felt WAY over my head - was a bit of a struggle to get through it to the end. The bed and rug are completely original. The top sheet is a plane folded on itself, with cloth simulation applied - I set up collision on the mattress below and let the cloth animate to lay flat & fold onto itself. That created the physical wrinkles, but I also applied a texture to add extra wrinkles to it.

The rug uses "hair" particles which made it pretty easy to change how the strands look!

The lighting here was pretty challenging - definitely have some weird shadows here and I feel like the "seams" are showing - but that's OK! Oh you definitely can see one of my "cheating" lights in the mirror, none of the lights in the scene show up like that.

Some things here are pre-made assets like the flowers, lights, lamp, table, chair, and the outdoors scene.

Here's some in-progress pics:

Followed a beginner-level tutorial for making a treasure chest here: MODELING for Absolute Beginners. Pretty simple stuff, just a bunch of loop cuts and extruding faces along normals.

Need to make some pretty kaleidoscope patterns? Maybe you need to create some weird clones? Maybe there's a specific region of your video that's so awesome, it needs to be multiplied?

EZ Radial Cloner does that.

I wrote this because I wanted a flexible cloner like the Resolume's Kaleidoscope, but without having the effect also mirror each clone. I also wanted complete control over which region gets cloned.

It includes the following parameters

• Angle: The starting angle of the clone.
• Area: Which area to clone. Incrementing this rotates the line of origin.
• Clones: The number of clones (from 1 to 21).
• Mirror: Set this to 1 to mirror the cloned region.

These are 32-bit and 64-bit FFGL Plugins, compatible with Resolume and other video software. To use with Resolume, drop these .dll files into your Plugin Directory (set under Preferences->Video) and restart Resolume.

Resolume's got a nice pixelating effect called LoRez. The only problem? It's made of squares, not HEXAGONS.

This plugin hexagonizes your video.

It includes the following parameters:

• Width: The width of the mosaic tiles (from no effect to 1/10th of the screen width)
• Blending: This controls the blend amount, i.e. how many pixels do I sample in each tile to decide which color the tile should be? Setting this to 0 usually results in more contrast.
• X Offset: The inital X coordinate of the tiles. Shift this around with automation for a nice scrolling effect.
• Y Offset: Same as above, but for the Y axis.

These are 32-bit and 64-bit FFGL Plugins, compatible with Resolume and other video software. To use with Resolume, drop these .dll files into your Plugin Directory (set under Preferences->Video) and restart Resolume.

1. Ghost is designed for ambitious, professional publishers who want to actively build a business around their content. That's who it works best for.
2. The entire platform can be modified and customised to suit your needs. It's very powerful, but does require some knowledge of code. Ghost is not necessarily a good platform for beginners or people who just want a simple personal blog.
3. It's possible to work with all your favourite tools and apps with hundreds of integrations to speed up your workflows, connect email lists, build communities and much more.

Behind the scenes

Ghost is made by an independent non-profit organisation called the Ghost Foundation. We are 100% self funded by revenue from our Ghost(Pro) service, and every penny we make is re-invested into funding further development of free, open source technology for modern publishing.

The version of Ghost you are looking at right now would not have been made possible without generous contributions from the open source community.

Next up, the editor

The main thing you'll want to read about next is probably: the Ghost editor. This is where the good stuff happens.

By the way, once you're done reading, you can simply delete the default Ghost user from your team to remove all of these introductory posts!