When the dot matrix encounters 3D

Source: Internet
Author: User


Early in the remote DOS era, the lattice Chinese library has played a key role in the computer processing of Chinese characters. At that time the display in the graphics mode of resolution only 640x480 or even 320x200, the display of Chinese characters directly using the dot matrix font on the screen to dot on it. Today's computer screens and even mobile phones, television screens have entered the Retina HD screen era, font also early use of vectorization technology. In fact, industrial computer and other embedded devices in the field of lattice font is still widely used. In addition, predecessors painstakingly finishing these HZK12, HZK16, HZK24 Chinese character lattice font still have what use? In this paper, we try to use Twaver 3d technology to continue to play the residual heat of these lattice fonts.


Online can easily search to hzk12, hzk16, Hzk24, hzk32 and other specifications of the dot matrix font file. Take the simplest commonly used Chinese character set gb2312 For example, 6,763 Chinese characters, to 12 of the lattice font, only less than 200k. But 12 of the lattice is a bit too coarse, visually difficult to accept, even illegible. 16 The display effect is slightly good, the file is about 260k. 32-point array of Chinese character size will reach a few trillion, a Chinese character lattice =32x32=1024 points, whether with 3d or 2d to deal with, the amount is a bit large. So choose 16 of the font to do this example. In addition, generally 24 of the lattice font is mainly used for printing, its direction is reversed, the program needs to pay attention to the direction of circulation.

Now also has the software to automatically generate the lattice Chinese character library, specifies the machine the font and the resolution and then processing can. If you are not satisfied with the dot matrix font, you can generate one yourself. For 16 of the lattice, it is good to display clearly, font style aesthetics is not, so the regeneration is meaningless. The text lattice in these fonts has been optimized for the best display results.

In JS to process these lattice data, directly with the binary file is too cumbersome, preferably in the format of the JS, such as arrays, JSON and so on. First, familiarize yourself with the structure of the font.


hzk16 binary bitmap file contains the Chinese characters defined in the GB2312. GB2312 included simplified characters and symbols, letters, Japanese kana and a total of 7,445 graphic characters, including 6,763 Chinese characters. GB2312 specifies that "any graphic character is represented in two bytes, each byte is represented by a seven-bit encoding," which is customarily referred to as "high-byte" and the second byte to "low-byte". GB2312 divides the Code table into 94 extents, corresponding to the first byte, 94 bits per zone, corresponding to the second byte, and two bytes for the area code value plus the value of the bit number (2OH), and therefore also called the location code. The 01-09 districts are the symbol, the numeral area, the 16-87 district is the Chinese character area, the 10-15 district, 88-94 area is the blank area which waits for the further standardization. GB2312 will be included in the Chinese characters into two levels: the first level is commonly used Chinese characters 3,755, placed in 16-55, in alphabetical order; second-level Chinese characters are used in 3,008, placed in 56-87, in the Order of radicals/strokes. Each Chinese character is defined by a 16x16 point, that is, each character 2x16=32 bytes. So, knowing the location code of a Chinese character, we can calculate the absolute offset position of the Chinese character lattice. The following code shows how to get the bitmap byte data of a Chinese character from a bitmap byte sequence:

Chinese character lattice data in the font file offset://Offset  =  ((region code-1)  * 94 +  bit code)  *  the number of bytes occupied by a lattice matrix//Location code is starting from 1, So don't forget to subtract 1. var offset =  (code1 -1  * 94 +  (code2-1))  * 32; [/javascript] In order to allow the above code to work, it is necessary to prepare an array containing the matrix of each byte of the arrays to JS, easy to handle. Here in Java write a few lines of code, convert the Hzk16 file, and then save as a JS-aware data file (an array variable). [Java]import java.io.*;p ublic class main {  public static void  Main (String[] args)  {    String type =  ";   "  try {      StringBuilder result = new  StringBuilder ();       result.append ("Var hzk"  + type +  "=[\n\t");       fileinputstream stream = new fileinputstream ("C:/twaver/hzk"  + type);      int c;       while  (c = streAm.read ())  != -1)  {        result.append (c +  ",");       }      stream.close ();       result.append ("\ n];");       dataoutputstream out = new dataoutputstream (new  Bufferedoutputstream (New fileoutputstream ("C:/twaver/hzk"  + type +  ". js"));       out.writebytes (Result.tostring ());       out.close ( );    } catch  (exception e)  {       E.printstacktrace ();     }  }}

Run the above Java code, you can read the c:\twaver\hzk16 bitmap file and generate a c:\twaver\hzk16.js JS file, the middle contains each byte of the array:

var hzk16=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 , 0//.... Omit 10,000 words here ...];

With the lattice data, you can continue the above code, looping through a Chinese character's lattice information. Suppose we have a location code of 4000 Kanji to display:

var code=4000;var code1=parseint (code/100), var code2= (code%),//offset= (94* (area code-1) + (bit code-1)) *32var offset= ((code1-1  ) *94+ (code2-1)) *32;var Fontsize=16;for (var row=0; row<fontsize;row++) {var rowmask1=hzk16[offset+row*2];  var rowmask2=hzk16[offset+row*2+1]; var Rowmask=rowmask1 << 8 |  RowMask2;    for (var column=0; column<fontsize; column++) {var position=fontsize-column-1;    var M=math.pow (2, position);    var flag=rowmask & M;    flag=flag>>position; This point shows or does not show, this flag is the boss.  Continue processing display ... updatenode (Nodes[row*fontsize+column], flag); }}

