Search code examples
javascriptarraysalgorithmfor-looppacman

Algorithm: How to print a big shape of the letter

For example, when input is "y", it will print: the output looks like this. I use a front-end languages to show the example. I just generated nesting arrays as 9*9 grids to simulate the output. Then using for loop change them to HTML syntax. In this case, no matter what language I use, the key is the algorithm. I don't think my algorithm is efficient since I must generate 26 nesting arrays for 26 letters. Are there any efficient ways to solute this problem rather than create 26 nesting arrays?

$(document).ready(function(){
    

    var letter_y=[
        [0,0,0,0,0,0,0,0,0],
        [0,1,0,0,0,0,0,1,0],
        [0,1,0,0,0,0,0,1,0],
        [0,1,0,0,0,0,0,1,0],
        [0,1,1,1,1,1,1,1,0],
        [0,0,0,0,1,0,0,0,0],
        [0,0,0,0,1,0,0,0,0],
        [0,0,0,0,1,0,0,0,0],
        [0,0,0,0,1,0,0,0,0],
        [0,0,0,0,0,0,0,0,0],
    ]




    for(var x=0;x<letter_y.length;x++){
        for(var j=0;j<letter_y[x].length;j++){
            if(letter_y[x][j]===0)
            $('.row').append('<div class="grid"></div>');
            if(letter_y[x][j]===1)
            $('.row').append('<div class="grid2"></div>');
        }     
        $('.row').append('<br>');
    }

    
});
.grid{
    background-color: black;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin:0px;
}
.row{
    line-height: 0px;
}
.grid2{
    background-color: blue;
    width: 20px;
    height: 20px;
    display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <title>fill_me_in</title>
        <meta name="description" content="fill_me_in" >
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel="stylesheet">            
        <link rel="stylesheet" type="text/css" href="style.css">
        
   </head>
   <body>
        <nav id="nav_top" class="navbar navbar-inverse navbar-static-top">
                <div class="container" id="main_container">
                        <a class="navbar-brand" href="http://api.jquery.com">Pac_man</a>
                </div>
        </nav>
        <div class="container">
                <div class="row">
                    
                    
                </div>
            </div>
        
        <div class="own"></div>





            <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
            <script src="application.js"></script> 
           
        
   </body>
</html>

Solution

  • There are two common ways to represent symbols - raster representation and vector representation. Since you already tried storing images for symbols as bit maps you can try vectors - e.g. "1" could be "line (0,0) to (0,10)".

    If your main concern is size/how bitmaps look in code you can use strings ("010000010",...) or individual bits of numbers (that way 9x9 can be represented by 9 numbers).

    Note: if you goal is to just render huge pixelated letters - there is likely matching font to do just that. Also you may need to figure out how to make such font available on the client.