무지개 텍스트 만들기


22

입력 한 텍스트를 한 줄로 입력하여 다음과 같이 출력해야합니다.

무지개 이미지

입출력

입력은 인쇄 가능한 ASCII 문자 만 포함하는 문자열이됩니다. 첫 번째 또는 마지막 문자는 공백이 아니며 행에 두 개의 공백이 없습니다. 항상 2 자 이상이어야합니다.

출력은 동일한 문자열이어야하며 아래 설명 된대로 무지개 색으로 변환해야합니다. 출력은 이미지 형식 (파일에 저장되거나 다른 방식으로 사용 가능하게 됨) 일 수도 있고 단순히 결과를 화면에 표시 할 수도 있습니다 (아래 참조 구현과 같이).

변환

문자열의 각 문자가 어떤 색이되어야하는지 결정하려면 다음 알고리즘을 사용하십시오. 참고 각 문자가 자신의 개별 색상입니다 . 이것은 그라디언트가 아닙니다!

  • 이 문자가 공백 인 경우 :

    • ... 공간은 실제로 색상을 가질 수 없기 때문에 중요하지 않습니다. 간단히 공간을 출력하십시오.
  • 그렇지 않으면:

    • 하자 i(그래서 매우 첫 글자를 위해,이이며, 0 기반 = 문자열에서이 문자의 인덱스는 0공간을 계산하지). 예를 들어, 문자열 foo bar이 값이 될 것이다 4을 위해 a. 즉, 지금까지 발생한 비 공백 수입니다.

    • n문자열에 공백이 아닌 수를 보자 .

    • 이 문자의 색상은 이제 HSL 원통형 좌표계 에서 [hue = ( i/ n) * 360 °, 채도 = 100 %, 명도 = 50 %] 로 표현할 수 있습니다 .

이 주 방향의 출력한다는 것을 의미 foo하고 f oo, 완전히 동일하게 애프터 추가 공간을 제외한다 f. 즉, 모든 글자는 같은 색을 유지해야합니다.

변환 프로세스에 대한 추가 규칙은 아래의 규칙 섹션 에 설명되어 있습니다 .

참조 구현

이것은 JavaScript로 작성되었으며 "Run code snippet"버튼을 눌러 시도 할 수 있습니다.

window.addEventListener('load', function() {
    addRainbow('Your challenge is to take input as a line of text and ' +
        'output it like this.');
});

// append this text rainbow-ified to the argument (document.body by default)
function addRainbow(text, el) {
    (el || document.body).appendChild(makeRainbow(text));
}

// returns a <div> that contains the text in a rainbow font
function makeRainbow(text) {
    var div = document.createElement('div');
    var letterCount = text.replace(/ /g, '').length, spaceCount = 0;
    text.split('').forEach(function(letter, idx) {
        if (letter == ' ') ++spaceCount;
        div.appendChild(makeLetter(letter, (idx - spaceCount) / letterCount));
    });
    return div;
}

// returns a <span> that contains the letter in the specified color
function makeLetter(letter, hue) {
    hue = Math.floor(hue * 360);
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(letter));
    span.style.color = 'hsl(' + hue + ', 100%, 50%)';
    return span;
}

규칙

  • 문자의 색조 값을 계산할 때 거의 확실하게 10 진수 (정수가 아닌) 숫자를 얻게됩니다. 이것을 가장 가까운 정수로 반올림하거나, 바닥을 내거나, 천장을 취하거나, 전혀 반올림하지 않을 수 있습니다.

  • 글꼴 크기를 읽을 수 있어야합니다. 여기서는 10pt 크기 이상의 글꼴로 정의됩니다.

  • 고정 너비 캔버스 또는 "도면 영역"을 사용하여 텍스트를 출력 할 수 있지만 이 게시물의 첫 번째 문장에 제시된 예에 맞출 수 있어야합니다 .

  • 스코어링은 이므로 바이트 단위의 가장 짧은 코드가 승리합니다.


출력이 데이터 URI 일 수 있습니까? 즉, HTML 캔버스의 출력입니다
Downgoat

@vihan 예, " 출력은 이미지 형식 (파일로 저장되거나 다른 방식으로 사용 가능) "규칙에 따라 자격이됩니다 .
Doorknob

착색이 사양을 충족하는지 어떻게 확인합니까? 언어에서 RGB 색상 만 지원되는 경우 어떤 변환 공식을 사용해야하는지 정확하게 지정할 수 있습니까? 또한 채널당 몇 비트의 정밀도가 필요합니까? 아마도 8은 괜찮을 것입니다. 그러나 약 4 또는 1입니까?
feersum

