Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 46 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,68 @@ VSCode extension for replicating Grant Sanderson's `manim` workflow for Sublime

## Example usage

After installing:
1. [Install manimgl](https://3b1b.github.io/manim/getting_started/installation.html), make sure that the command `manimgl` works in your terminal
2. Open your manim file (e.g. `scene.py`) in VSCode
3. Place your cursor where you want to start the scene, on a line of code within the `construct` method in a scene class
4. Run the VSCode command: `cmd+shift+p` -> `Manim Notebook: Start scene at cursor`
(This command runs `manimgl scene.py NAME_OF_SCENE -se <lineNumber>` in your terminal)
In the upper-right of your screen - the manim interactive video will appear.

1. Open your manim `scene.py` in VSCode (replace `scene.py` with your manim file)
2. In the attached terminal, run `manimgl scene.py NAME_OF_SCENE -se 155` (replace 155 with line number to start debugging). In the upper-right of your screen the manim interactive video should pop up
3. Highlight the "section" you want to run (In manim, a section is a comment (`id`) followed by a block of code )
4. Type `cmd+shift+p` "Checkpoint paste from manim-notebook" ( or default binding `cmd+' cmd+r` ). This will copy the selected code to the clipboard and send the `checkpoint_paste()` command from manim into the interactive window.
<br />

The resulting workflow looks like Grant's 🥳
Then you can do either:

[(see demo on youtube)](https://www.youtube.com/watch?v=VaNHlFh0r5E)
- Write some comments which start with: `##`.
The clickable "Preview Manim Cell" buttons will appear above each such comment.
Clicking on one will run it.
It is equivalent to: `cmd+shift+p` -> `Manim Notebook: Preview active Manim Cell`

<iframe width="560" height="315" src="https://www.youtube.com/embed/VaNHlFh0r5E?si=ClVdBSI1k_-mzKFr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
- Place your cursor on some line (or highlight several lines),
`cmd+shift+p` -> `Manim Notebook: Preview selected Manim code`
This will run the selected lines.


**Default keyboard bindings**:
- `cmd+' cmd+r` :: Run the `checkpoint_paste()` command from 3b1b's manim library on the highlighted code lines (`manim-notebook.previewSelection`)
- `cmd+' cmd+e` :: Execute all lines of the active manim cell interactively (`manim-notebook.previewManimCell`)
<br /><br />

## Local Development
## Keybord shortcuts

Prerequisite: install `vsce` (`npm i -g vsce`)
You can use the default keyboard shortcuts for these commands, or assign your own.

**Install locally**
- the default shortcuts all start with `cmd+'`
- use `cmd` or `ctrl` depending on your OS

After making changes:
All current commands are:

1. Bump the version in `package.json`
2. `vsce package` (select `y`; a `.vsix` file will be created)
3. `cmd+shift+p` > "Extensions: Install from VSIX" > select the `.vsix` file
4. reload window
- `Manim Notebook: Start scene at cursor`.
Shortcut: `cmd+' cmd+s`
- `Manim Notebook: Preview active Manim Cell`.
Shortcut: `cmd+' cmd+e`
- `Manim Notebook: Preview selected Manim code`.
Shortcut: `cmd+' cmd+r`
- `Manim Notebook: Remove all objects from scene`.
Shortcut: `cmd+' cmd+c`
- `Manim Notebook: Quit preview`.
Shortcut: `cmd+' cmd+w`

<br />

---

[Alternative](https://code.visualstudio.com/api/get-started/your-first-extension):
<br /><br />

- open `src/extension.ts`
- to run the extension in a new window: `F5`
(or: `cmd+shift+d` -> `Run Extension`)
(or: `cmd+shift+p` -> `Debug: Start Debugging`)
- after extension code changes: in that opened window: `cmd+shift+p` -> `Reload Window`
## Demonstration

<br />
The resulting workflow can look like Grant's 🥳

[(see demo on youtube)](https://www.youtube.com/watch?v=VaNHlFh0r5E)

<iframe width="560" height="315" src="https://www.youtube.com/embed/VaNHlFh0r5E?si=ClVdBSI1k_-mzKFr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


<br /><br />

## Links

---
- [GitHub](https://github.com/bhoov/manim-notebook)

To publish, bump the version in `package.json` and
- [contributing](https://github.com/bhoov/manim-notebook/blob/main/CONTRIBUTING.md)

`vsce publish`
- [wiki](https://github.com/bhoov/manim-notebook/wiki)