고유한 아바타 색상을 임의로 자동 생성

반응형

그리고 새로 고칠 때마다 배경색은 그대로 유지됩니다.
이제 어떻게 이런 일이 일어나는지 잠시 생각해 보세요.

두 가지 간단한 방법이 있을 수 있습니다.

• DB의 각 사용자에 대해 배경색을 저장하고 다른 사용자 세부 정보와 함께 가져올 수 있습니다.
• 일부 고유한 사용자 속성(예: 이메일, 사용자 이름 또는 사용자)을 기반으로 고유하지만 일관된 배경색을 생성합니다.아이디)

 

2번부터 시작하겠습니다.

임의 색상 생성

먼저 웹페이지에서 CSS 컬러의 기본에 대해 알아보겠습니다. 그리고 우리는 이것을 하기 위해 다음 여정을 따라갈 것입니다.

• CSS 색상 형식에 대해 알아보기
• 색상 형식 선택
• 문자열 해싱의 기본 사항
• 해시 정규화
• 해시를 사용하여 고유한 CSS 색상 생성

CSS 색상 형식

 

이 MDN 페이지에서 일반적인 CSS 색상 형식을 파악할 수 있습니다.

• 명명된 색상
  빨강, 초록, 파랑, 아쿠아
• 빨강, 초록, 파랑, 아쿠아
• RGB 16진수
  #RGGBB 또는 #RGB
  #3b49df는 파란색, #333은 어두운 회색입니다.
• #RGGBB 또는 #RGB
• #3b49df는 파란색, #333은 어두운 회색입니다.
• RGB 함수
  rgb(255, 255, 255)는 흰색입니다.
  추가 알파(불일치성) 값에 대한 rgba 값
• rgb(255, 255, 255)는 흰색입니다.
• 추가 알파(불일치성) 값에 대한 rgba 값
• hsl function함수
  hsl은 색조-포도-밝기
  색상 - 각도를 사용하여 색상을 선택하기 위한 것입니다.
  포화도 - 낮은 채도는 회색이고 더 많은 채도는 밝은 색입니다.
  밝기 - 적은 밝기는 검은색이고 더 밝은 밝기는 흰색입니다.
  추가 알파 값에 대한 sla(),
  다른 것도 있지만 여기까지 하겠습니다.
• hsl은 색조-포도-밝기
• 색상 - 각도를 사용하여 색상을 선택하기 위한 것입니다.
• 포화도 - 낮은 채도는 회색이고 더 많은 채도는 밝은 색입니다.
• 밝기 - 적은 밝기는 검은색이고 더 밝은 밝기는 흰색입니다.
• 추가 알파 값에 대한 sla(),
  다른 것도 있지만 여기까지 하겠습니다.

색상 형식 선택

이제 RGB와 HSL 둘 다 사용할 수 있지만, 당면한 작업의 경우 HSL이 상대적으로 작업하기 쉽습니다. ¯_(ツ)_/¯ 왜, 묻나? 날 믿어...
그리고, 기사 끝에 있습니다.

문자열 해시를 만드는 중

 

이제 문자열을 단순한 숫자로 줄여 그 숫자를 사용하여 색상을 생성해야 합니다.
다른 기사에서 해싱에 대해 자세히 알아보겠습니다. 컴퓨터 과학 커뮤니티는 더 나은 해싱 기능을 만들기 위해 엄청난 시간을 할애했습니다. 그러나 해시가 무엇인지에 대해 간략히 살펴보겠습니다.

교육적으로.이오

예를 들어 문자열을 사용하여 이해하겠습니다. 피유시 쿠마르 발리얀. 해싱에 대한 결정적인 기사라고 여기지 마세요. 나는 아직 해싱에 대해 배우고 있고 기본적인 것만 알고 있어.

시도 1

const getHashOfString = (str: string) => {
   return str.length;
}
console.log(getHashOfString('Piyush Kumar Baliyan')); //20

 

