Building a Media Player #3: Median Cut and Color Extraction
Articles Blog

Building a Media Player #3: Median Cut and Color Extraction


22 thoughts on “Building a Media Player #3: Median Cut and Color Extraction

  1. am i the only one that had to pause the code section to understand the quantizing bit and still didnt understand it:(

  2. Side note: A simpler but less efficient algorithm for generating color palettes is k-means clustering. It’s a good exercise to implement 🙂

  3. Another Paul Lewis video, another opportunity to feel like a novice again lol. Keep 'em comin! This series is off to a great start.

  4. Paul, so far how different has been for you doing basic scripting tasks in node.js vs python, the fact that python has a big standard library and for node.js you need to install modules. Also the programming model of node.js, you have EventEmmiter, Stream, Buffer, I feel a bit hard to understand how all interconnects.

  5. May I suggest putting a link to the Wikipedia article next to the const calcLuminance formula? As a code comment

  6. As soon as I saw the initially generated swatch, I could see that there was obviously something wrong. There's a large swathe of greens in the middle of the picture which were not represented in the resulting palette.

  7. Love the series. To any developers that want play with the media cut… the bug that he fixes consistenly produces a muted palette. Also, generating the complementary color swatch creates a lovely contrast (so far)

  8. The code:

    const argv = require('yargs').argv;
    const Swatch = require('./swatch');
    const image = argv.image;

    if (!image) {
    console.error('Please provide an image');
    process.exit(1);
    }

    Swatch.load(image)
    .then(pixels => Swatch.quantize(pixels))
    .then(buckets => Swatch.orderByLuminance(buckets))
    .then(swatch => {
    console.log(swatch);

    const fs = require('fs');
    const path = require('path');
    swatchHTML = `
    <!doctype html>
    <html>
    <head>
    <title> Swatch for ${image} </title>
    <style>
    html, body {width: 100%; height: 100%; margin: 0; padding: 0}
    body {display: flex; flex-wrap: wrap;}
    .color {width: 25%; height: 25%;}
    </style>
    <head>
    <body>
    ${swatch.reduce((prev, color) => {
    return prev + `<div
    class="color"
    style="background-color: rgb(${color, r}, ${color.g}, ${color.b})"></div>;
    }, '')}
    </body>
    </html>
    `;
    fs.write(`${path.dirname(image)}/swatch.html`, swatchHTML);
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top