> ## Content Index
> Fetch the complete content index at: https://www.bramadams.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Embeddings as Shapes v0.1
- URL: https://www.bramadams.dev/202308091339/
- Published: 2023-08-09T17:47:27.000Z
- Updated: 2024-02-17T18:22:05.000Z
- Description: Embeddings, this time as shapes! (v0.1)
- Author: Bram Adams
- Tags: creative-coding, #u-bg-feature-image, #u-color-text-light

Similar concept to [visualizing embeddings vectors with colors](https://www.bramadams.dev/202308081300/).

Current issue is how to treat scale and drop shadow! I want the higher values to "pop" out of the canvas, but so many values are close to each other to be indiscernible value gradients. Workshopping it!

![https://bram-adams.ghost.io/content/images/2023/08/2023.08.09-13.38.22.png](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/08/2023.08.09-13.38.22.png)

2023.08.09-13.38.22.png

![https://bram-adams.ghost.io/content/images/2023/08/2023.08.09-13.34.33.png](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/08/2023.08.09-13.34.33.png)

2023.08.09-13.34.33.png

![https://bram-adams.ghost.io/content/images/2023/08/2023.08.09-13.32.50.png](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/08/2023.08.09-13.32.50.png)

2023.08.09-13.32.50.png

![https://bram-adams.ghost.io/content/images/2023/08/2023.08.09-13.29.58.png](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/08/2023.08.09-13.29.58.png)

2023.08.09-13.29.58.png

## Code

```javascript
const min = Math.min(...embedding);
const max = Math.max(...embedding);

const settings = {
  // Pass the p5 instance, and preload function if necessary
  p5: { p5 },
  // Turn on a render loop
  animate: false,
};

canvasSketch(({ p5 }) => {
  return ({ p5 }) => {
    // create a grid of squares from embeddings.length
    // assign each square a color from the embedding value

    // scale shapes from min and max values from 0 to 1
    function scaleShapes(value) {
        return ((value - min) / (max - min)) * 10;
    }   

    const padding = 10;

    p5.createCanvas(480, 320);

    const scaledShapes = embedding.map(scaleShapes);

    // return index of min and max scaledShapes
    const minIndex = scaledShapes.indexOf(Math.min(...scaledShapes));
    const maxIndex = scaledShapes.indexOf(Math.max(...scaledShapes));
    console.log(minIndex, maxIndex);
    console.log(scaledShapes[minIndex], scaledShapes[maxIndex]);

    // create a grid of squares from embeddings.length
    for (let i = 0; i < 48; i++) {
        for (let j = 0; j < 32; j++) {
            const index = i * 32 + j;
            // p5.noStroke();            
            // put a rect in middle of padding index
            // p5.rectMode(p5.CORNER);
            // p5.rect(i * 10, j * 10, 10, 10);

            // if embedding value at index is negative, fill with black
            if (embedding[index] < 0) {
                p5.fill(0);
                // add a drop shadow
                p5.drawingContext.shadowOffsetX = 2 + scaledShapes[index];
                p5.drawingContext.shadowOffsetY = 2 + scaledShapes[index];
                p5.drawingContext.shadowBlur = 2;
                p5.drawingContext.shadowColor = "rgba(0,0,0,0.2)";
            } else {
                p5.fill(255);
                // remove drop shadow
                p5.drawingContext.shadowOffsetX = 0;
                p5.drawingContext.shadowOffsetY = 0;
                p5.drawingContext.shadowBlur = 0;
                p5.drawingContext.shadowColor = "rgba(0,0,0,0)";

            }

            p5.noStroke();
            p5.rectMode(p5.CENTER); 

            p5.rect(i * 10 + (padding / 2), j * 10 + (padding / 2), 
            5 + scaledShapes[index], 
            5 + scaledShapes[index]);
        }
    }
  };
}, settings);

```

**bramadams.dev is a reader-supported** [**published Zettelkasten**](https://www.bramadams.dev/about/)**.** [**Both free and paid subscriptions are available**](#/portal)**. If you want to support my work, the best way is by taking out a paid subscription.**