Author:

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

  • Reggie_thoughts says:

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

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

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

  • Kevin Rodriguez Roman says:

    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.

  • 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.

  • Delicia Brummitt says:

    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)

  • 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 *