# Japanese Multiplication [duplicate]

There's a visual method for multiplication that is taught to Japanese schoolchildren [citation needed] that uses lines and crossings to get the answer.

Image Source

Your task is to implement this in ASCII art. You will be given two numbers to multiply. The output should be the corresponding ASCII art made up of \, /, and X, padded with ASCII spaces.

The first number of the multiplication will use backslashes, starting from left to right. The second number will use forward slashes, once again from leftmost digit to rightmost. The output is made up of distinct diagonal line groupings. The number of lines within a grouping should be equal to the value of the digit. There should be at least one diagonal space between each grouping and there should be no spaces within the grouping.

Suppose 43 is the first number. Before extending lines and creating crossings, it will start like this:

       \
\
\

\
\
\
\


If the second number is 61, it will look like this before extending and crossing:

/
/
/
/
/
/

/


Conceptually "extend" the lines, using X's for intersection points, to get the result:

       \ /
\ X /
\ X X /
X X X /
\ / X X X /
\ X / X X X /
\ X X / X X X
\ X X X / X X \ /
X X X X / X \ X
/ X X X X / \ X \
/ X X X X   X \
/ X X X \ / \
/ X X \ X
/ X \ X \
/ \ X \
X \
/ \


# Example Test Cases

5 * 9

    \ /
\ X /
\ X X /
\ X X X /
\ X X X X /
X X X X X /
/ X X X X X /
/ X X X X X /
/ X X X X X /
/ X X X X X
/ X X X X \
/ X X X \
/ X X \
/ X \
/ \


16 * 27

       \ /
\ X /
\ X X
\ X X \ /
\ X X \ X /
\ X X \ X X /
X X \ X X X /
\ / X \ X X X X /
X / \ X X X X X /
/ X   X X X X X X /
/ \ / X X X X X X
X / X X X X X \
/ X / X X X X \
/ X / X X X \
/ X / X X \
/ X / X \
/ X / \
/ X
/ \


7 * 24

      \ /
\ X /
\ X X
\ X X \ /
\ X X \ X /
\ X X \ X X /
\ X X \ X X X /
X X \ X X X X
/ X \ X X X X \
/ \ X X X X \
X X X X \
/ X X X \
/ X X \
/ X \
/ \


123 * 543

       \ /
\ X /
\ X X /
X X X /
\ / X X X /
\ X / X X X
X X / X X \ /
\ / X X / X \ X /
X / X X / \ X X /
/ X / X X   X X X /
/ X / X \ / X X X
/ X / \ X / X X \ /
/ X   X X / X \ X /
/ \ / X X / \ X X /
X / X X   X X X
/ X / X \ / X X \
/ X / \ X / X \
/ X   X X / \
/ \ / X X
X / X \
/ X / \
/ X
/ \


735 * 21

                \ /
\ X /
\ X X
\ X X \ /
\ X X \ X
X X \ X \
\ / X \ X \
\ X / \ X \
\ X X   X \
X X \ / \
\ / X \ X
\ X / \ X \
\ X X   X \
\ X X \ / \
\ X X \ X
\ X X \ X \
\ X X \ X \
X X \ X \
/ X \ X \
/ \ X \
X \
/ \


# Rules

• There should be at least one (diagonal) space between each set of lines. For the purposes of this challenge, it doesn't have to line up in any sort of pretty visual way.
• Border crossings should jut out by exactly one slash.
• Any amount of padding to the left or the right is allowed as long as all the crossings line up correctly.
• Single-width ASCII spaces must be used as padding.
• You do not need to calculate the actual result of the multiplication.
• You may assume the number is in base 10 and and is at most three digits long with no zeros.
• Order matters for the purposes of the output. The first number is always in the \ direction and the second number is always in the / direction.
• Input and output may be in any convenient format.
• Standard loopholes are banned.

Happy Golfing!

## marked as duplicate by Digital Trauma code-golf StackExchange.ready(function() { if (StackExchange.options.isMobile) return; $('.dupe-hammer-message-hover:not(.hover-bound)').each(function() { var$hover = $(this).addClass('hover-bound'),$msg = $hover.siblings('.dupe-hammer-message');$hover.hover( function() { $hover.showInfoMessage('', { messageElement:$msg.clone().show(), transient: false, position: { my: 'bottom left', at: 'top center', offsetTop: -7 }, dismissable: false, relativeToBody: true }); }, function() { StackExchange.helpers.removeMessages(); } ); }); }); Mar 21 at 19:41

• Shame about the dupe; a nice, well specced challenge that's trickier than it first appears. – Shaggy Mar 21 at 21:17
• @Shaggy Agreed - its a good question, and well written. – Digital Trauma Mar 21 at 21:53
• Maybe the way to go is to merge in some of the goodies into the other challenge? – Beefster Mar 21 at 23:09

# Canvas, 41 bytes

（Ａ┬｛［１｝０｝┐）
⁷Ｌ├Ｘ⁷ｌＹø；｛³×？³ｙ³－╵ｘ＼╋
⁸⤢↔╶╶⁸ｎ


Try it here!

# JavaScript (ES6),  207 197 196  188 bytes

Takes input as an array of two strings, e.g. ["16", "27"]. Returns a matrix of characters.

a=>([[p,H],[q]]=a.map(x=>[[W=0,...x].map(x=>'1'.repeat(x,W-=~x)).join0,W]),[...Array(W+H)]).map((_,y,a)=>a.map((_,x)=>' \\/X'[(d=x-y)<H&~d<H&~(x+=y-H+2)<0&x<W*2&~x&&p[d+H>>1]|2*q[x/2]]))


Try it online!