With the lattice information, you can then use Twaver's powerful 3d scene to display.


First use the simplest: we use a 16x16 cube matrix to display a bitmap character. Then write down the 256 cubes:

function Createnodes () {var nodes=[];    for (Var i=0;i<16;i++) {for (Var j=0;j<16;j++) {Nodes.push (CreateNode (box, I, j)); }} return nodes;}

Next, the Chinese characters are displayed on the sandbox. Through the lattice control each point, has the location of the dot, its cube to modify the picture, discoloration, highlighting, position pull high, otherwise remain in place. Continue with the Updatenode function of the above program:

function Updatenode (node, flag) {var height= flag? 20:2; var pic=flag?  ' Test.png ': ' Test2.png ';  Node.setstyle (' M.texture.image ', pic); And so on other effects change ...

To make the effect more vivid, we use the built-in animations provided by Twaver: Let the cube slowly change color and become taller. Here you can just as well be familiar with Twaver animation technology:

 Var animaterotate=new twaver. Animate ({  from: oldheight,  to: height,  //changes speed from near to far, resulting in a "wave" effect    dur:  (node.getclient (' Row ') +node.getclient (' column ')) *80,   easing:  ' Easebothstrong ',  onupdate: function  (value)  {    //animated height, animated color     node.setheight (value);     node.setpositiony (value/2-1);     var percent=parseint (255* (value-2)/(20-2));     var red= Percent.tostring (+);     if (red.length==1) {      red= ' 0 ' +red ;     }    var color= ' # ' +red+ ' AA00 ';     node.s ({       ' m.color ': color,       ' m.ambient ':  color,    });   });//Start animation animaterotate.play (); 


One more question is how to get a location code for a Chinese character? After all, display ([4034, 4098, 2093, 4233]) Such code is not more convenient than display (' Tile software '). So we should study how to get the location code of the character directly in JS.

Today's operating systems are basically Unicode in these international formats. However, Unicode and gbk/gb2312 have little correspondence with the character encoding in these native national standards. The general operating system will have the API to get the conversion, but in JS, this means that we can only prepare a corresponding table to convert.

In fact, it is not troublesome to think: We prepare a string, and the sequence of characters is arranged in the order of the Chinese characters in gb2312. Then give a kanji, and we'll see where it appears in the string. This position is the location code offset, and then you can calculate the area code and bit code.

According to this idea, found the eyes of Daniel a blog post on September 17, 2002:, which introduced this idea, and provided a text table. In the download, it is a good idea to re-create a new file and re-copy the text table to save, to avoid the file itself coding differences caused garbled or unable to transcode the situation.

According to the idea of blog post, according to the need to re-write the function of reading the location code:

 function getgbcodes (str) {  var i,c,p,q,result=[];  for (i=0;i<str.length; i++) {    if (Str.charcodeat (i) >=0x4e00) {      var p= Strgb.indexof (Str.charat (i));       if (p>=0) {         q=p%94;        p= (P-Q)/94;         var code1=0xB0+p-0xA0;        var  Code2=0xa1+q-0xa0;              var  code=code1*100+code2;        result.push (Code);       }    }else{      result.push (0);     }  }  return result;} 

Give any string, traverse each character, calculate its region code and bit code, and combine it into a 4-digit location into the array to return. Note that the simplification here, only contains the common characters in gb2312, special characters, etc. are not processed.

Finally, show a string to get a bit:

Var box = new mono. Databox (); Var nodes=initnodes (); Var codes=getgbcodes (' seg software '); Var index=0;function init ()  {        var camera = new mono. Perspectivecamera (30, 1.5, 10, 10000);   camera.setposition (50,200,500);   Var network= new mono. Network3d (Box, camera, mycanvas);   var interaction = new mono. Defaultinteraction (network);   network.setinteractions ([New mono. Selectioninteraction (Network),  interaction]);   mono. Utils.autoadjustnetworkbounds (network,document.documentelement, ' clientwidth ', ' clientheight ');   var  pointlight = new mono. Pointlight (0xffffff,1);   pointlight.setposition (100,1000,-1000);   box.add (PointLight);   var pointlight = new mono. Pointlight (0xffffff,1);   pointlight.seTposition ( -1000,-100,0);   box.add (pointlight);   box.add (New mono. Ambientlight (0x888888));   setinterval (function () {           displayword (Codes[index]);     index=index==codes.length ? 0 :  index+1;  }, 2000);}

Last look at the video effect:



In fact, the processing of Chinese characters in 3d is still more troublesome. Chinese character than characters shape complex, for the English font is also OK, but for the Chinese character library, if you want to transfer its vector information to JSON for 3d to use the data is too large, it is difficult to achieve (do a certain number of Chinese character processing is feasible). The general processing method is only to display the Chinese characters on the image. The disadvantage is that the Chinese result is a flat image with no model information and 3d effects. With the lattice font, although slightly rough, but can be used to completely model the character information and display effect, make full use of 3d of various effects. And the increase in the amount of JS data is not small (hundreds of k). This also provides a way for us to deal with Chinese characters in 3d.

If you need the relevant code and information in this article, please send an email or message. Thank you!

When the dot matrix encounters 3D

Related Article

Contact Us



Tags Index: