Elice Internal Code Competition - Shortcoding (ESCC) Edition

Suin Kim

11/21/2021

https://cdn-api.elice.io/api-attachment/attachment/9bb95be2c52c4bf6bd0de830cc432faf/image.png

The Elice Development Team organizes monthly development team activities. The November 2021 activity was the Elice Shortest Code Competition (ESCC). The goal of the competition, which is like a coding test for Elice, is to achieve shortcoding that outputs the Elice favicon as an ASCII string, where the favicon looks like this. Shortcoding is a game where you try to solve a problem in as little code as possible.



Originally, the program was to be held only within the development team, but we changed the rules to allow all Elysers to participate, and the submitted code was judged and evaluated by CPO Kim Soo-in and CTO Park Jung-kook.

Coding Test Rules

The following rules were applied to this coding test.

  • Languages: Any language supported in the Elice multilingual labs.
    • C, C++, C#, F#, Go, Java, JS, Kotlin, Lua, PHP, Python, Ruby, Rust, Scala, Swift, etc.
  • Input: None
  • Output: Elice logo
  • Output method: Output an ASCII string to STDOUT
  • How to submit: Complete and submit in a test subject within the Elice platform

The printed logo will be reviewed by a panel of judges to ensure that it is recognizable as the Elice logo, and the submitted code will be checked by the Elice Platform’s anti-cheating system to ensure that it does not reference or copy other code.


Example of shortcoding code.

The following example was written by two judges.

JavaScript (161 characters)

The following example is written in JavaScript by one judge.

shortcoding code

