{"id":13450074,"url":"https://github.com/piotte13/SIMD-Visualiser","last_synced_at":"2025-03-23T16:30:59.774Z","repository":{"id":40244368,"uuid":"155921265","full_name":"piotte13/SIMD-Visualiser","owner":"piotte13","description":"A tool to graphically visualize SIMD code","archived":false,"fork":false,"pushed_at":"2023-03-04T01:29:01.000Z","size":29792,"stargazers_count":661,"open_issues_count":28,"forks_count":41,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-10-28T17:39:03.990Z","etag":null,"topics":["compilers","intrinsics","simd","vectorized-computation","visualisation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piotte13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-02T21:03:04.000Z","updated_at":"2024-10-23T15:25:29.000Z","dependencies_parsed_at":"2024-07-31T07:12:09.738Z","dependency_job_id":"439c7e70-7e8a-443d-8508-3b66b1a53118","html_url":"https://github.com/piotte13/SIMD-Visualiser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotte13%2FSIMD-Visualiser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotte13%2FSIMD-Visualiser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotte13%2FSIMD-Visualiser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piotte13%2FSIMD-Visualiser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piotte13","download_url":"https://codeload.github.com/piotte13/SIMD-Visualiser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245130706,"owners_count":20565697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compilers","intrinsics","simd","vectorized-computation","visualisation"],"created_at":"2024-07-31T07:00:29.542Z","updated_at":"2025-03-23T16:30:58.312Z","avatar_url":"https://github.com/piotte13.png","language":"JavaScript","readme":"\n# Live Version found here (Proof of concept)\n[http://piotte13.github.io/SIMD-Visualiser](http://piotte13.github.io/SIMD-Visualiser)\n\n![](doc/SIMD-Visualizer-Demo.gif)\n( This is a Prototype version, we are still in development! Thanks for your support  :-) \n# But wait, what is SIMD?\nSIMD (pronounced \"seem-dee\") is short for **Single Instruction/Multiple Data** which is one [classification of computer architectures](https://en.wikipedia.org/wiki/Flynn%27s_taxonomy \"classification of computer architectures\"). SIMD allows one operation to be performed on multiple data points simultaneously. Data level parallelism improves the performance of many tasks, including 3D graphics and video processing, physics simulations, and cryptography.\n\n# Why would one need to visualize it?\nThe first time I saw SIMD code, I almost had a heart attack.  My brain was overwhelmed, my stress level rose, my face turned white like a sheet of paper and cold sweats started to flow all over my body.  SIMD code is not designed to be easily understood by the human brain: it's made for machines.\n\nThe thing is, we still need SIMD. It's powerful and once you understand what it does, it's quite simple. So, how do we understand what it does then?  We visualize it!  We make it look simple with animations, colors and graphics!\n\nOur goal is to experiment with different visualization methods, until we figure out the ones that are so easy to understand that even our grandmothers would think it's a kids play. For now, we think we found a solution that allows anyone with basic computer science knowledge to understand any given SIMD code, quickly and free of hearth attacks. \n\n# Basic Features\n- Graphical Visualization. 🔥🔥\n- Abstract Syntax Tree (AST) 🌳🌱\n- Write, compile and find bugs in SIMD code. 😮😍\n\n\n# How does it work?\nSo, you are wondering how we made it, right? Did we hire a magician? Let's see... 😉\n\nAt first thought, parsing C code might seem like a trivial task. But it's not, it's actually laborious, painful and brain twisting...  C is a deeply complex language, therefore it cannot be parsed using only regular expressions, we need a lot more fancy techniques and effort.  In addition to that, there is no available C code parser written in JavaScript that we could directly use in our project.  At least, we did not find any.\n\nDon't get me wrong, it's totally possible to make one, after all, any kind of compiler has to parse code before it can tweak it and do its thing.  That's where things get interesting, compilers like [Clang](https://clang.llvm.org/) already have an integrated parser, and a surprisingly good one, so why try and reinvent the wheel? Why not capitalize on what is already made and use it at our advantage? Well, that is for sure a good point... So, we tried using the compiler and it works like magic. It is fast, efficient and simple to use.\n\n Thanks to [Matt Godbolt](https://github.com/mattgodbolt/compiler-explorer) and his [Compiler Explorer](https://godbolt.org/), we were able to compile our SIMD code to assembly using any version of Clang through his free and open source REST API.  We also discovered that the Clang compiler can produce an [Abstract Syntaxic Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree) that we can later use as another visualization strategy.\n\nOkay, now that we have compiled SIMD code, what do we do? \n\n 1. Parse it.\n 2. Draw it.\n 3. Animate it.\n\nAlthough we skipped the C code parsing using Clang, we still need to parse the assembly code, or else it's useless to us.  One particularity of assembly code is that it's easy to parse. In JavaScript jargon, it's as simple as String.split(). But what about the complexity of the code, doesn't assembly add a lot of junk? Well, an interesting feature of compiled SIMD code is that it's quite simple, there is no additional complexity like we would find in assembly generated from traditional C code.\n\nHere's an example: \n\nC code (SIMD):\n``` \n#include \u003cx86intrin.h\u003e\n\n__m128i PrefixSum(__m128i curr) {\n\t__m128i Add = _mm_slli_si128(curr, 4); \n\tcurr = _mm_add_epi32(curr, Add);   \n\tAdd = _mm_slli_si128(curr, 8);    \n\treturn _mm_add_epi32(curr, Add);       \n} \n```\n\nAssembly:\n```\nPrefixSum(long long __vector(2)):\n\tvpslldq xmm1, xmm0, 4\n\tvpaddd  xmm0, xmm1, xmm0\n\tvpslldq xmm1, xmm0, 8\n\tvpaddd  xmm0, xmm0, xmm1\n\tret\n```\n\nLet me explain. The first column of every row represents the name of the command and the subsequent columns represent the arguments or parameters.  **xmm**, **ymm** and **zmm** arguments are registry addresses.  Essentially, registries are like the variables you would find in C, except there is a finite amount of them and there is no concepts such as scope and lifetime. The first letter (X, Y, Z) represents the size, which would be (128, 256, 512) bits and there is only 32 addresses of registries. Those characteristics makes registries easier to work with, compared to C variables, since a lot of complexity is therefore removed or taken care of by the compiler.  To learn more about AVX registry and it's commands, read [this](https://en.wikipedia.org/wiki/Advanced_Vector_Extensions#New_instructions). \n\nNow that we have parsed every command and their parameters, we can finally start drawing and animating them!  To do so, we used [React](https://reactjs.org/) as a JavaScript user interface library and [Anime.js](http://animejs.com/) for the animations.\n\n\n# Development/Contributing\nSIMD-Visualizer is a research project and for now, we are a small team! We actively encourage and support contributions. The SIMD-Visualizer source code is released under the BSD License. This license is very simple, and is friendly to all kinds of projects, whether open source or not. \n\nFeel free to fork and improve/enhance SIMD-Visualizer any way you want. If you feel that the application or the research team will benefit from your changes, please open a pull request.\n\n## Available Scripts\n\nIn the project directory, you can run:\n### `npm start`\n\nRuns the app in the development mode.\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\n### `npm run deploy`\n\nDeploys application to github-pages.  It will build, then push the code to gh-pages branch.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\nSee the section about [running tests](#running-tests) for more information.\n\n# Credits\n\nThis project is made possible by [Pierre Marie Ntang](https://github.com/pmntang).  It is part of his PhD thesis in congnitive computing at [Université du Québec (TELUQ)](https://www.teluq.ca/site/en/).  Many ideas came from his brilliant mind.\n\nThanks to [Daniel Lemire](https://github.com/lemire) for his many ideas and his deep knowledge and expertise in SIMD software.  He is well known in the open source world as well as the big data community. His work is used by companies such as eBay, Facebook, LinkedIn and Netflix in their data warehouses. Git also uses his techniques to accelerate queries.\n\nBig thanks to [Matt Godbolt](https://github.com/mattgodbolt/compiler-explorer) for his free and open source REST API of the [Compiler Explorer](https://godbolt.org/), which allows us to use Clang and many other compilers from the browser.\n\n\n# License\nThe [BSD 3-clause](https://tldrlegal.com/license/bsd-3-clause-license-(revised)) license allows you almost unlimited freedom with the software so long as you include the BSD copyright and license notice in it (found in Fulltext).\n","funding_links":[],"categories":["SIMD","C++","Cool"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiotte13%2FSIMD-Visualiser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiotte13%2FSIMD-Visualiser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiotte13%2FSIMD-Visualiser/lists"}