Preface

去年家裡買了一個玩具磁力積木, 裡面有一組撲克牌, 每張牌兩面都有一道題目, 用上面的積木組出牌面上的圖案, 相當有趣好玩, 就是個 3D 的七巧板的概念.

題目有分等級 1 到 4 顆星, 4 顆星的題目都是用上全部的積木的其實有點難. 雖然有些比較有特徵的比較可以推斷出來, 但如果沒有的話就非常燒腦筋.

對!! 我說的就是 103 號題!!!

為什麼我不寫一隻程式來解解看呢?!?!

Plotly

直覺想這個應該就是把積木映射成一組 3D 的 numpyarray 下去處理, 不過另外也想要最後的成果也希望可以視覺化呈現出來, 最好還可以互動式的, 這樣連小朋友都可以照著看翻翻面也可以拼回來就更好了.

[Numpy] 畫圖會啊, [matplot] 也算是個基本技能, 不過尤其是要 3D 然後可以互動的, 好像沒有那麼符合.

這時候想到了之前看到但一直沒機會用的 [plotly] 了, 可以畫 3D 也可以轉來轉去, 範例在網站上的 [3d-charts] 上都有, 看起來也頗漂亮也可以轉來轉去.

但是要怎麼畫積木呢?! 範例都是空間濃度分布這種而已啊?!

Bricks with 3D Isosursace

既然磁力積木都是一格一格的方塊組成的, 首先我們應該要先可以畫方塊才行吧?! 方塊內也不需要漸層或是多種顏色, 應該用 isosurface 這個來畫很適合.

def main():
    points = [(0, 0, 0), (1, 0, 0), (2, 2, 2)]
    data = []
    for x, y, z in points:
        points = np.mgrid[x:x+1:2j, y:y+1:2j, z:z+1:2j]
        values = np.ones(points[0].shape) * 0.5
        data.append(go.Isosurface(
            x=points[0].flatten(),
            y=points[1].flatten(),
            z=points[2].flatten(),
            value=values.flatten(),
            colorscale=[[0, 'red'], [1, 'red']],
            showscale=False,
            opacity=0.5))

    fig = go.Figure(data=data)
    fig.update_layout(margin=dict(l=0, r=0, b=0, t=32))
    fig.update_layout(scene_aspectmode='cube')

    app = dash.Dash()
    app.layout = html.Div([dcc.Graph(figure=fig)])
    app.run_server(host='0.0.0.0', debug=True, use_reloader=True)

Interactive Bricks View With Plotly

Preface

Plotly

Bricks with 3D Isosursace