Redraw a masterpiece with mosaic pictures

Pierre Grimaud — Wed, 30 Jun 2021 16:19:35 +0000

Today, my brilliant intern @nispeon finished a small project I imagined last year: redraw a masterpiece with mosaic pictures.

Explanation of the project

I created an exercice for him, to work with python, GitHub API and GitHub Actions.

Main goal: redraw a masterpiece with mosaic pictures.

We would have been able to use a random sample of pictures to do this exercice, but we thought it could be funny for visitors to check where's their avatar on the generated picture.

We found a nice project Photomosaic generator by Viet Nguyen to generate mosaic with pictures.

So we decided to re-use his code base which works perfectly.

How is generated the picture?

Each day, the script will :

Fetch all stargazers of the repository using GitHub API
Download avatar picture of all users
Extract main color of each avatar picture
Split origin picture into small parts of 30px
Extract main color of each part of the origin picture
Match color of each part with the color of an avatar and replace it on the origin picture
Write the new picture on a folder
Commit the picture generated using GitHub Actions

How you can help

We will not add random people without permission, so if you would like to participate: you just have to star this repository.

Why do you need to star to participate? Because it will be very easy to retrieve all avatars with GitHub API and automatically update the image every day.

The more stargazers we will get, more qualitative will be the output. We could also reduce the size of the avatars to get best definition.

First result

Original picture :

Output picture :

Take a look at the HD generated picture and the repository 👀

What do you think about it?

Pierre 🤖

__
Connect with me on GitHub
Connect with me on Twitter

How to generate a random number in Shopify?

Pierre Grimaud — Tue, 26 Jan 2021 18:08:41 +0000

Hello there, this is my first post in DEV. 🙋🏻‍♂️

Random is always useful, even on e-commerce environments. Showing random products or pictures for example, could be nice.

What's the problem?

Liquid is a template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.

There's an awesome Shopify cheat sheet with basics, tags, filters and objects available on Liquid. But the are no tags to pick a random number from a range or just generate one.

Let me explain you how to do it with a simple trick.

How?

First, define min and max numbers. They will be use as range to generate a random number.

{%- assign min = O -%}
{%- assign max = 9 -%}

Then, get the current date with "now" and apply the "%N" date filter to get fractional seconds digits (precise to nanoseconds).

{%- assign date_fract = "now" | date: "%N" -%}

Next, use the modulo filter to get a random value between your min & max values.

{%- assign diff = max | minus: min -%}
{%- assign random_number = "now" | date: "%N" | modulo: diff -%}

Finally, add your min value to the result.

{%- assign random_number = random_number | plus: min -%}

In short:

{%- assign min = 0 -%}
{%- assign max = 9 -%}
{%- assign diff = max | minus: min -%}
{%- assign random_number = "now" | date: "%N" | modulo: diff | plus: min -%}

You can use it as snippets as well:

{% render 'random-number' %} # snippets with random number code 
{{ random_number }} # here's your random number

With a random number, you can now pick a random value in an array of products, pictures or whatever. 💯

Limitations

On Shopify, store pages are aggressively cached. Using it on production theme may not work as intended and random numbers could be stuck for minutes or hours.

Adding a product to card or editing a product on Shopify back-end will flush cache, so use is wisely.

Wanna more?

This code comes from a repository Shopify snippets with "ready to use" parts of code which can be reusable when developing Shopify themes.

Put a 🌟 if this post helped you. :)

Pierre 🤖

__
Follow me on GitHub
Follow me on Twitter

Cover image via Pixabay

DEV Community: Pierre Grimaud