E=L=>process.stdout.write(L);I=[...Array(20).keys()],I.map(C=>{I.map(R=>C*C-18*C+162+R*R-18*R<99?E((R+C==16||C+R==20)&&C>=5&&C<=13?\" \":\"##\"):E(\" \")),E(\"\\\
\")});

coding logo results

$ node javascript/main.js
          ##################
        ######################
    ##############################
    ##############################
  ##################################
###################### ###### ######
#################### ###### ########
################## ###### ##########
################ ###### ############
############## ###### ##############
############ ###### ################
########## ###### ##################
######## ###### ####################
###### ###### ######################
  ##################################
    ##############################
    ##############################
        ######################
          ##################

Code Commentary

The circle is rendered with 20 x 20 pixels, and the code in the middle R=>C*C-18*C+162+R*R-18*R<99 is a check of the formula (C9)2+(R9)2<100(C-9)^2 + (R-9)^2 < 100 for coordinates (C, R) (the number 100 was replaced by 99 to reduce the number of letters by one) to determine if those coordinates are inside a circle of radius sqrt99\\sqrt{99} centered at (9, 9).
We also wrote // as a variation of the value of cc in the first-order function form of x+y=cx+y = c.

While writing the commentary, I realized that the code C*C-18*C+162+R*R-18*R<99 could be replaced with 18*C-C*C-R*R+18*R>63 to save 4 more characters 🦝.


Python (109 characters)

This is a Python-based example code written by Park Jung-kook.

code

x=[' '*(6-i//2)+'#'*i for i in[5,7,9]];print('\\\
'.join(x+['#'*(5-i)+' ##'*2+'#'*i for i in[1,2,3]]+x[::-1]))

coding logo results

$ python python3/main.py
    #####
   #######
  #########
#### ## ###
### ## ####
## ## #####
  #########
   #######
    #####

Code Commentary

Execute the first line to assign the following list to the variable x.

[' #####', ' #######', ' #########']

Then, over three lines,

  • four #, space, two #, space, three #
  • Three #s, a space, two #s, a space, four #s
  • two #s, a space, two #s, a space, five #s
    .

Finally, output the first x, the list in the middle, and a string with the xs listed backwards.


Evaluation and Awards.

The Elysians were given one week to submit their code, and the participants presented and explained their code. The coding test participants shared a catered lunch and appreciated other people’s novel ideas.


Effort is virtual (149 characters)

An award for a non-development team member whose programming skills are likely to be relatively low compared to those of the development team.

Winner: Kyungmin Kim (Tech Content team)

Shortcoding Code

p=print;r=range;s=\"#\";b=\" \"
m=[b*i+s*(20-2*i)for i in r(1,4)]
p('\\\
'.join(m[::-1]))
for i in r(8):
\tp(s*(11-i)+\" ## \"+s*(i+3))
p('\\\
'.join(m))


coding logo results

$ python3 -u python3/main.py
   ##############
  ################
 ##################
########### ## ###
########## ## ####
######### ## #####
######## ## ######
####### ## #######
###### ## ########
##### ## #########
#### ## ##########
 ##################
  ################
   ##############


Evaluating Shortcoding Code

This program is written in Python and uses short links to print and range to shorten the length of the code. Due to the nature of the Python language, multiple strings can be printed as short code, for example, ### can be printed with a syntax like '#' * 3, and we utilized this feature well.

I modeled the whitespace linearly to draw the circle, but that wasn’t a problem with a length of about 20 characters.


Art Award (250 characters)

The circle was chosen for the Artistic Award because it was more beautiful than the other entries.

Winner: Yoo Sung Lee (Frontend Team)

Shortcode

#include<iostream>
#include<iomanip>
#include<cmath>
using namespace std;
int main(){for(int i=0;i<11;i++){if(i<3||i>7){cout<<setw(abs(i-5)*-2+24)<<string(abs(i-5)*-4+29,'@');}else{cout<<string(11-i,'@')<<\"..@@@..\"<<string(i+1,'@');}cout<<'\\\
';}}


coding logo results

$ g++ -o main -O2 -Wall cpp/main.cpp
$ stdbuf -i0 -o0 -e0 ./main
     @@@@@@@@@
   @@@@@@@@@@@@@
 @@@@@@@@@@@@@@@@@
@@@@@@@@..@@@..@@@@
@@@@@@@..@@@..@@@@@
@@@@@@..@@@..@@@@@@
@@@@@..@@@..@@@@@@@
@@@@..@@@..@@@@@@@@
 @@@@@@@@@@@@@@@@@
   @@@@@@@@@@@@@
     @@@@@@@@@

Evaluating Shortcoding Code

As with the other entries in the coding test, the modeling of the circle was linear, but by offsetting the model appropriately, the number of spaces in lines 1-2-3 was offset by 2 and the number of spaces in lines 3-4 was offset by 1, resulting in a more circle-like output. Additionally, the choice of output characters @ and . made the logo look softer.


Winner (92 characters)

This is the code that stood out the most compared to other entries in the coding test, both in terms of technical aspects and the shortness of the code.

Winner: Minseok Cho (Backend Team)

Shortcoding code

[print(('§'*n).center(9))for n in[5,9,9,9,9,5]]
[print(f'\\\\x1b[{8-x};{x}H § ')for x in[5,4,3]]


coding logo results

$ python3 -u python3/main.py
  §§§§§
§§§§ § §§
§§§ § §§§
§§ § §§§§
  §§§§§

Evaluating and commenting on shortcoding code

In order to keep the length of the code extremely short, the size of the logo was limited to 5x9 characters, based on a vertical x horizontal dimension. This is because if the width were more than 10 characters long, it would add an extra byte when compared to 9 to enter a value of 10 in the parameter that goes into the method we used in this code.

The first line creates a list called [5, 9, 9, 9, 5] and iterates over the elements in this list, performing the command ('§'*n).center(9) for each element and printing it out.

The center method is a built-in method for Python strings that takes a value of width, creates a width-length string, and centers it on the string that called the method. For example,

>>> '###'.center(7)
' ### '

This allows us to generate strings of length [5,9,9,9,9,5] for `#` and center each string on a space of length 9. Here's the result after we've gone this far
  §§§§§
§§§§§§§§§
§§§§§§§§§
§§§§§§§§§
  §§§§§

The next fun trick used in this code is the ANSI escape sequence, which takes advantage of the fact that Elasticsearch's execution environment advances the shell. In general, this escape sequence is [often used to define the style of colors or text in the shell](https://tforgione.fr/posts/ansi-escape-codes/#the-special-character). By using [a specific escape sequence](https://tldp.org/HOWTO/Bash-Prompt-HOWTO/x361.html), you can move the cursor to any location. In this code, we've used it to position the cursor on a specific line and column, as shown below.
- Position the Cursor:
  \\\\033[<L>;<C>H
     Or
  \\\\033[<L>;<C>f
  puts the cursor at line L and column C.


As you run the program, the commands are printed to bash, so you can set the cursor to,
  • (3, 5)
  • (4, 4)
  • (5, 3)
    sequentially and printing the string § will overwrite the circles already printed, allowing us to print // from the Elice logo. So, the result after executing the second line is that the
  §§§§§
§§§§ § §§
§§§ § §§§
§§ § §§§§
  §§§§§

to create the Elice logo.


https://cdn-api.elice.io/api-attachment/attachment/365f6cc9eb4740fda4822b04eb47369d/image.png\” alt="Coded logo created via shortcoding"



Notable (373 characters)

This code was written by Park Chung-kook and aims to shorten the length of the code while maintaining the perfect output of the given Elice logo.


shortcoding code

import pip;pip.main(['install','base65536','climage']);
import site;site.main();
import climage as c,base65536 as b;
open('.png','wb').write(b.decode('薉籎㸍㸚㐀䄀絉蝄㐀匀㐀匀㨈㐀瀀𣐰㒢㐀𓄁籒㑂𥒮𦼜㐀㠀癧癍㐀𡖱𨈋㥡㐀㴀絰𓅙㐀𠰝㐀𠰝鈁䞢㒁㔀縟癄絔𣭋𦆖𤠊䀰𦆆𠄊𤜾𡽋氏𤜄𦳃𖢓𥧥礌緝𣄥𡱍𧛴䳝𥎝𨋗杶𨓻㡢𣳬褝𐙱㟷杔𧝘𡊚𣡂蜉徜𒇅𧸛𡴓霐𣼨𥶃蕪憃𢯄𧮧𨃄𤫾𢪵𣚞懿抮暍挟䲍䨟𡒼燺𠗄𓍏𣺸磛肋溍𢍷靸𦁮𖧓𡬏續𡂮䟚𦅎倴𦪨奉肉抐𢒖䓦𧺑𣨺𡭐奃𥲶驂淌𢚾飊䏵簄𧨹𓅏召揰𦰽𦕋𠓪慣𤟍𥄹𣾋𡵻𤲻𥷡岉𢣦𤫔𡿬𥫅𢷮覆𧑓㤚懶𠌞𔑒㖮䮋𢵑𐛾𤠒𣃞𢍓ꍊ𣂠𣶏褓𦪊嫄𦵢𣙺𦵑𥷈𡣖𠵑𢥈𐚗慖𠫆𥚛頧㯌䞿𢂏𢵰爘㐀㐀穉祎瞮𠡠'));
print(c.convert('.png'))

coding logo results

You can see that the terminal outputs an image of one pixel per letter, as shown below.
Elice Coding Test Loading Logo Results

Shortcoding Code Commentary

What the very first line does is install base65536 and climage, packages that are not provided in the default environment. The base65536 is an encoding scheme for representing binary data in UTF-32 encoded text, optimized for use in Unicode. Also, climage allows you to print images to the terminal from the CLI environment.

What this code is doing is base65536 encoding an image of the Elice logo downscaled to the point where it can be represented on a terminal, saving it to a png file and printing it out using the climage library. This is a great solution to hack this rule, as the competition counts the number of characters, not the number of bytes.


Finishing…

This coding test was inspired by IOCCC (The International Obfuscated C Code Contest – the most obfuscated C code writing contest), and I was pleasantly surprised to see that the creativity of the Elysers was far beyond what I had expected. Optimizations that went beyond simply calculating circles and lines to moving the cursor or using base65536 to reduce the number of characters in the code made me feel happy to be working with colleagues who can think like this as developers.

Elice Coding Test Code Winner

The winning entry was printed on an Elice in-house poster created by the small brand team :).


More Elice content
👉How to measure and improve Flutter app performance


*This content is a work protected by copyright law and is copyrighted by Elice.
*The content is prohibited from secondary processing and commercial use without prior consent.

  • #elice
  • #competition

Bring innovative DX solutions to your organization

Sign up for a free trial and a business developer will provide you with a personalized DX solution consultation tailored to your business