0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

アルファベット3文字を使って色彩を表現する

Posted at

やったこと

アルファベット3文字を使って色を表現した.
アルファベットをASCIIコードに変換して, RGBの値0から255で正規化.
最終的に16進数のカラーコードに直して使用した.

実際のコード

colormap.ts
const getColor = (uid: string) => {
    //アルファベットから色を決める関数
    let changeAscii: string[] = [];
    let ascii10: number[] = [];
    let ascii16: string[] = [];
    //asciiの最小値(Aのコード)が65
    let minascii: number = 65;
    //colorcodeの変数に16進数に変換された文字列を継ぎ足していく
    let colorcode: string = '#';
    for (let i = 0; i < 3; i++) {
      //changeAsciiには1文字目と2文字目と3文字目が入る(別に配列じゃなくてもいいやん…)
      changeAscii[i] = uid.slice(i, i + 1);
      //ascii10はchangeAsciiを10進数のコードに変換. Numberで囲んでやって型を落ち着かす.
      ascii10[i] = Number(changeAscii[i].codePointAt(0));
      //ここで正規化&小数点以下切り捨て
      ascii10[i] = Math.floor((255 * (ascii10[i] - minascii)) / 57);
      //ascii16は正規化後のascii10をストリングにしたやつ
      ascii16[i] = ascii10[i].toString(16);
      colorcode += ascii16[i];
    }
    console.log(colorcode);
    return colorcode;
  };

苦労

ascii10[i] = Number(changeAscii[i].codePointAt(0));

の部分がNumber()で囲まないと number|undefinedになってしまうので上の方で変数の型宣言変えたりしながらうんうん唸ったが, 関数とかで呼び出した型はこういうふうにコントロールすればいいんだと勉強になった気がする. たぶんこの問題にあたってこうやって解決したのは初めてじゃないのでちゃんと書いとく.

0
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?