歡迎光臨
每天分享高質量文章

JSCity:把原始碼視覺化成建築物的 JS 庫

作者:伯樂線上 – aoi

網址:http://top.jobbole.com/22960/

點選“閱讀原文”可檢視本文網頁版

簡介

巴西米納斯聯邦大學的一個軟體工程應用研究小組仿造 Code City(簡介看這個帖子),用 three.js 3D 庫做了 JSCity,也是用於原始碼視覺化。

示例截圖

來,先上一個“小城市” socket.io 的圖:

JSCity 把:

  • JS 程式轉成城市;
  • 檔案夾轉成區域;
  • 檔案轉成子區域;
  • 函式轉成建築物;
  • 內部函式也轉成了建築物,不過是放在它們巢狀的函式/建築物之上

其他

  • 函式原始碼行數表示建築物的高度;
  • 函式中變數數量轉成建築物地基;
  • 藍色建築是有名字的函式;
  • 綠色建築是匿名函式;

主頁:https://github.com/aserg-ufmg/JSCity/wiki/JSCITY

示例

小提示:

  • 滑鼠左鍵轉變視角;
  • 滑鼠中鍵可放大/縮小;
  • 滑鼠右鍵拖動

小城市(幾秒鐘就載入完了)

中型和大型城市(載入有點費時哦)

未經許可,禁止Copy!

贊(0)

分享創造快樂