이것은 초단순 해시함수이지만 충돌 가능성이 매우 높다. (충돌은 서로 다른 두 문자열이 동일한 해시를 생성할 수 있는 경우이다.

시도 2

함수를 수정하여 문자열에 있는 각 문자의 문자 코드 합계를 계산해 봅시다.

const getHashOfString = (str) => {
    const charArray = Array.from(str);
    return charArray.reduce((total, _char, index) => {
          return total += str.charCodeAt(index);
    }, 0);
}
console.log(getHashOfString('Piyush Kumar Baliyan')); // 1922

이것은 충돌 가능성이 적기 때문에 해싱이 더 낫지만, 동일한 문자를 가진 문자열은 충돌을 일으킬 수 있습니다.

 

시도 3

이제 총 charCode*index를 살펴보겠습니다.

const getHashOfString = (str) => {
    const charArray = Array.from(str);
    return charArray.reduce((total, _char, index) => {
          return total += (str.charCodeAt(index) * index);
    }, 0);
}
}
console.log(getHashOfString('Piyush Kumar Baliyan')); // 18329

이게 더 낫고 갈등의 가능성도 적다.

그러나 이 숫자(charCodeindex)는 큰 문자열의 경우 매우 커질 수 있으며 산술(math)과 충돌할 수 있기 때문에 문제가 됩니다(carCodeindex).°)╯︵ ┻━┻.

 

시도 4

시도 5

.

.

.

 

x-1 시도

조금 나아졌지만, MD5나 샤 같은 실제 해싱 알갱이 근처에는 아직 없습니다.

const getHashOfString = (str: string) => {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
          hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    hash = Math.abs(hash);
    return hash;
};
console.log(getHashOfString('Piyush Kumar Baliyan')); // 3206952792

해시 정규화

이제 해싱 알고가 있지만 아무 숫자나 반환하고 다음과 같은 숫자가 필요합니다.

 

• 색조 0-360
• 포화도 0-100
• 밝기 0-100

따라서 해시 번호를 우리의 범위 내로 가져오는 정규 함수를 만들어 봅시다.

const normalizeHash = (hash: number, min: number, max: number) => {
    return Math.floor((hash % (max - min)) + min);
};

const h = normalizeHash(myHash, 0, 360);
const s = normalizeHash(myHash, 0, 100);
const l = normalizeHash(myHash, 0, 100);

고유 색상 생성

이제 h,s,l 값을 사용하여 문자열을 만들면 됩니다.

 

const hRange = [0, 360];
const sRange = [0, 100];
const lRange = [0, 100];

const generateHSL = (name: string): HSL => {
    const hash = getHashOfString(name);
    const h = normalizeHash(hash, hRange[0], hRange[1]);
    const s = normalizeHash(hash, sRange[0], sRange[1]);
    const l = normalizeHash(hash, lRange[0], lRange[1]);
    return [h, s, l];
};

const HSLtoString = (hsl: HSL) => {
    return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
};

출력은 다음과 같습니다.

바로 그거야!?

만약 이것이 보인다면, 너무 진하거나 너무 회색인 색상을 생성할 수 있습니다. 그리고 너무 하얗거나 너무 어두운 색을 만들 수 있습니다.

 

그리고 이것이 HSL을 사용하는 이유입니다. RGB에서 개별 값 또는 r,g,b는 색의 광도(밝기)를 만들며 제어하기 어렵다.

그냥 이렇게 하면 발색이 잘 돼요.

const hRange = [0, 360];
const sRange = [50, 75];
const lRange = [25, 60];

이제 아래의 JsFiddle을 가지고 놀면서 채도와 밝기 범위가 색상 생성에 어떤 영향을 미치는지 확인해 보십시오.

 

• 밝은색/어두운색 테마를 사용하여 각 테마에 적합한 색상 범위를 확인합니다.
• 채도를 왼쪽으로 끌어서 색상이 회색으로 변하는 방식 확인
• 밝기를 오른쪽으로 끌어서 색상이 흰색(그리고 검은색)이 되는 방식을 확인합니다.
• 범위를 사용하여 당신의 브랜드에 가장 적합한 채도와 밝기를 알아보세요.

보너스 팁

색조 제한기를 사용하여 모든 녹색 톤 또는 모든 보라색 톤과 같은 색상을 생성하여 브랜드 색상과 더 잘 어울립니다.

다음에

아바타 사용자를 생성하는 방법에 대해 쓸거야 NFT 스타일.

 

다음 읽기