为JS渲染器准备数据

Question

它被要求编写一个脚本来生成源数据来输入JavaScript呈现程序。

JS渲染器文档

JS渲染器是这样的脚本：

function o(x){
  r=x.split(' ');
  (d=document).write('<style>i{position:absolute;width:10;height:10;background:#000}</style>');
  for(i=0;i<r.length;++i){c=r[i].split(',');d.write('<i style=top:'+(e=eval)(c[0])+';left:'+e(c[1])+'></i>')
  }
}

它以X/Y坐标列表为输入，用空格和逗号分隔，在DOM上打印点为10×10像素正方形。

例如，如果您用以下方法调用脚本：

o('0,0 10,0 20,0 30,0 40,0 20,10 20,20 0,30 10,30 20,30 30,30 40,30 0,50 10,50 20,50 30,50 40,50');

它将印刷：

请注意，这些值可以表示为计算，因此它将接受：

o('10*2,50/5');

您的任务

编写一个脚本，作为输入给出一个字符串([A-Z0-9 ]；大写字母、数字、空格)在stdout上打印坐标以输入JS渲染器。

规则

• 字符的“线高”应至少为50 be。
• 您的脚本不需要运行JS解析器
• 预期的输出格式是：x,y x,y x,y x,y
• 最短代码获胜

红利:如果您可以在不改变行为的情况下减少JS呈现程序的长度:)

Answer 1

数学-164个字节

如果你说这是作弊，我很高兴同意，但这在问题中并不排除。我让Mathematica对字符串进行栅格化，然后丢弃所有的白色像素，并从其余的部分生成指令：

 g=""<>MapIndexed[If[#<1,"",{h,w}=ToString/@(10#2);h<>","<>w<>""]&,ImageData@Rasterize[#,RasterSize->(n=5StringLength@#),ImageSize->n]/.{(1.)..}->0/.{_,_,_}->1,{2}]&

它很可能会被打得更低。特别是/.{(1.)..}->0/.{_,_,_}->1看上去可疑的是，它可以被简化。

略无高尔夫球的：

g[str_] := (
    n = 5*StringLength[str];
    pixels = ImageData[Rasterize[str, RasterSize->n, ImageSize->n]]
                /. {1., 1., 1.} -> 0 
                /. {_, _, _} -> 1;
    StringJoin[
      MapIndexed[
        If[#1 < 1,
           "",
           {h, w} = Map[ToString, 10*#2];
           h <> "," <> w <> ""
        ] &,
        pixels,
        {2}
      ]
    ]
);

这将真正处理字符串中的任何字符，您可以通过调整5来调整大小(这意味着字母有5个像素宽，满足了50个实际像素高的要求)。

下面是一些使用7分辨率的示例输出：

这里使用的是9的分辨率：

和12：

(当然，屏幕截图有点缩小，以适应SE的列宽。)

Answer 2

APL，196chars

f←37 5 3⍴(555/2)⊤95x⊥32-⍨⎕UCS'ne,[9fkO!|UUmYb~qu"*5n2wJgBe1P~P+E)$?ZGHb4{W(:edC2JdpirhX4I@m/K/q,ww <=:N%(euf9AJ"'
⎕←1↓∊{⍕¨' '⍺','⍵}/¨↑,/{10×(2↑4×⍵-1)∘+¨1-⍨a/⍥,⍳⍴a←⍉f[(' ',⎕A,∊⍕¨0,⍳9)⍳⍵⌷s;;]}¨⍳⍴s←⍞

方言是Nars2000。

第一行生成字体，这是我从此页获取的。我把它编码成可打印的ASCII字符，所以第一行对其进行解码，并将其转换为37×5×3位图。

第二行读取一行输入。对于每个字符，它从字体中提取正确的位图，生成“on”位的坐标列表，根据字符串中的位置向第一个坐标(x)添加偏移量，乘以10，根据需要格式化结果并输出。

以下是HELLO WORLD 9的输出

0,0 0,10 0,20 0,30 0,40 10,20 20,0 20,10 20,20 20,30 20,40 40,0 40,10 40,20 40,30 40,40 50,0 50,20 50,40 60,0 60,20 60,40 80,0 80,10 80,20 80,30 80,40 90,40 100,40 120,0 120,10 120,20 120,30 120,40 130,40 140,40 160,10 160,20 160,30 170,0 170,40 180,10 180,20 180,30 240,0 240,10 240,20 240,30 240,40 250,30 260,0 260,10 260,20 260,30 260,40 280,10 280,20 280,30 290,0 290,40 300,10 300,20 300,30 320,0 320,10 320,20 320,30 320,40 330,0 330,20 330,30 340,10 340,20 340,40 360,0 360,10 360,20 360,30 360,40 370,40 380,40 400,0 400,10 400,20 400,30 400,40 410,0 410,40 420,10 420,20 420,30 480,0 480,10 480,20 480,40 490,0 490,20 490,40 500,0 500,10 500,20 500,30 500,40

在这里，它变成了一幅图像：

它可能会得到更多的地方，但主要的好处将来自一个更聪明的字体编码。

如果有人问的话，我可以更详细地解释代码。

Answer 3

Javascript (E6) 274

(261功能+ 13控制台输出)

不是那么短，而是任何字体，任何大小，任何字符

F=(m,f="50",F="Georgia")=>{d=1024;e=document.createElement("canvas");c=e.getContext("2d");e.height=e.width=d;c.font=f+"px "+F;c.fillText(m,0,f);
i=c.getImageData(0,0,d,d).data;q='';for(p=d*d*4;p;p-=4)i[p-1]&&(q+=(p>>12)+'0,'+((p>>2)&(d-1))+'0 ');return q.trim()}

Ungolfed

function F(m, f="50", F="Georgia") {
  d = 1024   
  e = document.createElement("canvas")
  c = e.getContext("2d")
  e.height = e.width=d
  c.font = f + "px " + F
  c.fillText(m,0,f);
  i = c.getImageData(0,0,d,d).data;
  q=''
  for (p = d*d*4; p; p-=4)
    i[p-1] && (q += (p >> 12)+'0,'+((p>>2) & (d-1))+'0 ');
  return q.trim()
}

使用

console.log(F('HELLO WORLD'))

console.log(F('Bonjour, monde',30,'Garamond'))