> For the complete documentation index, see [llms.txt](https://sejabo-db.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sejabo-db.gitbook.io/project/and-ui/undefined-2.md).

# 아바타 제너레이터

## 아이디어 개요

Github나 간혹 특정 사이트를 확인해보면, 아래처럼 계정마다 프로필 이미지가 생성되어 있는 경우가 있다. 흥미로운 점은 이것이 랜덤으로 생성되는 것이 아니라, 각 ID마다 고유한 이미지를 생성한다는 점이다.

![](/files/-LgHYo15EB599WC0G7sP)

## 오픈소스 출처

{% embed url="<https://github.com/stewartlord/identicon.js/tree/master>" %}

## 동작원리

아바타 제너레이터는 해시(Hash) 알고리즘을 이용한 각 데이터에 대한 고유 값으로 각 ID별로 고유한 이미지를 생성하는 기법이다.

1. 사용자의 ID를 MD5 해쉬 알고리즘으로 변환한다.
2. 해당 바이트 값을 순서대로 읽어들여  주어진 규칙에 맞춰 이미지를 생성한다.
3. 생성된 이미지는 SVG를 통해 HTML에 삽입한다.

```javascript
function(){
            var image      = this.image(),
                size       = this.size,
                baseMargin = Math.floor(size * this.margin),
                cell       = Math.floor((size - (baseMargin * 2)) / 5),
                margin     = Math.floor((size - cell * 5) / 2),
                bg         = image.color.apply(image, this.background),
                fg         = image.color.apply(image, this.foreground);

            // the first 15 characters of the hash control the pixels (even/odd)
            // they are drawn down the middle first, then mirrored outwards
            var i, color;
            for (i = 0; i < 15; i++) {
                color = parseInt(this.hash.charAt(i), 16) % 2 ? bg : fg;
                if (i < 5) {
                    this.rectangle(2 * cell + margin, i * cell + margin, cell, cell, color, image);
                } else if (i < 10) {
                    this.rectangle(1 * cell + margin, (i - 5) * cell + margin, cell, cell, color, image);
                    this.rectangle(3 * cell + margin, (i - 5) * cell + margin, cell, cell, color, image);
                } else if (i < 15) {
                    this.rectangle(0 * cell + margin, (i - 10) * cell + margin, cell, cell, color, image);
                    this.rectangle(4 * cell + margin, (i - 10) * cell + margin, cell, cell, color, image);
                }
            }
function rectangle(x, y, w, h, color, image){
            if (this.isSvg()) {
                image.rectangles.push({x: x, y: y, w: w, h: h, color: color});
            } else {
                var i, j;
                for (i = x; i < x + w; i++) {
                    for (j = y; j < y + h; j++) {
                        image.buffer[image.index(i, j)] = color;
                    }
                }
            }
        }
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sejabo-db.gitbook.io/project/and-ui/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.