@feersum RGB로 변환하려면 내장 또는 여기에 설명 된 방법 중 하나를 사용할 수 있습니다 . 두 번째 질문에서 당신이 의미하는 바를 명확하게 설명해 주시겠습니까? HSL에서 RGB 로의 변환과 관련하여 또는 일반적 으로이 문제에 대해 묻고 있습니까?
손잡이

2
Dang, 나는 PowerShell로 시도하지 않을 것입니다 ... 16 가지 색상 만 재생할 수 있습니다 (무지개 또는 RGB 또는 기타 ... 임의의 16 진수 값도 주문되지 않습니다). 참고로, 그림과 함께 정말 멋진 도전!
AdmBorkBork

답변:


12

펄, 95

92 바이트 코드 + 3 -p

이 스크립트는 현재이 목록 에서 선택한 몇 가지 색 점만 포함하여 터미널에 사용 가능한 대략적인 색 (256 최대)을 사용 하므로 사양이 지정되지 않았지만 어쨌든 재미있었습니다! 난 단지와 색상 표시에 목록을 필터링 S하고 L100%50%다음 색상으로 분류되어 각각을 문자열로 숫자를 포장하고 목록에서 색상을 선택합니다.

이 구현에는 인쇄 할 수없는 문자가 포함됩니다! @ edc65 의 스톨 \S.단순하지만 영리한 대신에 대체 하는 아이디어입니다 !

@c=map ord,"..........vR../012.3-'!..9]........"=~/./g;s|\S|\e[38;5;$c[@c*$i++/y/!-~//]m$&|g

16 진 덤프 :

0000000: 4063 3d6d 6170 206f 7264 2c22 09c4 cad0  @c=map ord,"....
0000010: d6dc 0be2 be9a 7652 0a2e 2f30 3132 0e33  ......vR../012.3
0000020: 2d27 211b 1539 5d81 a50d c9c8 c7c6 c522  -'!..9]........"
0000030: 3d7e 2f2e 2f67 3b73 7c5c 537c 5c65 5b33  =~/./g;s|\S|\e[3
0000040: 383b 353b 2463 5b40 632a 2469 2b2b 2f79  8;5;$c[@c*$i++/y
0000050: 2f21 2d7e 2f2f 5d6d 2426 7c67            /!-~//]m$&|g

위의 텍스트를 복사하고 다음을 실행하여 16 진 덤프를 되 돌리십시오.

xxd -r > rainbowtext.pl

데이터를 붙여넣고 Ctrl+를 누릅니다 D.

다음을 사용하여 실행하십시오.

perl -p rainbowtext.pl <<< 'Your challenge is to take input as a line of text and output it like this.'

다음과 같은 출력을 생성합니다.

이제 터미널 텍스트가 빨간색입니다!  무하 하하하!


10

Python 2 : 240 PIL 및 Colorsys 라이브러리 사용

import PIL,colorsys as c
s=input()
u,a=len(s),255
g=Image.new('RGB',(u*6,13),(a,)*3)
[ImageDraw.Draw(g).text((j*6,0),s[j],fill=tuple(int(h*a)for h in c.hls_to_rgb(1.*(j-s[:j].count(' '))/(u-s.count(' ')),.5,1)))for j in range(u)]
g.show()

출력 예 :

레인보우 텍스트 출력 예 공백으로 테스트

골프 팁을위한 @agtoever와 @Trang Oul과 공간 요구 사항을 지적한 @Mauris에게 감사드립니다.

트루 타입 글꼴을 추가하려면 가로 오프셋 및 색상을 포함한 글꼴 크기 제어로 길이에 따라 변경됩니다.

import PIL as P,colorsys as c
s=input()
u=len(s)
a=255
fs=25
f=P.ImageFont.truetype("a.ttf",fs)
sza=f.getsize(s)
oa=f.getoffset(s)
g=P.Image.new('RGB',(sza[0]+fs,2*sza[1]+oa[1]),(a,)*3)
r=fs/4
P.ImageDraw.Draw(g).text((r,0),s,fill=(0,0,0),font=f)
for j in range(u):   
 o=f.getoffset(s[j])
 sz=f.getsize(s[j])   
 r+=o[0]
 P.ImageDraw.Draw(g).text((r,0+fs),s[j],fill=tuple([int(h*a)for h in c.hls_to_rgb(1.*r/sza[0],.5,1)]),font=f)
 r+=sz[0]
g.save('a.png')
g.show()

내가 사용한 글꼴은 여기 에서 사용할 수 있습니다 : 결과는 (맨 위는 문자열을 인쇄하고 아래는 문자 당 인쇄하는 것입니다) :

타이프라이터


1
두 번 as P떨어 뜨려 쓰고 PIL한 캐릭터를이기십시오. 4 명의 캐릭터로 변경 img하여 i승리 하십시오 .
agtoever

1
255변수에 저장 하고 모든 발생을 대체 (a,)*3하고 흰색으로 사용하십시오 . 교체 float(j)(j+.0).
Trang Oul

1
또한 : 교체 float(j)1.*j
agtoever

1
여러 변수를 동시에 할당하십시오 (예 : u=len(s) a=255=> u,a=len(s),255). []에서 괄호를 제거 tuple하면 필요하지 않습니다. 루프를 목록 이해로 교체하십시오 (방법은 부작용으로 평가됩니다).
Trang Oul

1
@willem : 문제 사양을 살펴보십시오 ( 변환 아래 ). 프로그램이 공백을 처리하는 방법을 구체적으로 설명합니다.
Lynn

5

자바 스크립트 (ES6) 114 117 125

Edit2 3 바이트가 thx @Dom Hastings를 저장 했습니다. 잘못된 HTML을 편집 하지만 어쨌든 작동합니다.

일반적인 참고 사항 : EcmaScript 6 호환 브라우저에서 스 니펫 실행 테스트 (특히 MSIE가 아닌 Chrome이 아닙니다. Firefox에서 테스트)

F=s=>document.write(s.replace(/\S/g,c=>`<b style=color:hsl(${i++/s.replace(/ /g,'').length*360},100%,50%>`+c,i=0))
<input value='Your challenge is to take input as a line of text and output it like this.' id=I size=100>
<button onclick='F(I.value)'>-></button>


1
아직 ES6를 완벽하게 준수하는 브라우저는 없습니다 . IE는 아직 ES5와 완벽하게 호환되지 않습니다!
SuperJedi224

@ SuperJedi224 동의합니다. 그냥 말하고 있습니다 : Chrome 또는 MSIE로 시도하지 마십시오. Firefox를 사용하는 동안 작동합니다.
edc65

나는 단지 너의 것만을 가지고 있기 때문에 아무 말도하지 말아야한다고 생각하지만, Firefox에서 나에게 여전히 효과가있는 것처럼 선언 )후를 생략 할 수 있다고 생각한다 hsl(!
Dom Hastings

또한, 당신은 변경할 수 ${c}''+c더 2를 저장 ... 더 나은 내와 다시 얻을!
Dom Hastings

Safari 9.0에서는 작동하지 않습니다. C :
애디슨 크럼프

4

파이썬 3, 131 바이트

Dom Hastings의 답변과 유사하지만 파이썬으로 구현되었습니다.

문자열 '|\x82\x88\x8ejF"#$%\x1f\x19\x137[\x7f~}'은 목록 [124,130,136,142,106,70,34,35,36,37,31,25,19,55,91,127,126,125]에서 터미널 색상 코드가 순서대로 표시되는 형식으로 작성 되었습니다. 채도가 100 %이고 값이 50 % 인 색상 만 포함하도록 필터링되었습니다. 그런 다음 목록이 정렬되어 올바른 색상이 먼저 표시됩니다.

stdin에서 입력을 가져 와서 stdout으로 리턴합니다.

사용중인 터미널은 이것을 올바르게 실행하기 위해 반드시 ANSI 이스케이프 코드를 지원해야합니다.

x=input();u=u'|\82\88\8ejF"#$%\1f\19\137[\7f~}';j=0
for i in x:print('\033[38;5;%dm%s'%(ord(u[j*18//len(x.replace(" ", ""))]),i),end="");j+=i!=" "

또는 리터럴 바이트 문자로 단축 버전 (올바르게 붙여 넣지 않음) :

x=input();u='|<82><88><8E>jF"#$%^_^Y^S7[^?~}';j=0
for i in x:print('ESC[38;5;%dm%s'%(ord(u[(j*18)//len(x.replace(" ", ""))]),i),end="");j+=i!=" "

리터럴 16 진 덤프 :

783d696e70757428293b753d277c82888e6a46222324251f1913375b7f7e7d273b6a3d300a666f72206920696e20783a7072696e7428271b5b33383b353b25646d25732725286f726428755b286a2a3138292f2f6c656e28782e7265706c616365282220222c20222229295d292c69292c656e643d2222293b6a2b3d69213d2220220a

9 바이트를 저장해 주셔서 감사합니다 @ swstephe (또한 바이트 계산이 너무 잘못되었음을 알 수 있습니다)!


"\ x82"를 실제 문자로 바꾸지 않겠습니까? 그 문자열을 파일에 쓰고 이진 스크립트로 다시 읽었습니다. \ 033을 원시 이스케이프 문자 또는 \ 1f (16 진)로 바꿀 수 있습니다. "u"를 선언 한 다음 한 번만 사용하십시오. 식으로 아래로 이동하여 몇 개의 문자를 저장할 수 있습니다. 정수 나누기에 "//"를 사용하면 int () 호출을 피할 수 있습니다.
swstephe

죄송합니다. \ 033은 \ x1f와 같습니다.
swstephe

2

PHP, 165 바이트

파라미터 "s"로 입력하여 실행

HTML은 유효하지 않지만 모든 주요 브라우저에서 렌더링해야합니다 (Chrome 및 Firefox에서 테스트).

<?php $n=preg_match_all("/[^ ]/",$q=$_GET['s']);for($i=$j=0;$j<strlen($q);$j++){if(" "!=$s=$q[$j])$i+=360;echo"<a style='color:hsl(".floor($i/$n).",100%,50%)'>".$s;}

1

PHP 4.1, 112 103 102 바이트

@DankMemes의 답변 을 출발점으로 사용 했습니다 . 이부터, 나는 구현했습니다 코드가 다르다는 점에, 변화를.

구현은 비슷하며 코드는 완전히 다릅니다.

foreach(str_split($s)as$c)echo"<a style=color:hsl(",((" "^$c?$i+=360:$i)/strlen($s))|0,",100%,50%>$c";

사용하려면 SESSION / GET / POST / COOKIE에 값을 간단히 설정하십시오 s.

시험 문장에서이 기능을 실행 한 결과 :

<a style=color:hsl(4,100%,50%>Y<a style=color:hsl(9,100%,50%>o<a style=color:hsl(14,100%,50%>u<a style=color:hsl(19,100%,50%>r<a style=color:hsl(24,100%,50%> <a style=color:hsl(29,100%,50%>c<a style=color:hsl(34,100%,50%>h<a style=color:hsl(38,100%,50%>a<a style=color:hsl(43,100%,50%>l<a style=color:hsl(48,100%,50%>l<a style=color:hsl(53,100%,50%>e<a style=color:hsl(58,100%,50%>n<a style=color:hsl(63,100%,50%>g<a style=color:hsl(68,100%,50%>e<a style=color:hsl(72,100%,50%> <a style=color:hsl(77,100%,50%>i<a style=color:hsl(82,100%,50%>s<a style=color:hsl(87,100%,50%> <a style=color:hsl(92,100%,50%>t<a style=color:hsl(97,100%,50%>o<a style=color:hsl(102,100%,50%> <a style=color:hsl(107,100%,50%>t<a style=color:hsl(111,100%,50%>a<a style=color:hsl(116,100%,50%>k<a style=color:hsl(121,100%,50%>e<a style=color:hsl(126,100%,50%> <a style=color:hsl(131,100%,50%>i<a style=color:hsl(136,100%,50%>n<a style=color:hsl(141,100%,50%>p<a style=color:hsl(145,100%,50%>u<a style=color:hsl(150,100%,50%>t<a style=color:hsl(155,100%,50%> <a style=color:hsl(160,100%,50%>a<a style=color:hsl(165,100%,50%>s<a style=color:hsl(170,100%,50%> <a style=color:hsl(175,100%,50%>a<a style=color:hsl(180,100%,50%> <a style=color:hsl(184,100%,50%>l<a style=color:hsl(189,100%,50%>i<a style=color:hsl(194,100%,50%>n<a style=color:hsl(199,100%,50%>e<a style=color:hsl(204,100%,50%> <a style=color:hsl(209,100%,50%>o<a style=color:hsl(214,100%,50%>f<a style=color:hsl(218,100%,50%> <a style=color:hsl(223,100%,50%>t<a style=color:hsl(228,100%,50%>e<a style=color:hsl(233,100%,50%>x<a style=color:hsl(238,100%,50%>t<a style=color:hsl(243,100%,50%> <a style=color:hsl(248,100%,50%>a<a style=color:hsl(252,100%,50%>n<a style=color:hsl(257,100%,50%>d<a style=color:hsl(262,100%,50%> <a style=color:hsl(267,100%,50%>o<a style=color:hsl(272,100%,50%>u<a style=color:hsl(277,100%,50%>t<a style=color:hsl(282,100%,50%>p<a style=color:hsl(287,100%,50%>u<a style=color:hsl(291,100%,50%>t<a style=color:hsl(296,100%,50%> <a style=color:hsl(301,100%,50%>i<a style=color:hsl(306,100%,50%>t<a style=color:hsl(311,100%,50%> <a style=color:hsl(316,100%,50%>l<a style=color:hsl(321,100%,50%>i<a style=color:hsl(325,100%,50%>k<a style=color:hsl(330,100%,50%>e<a style=color:hsl(335,100%,50%> <a style=color:hsl(340,100%,50%>t<a style=color:hsl(345,100%,50%>h<a style=color:hsl(350,100%,50%>i<a style=color:hsl(355,100%,50%>s<a style=color:hsl(360,100%,50%>. 

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.