Skip to content

Commit

Permalink
fix(docusaurus): rollback to fix for now
Browse files Browse the repository at this point in the history
  • Loading branch information
@LiyangW
LiyangW committed May 30, 2024
1 parent f9cd697 commit 68bb0be
Show file tree
Hide file tree
Showing 3 changed files with 1,936 additions and 2,539 deletions.
141 changes: 78 additions & 63 deletions docs/labs/misc/manim.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,41 @@ Manim can be difficult to install so this tutorial will teach you how to run it

<ol>
<li><p>The first thing you're going to need is Docker. If you don't already have docker, you can download it <a href="https://docs.docker.com/get-docker/">here</a>.</p></li>
<li>
<p>Pull the docker image for manim:</p>
<pre><code>
<li><p>Pull the docker image for manim:</p>

```bash
docker pull manimcommunity/manim
</code></pre>
<p>For more information, check out <a href="https://hub.docker.com/r/manimcommunity/manim">mainimcommunity/manim</a></p>
```

<p>For more information, check out <a href="https://hub.docker.com/r/manimcommunity/manim">mainimcommunity/manim</a></p>

</li>
<li><p>There are several ways to interact with Manim. We're going to work with Jupyter Lab. For different methods check out <a href="https://hub.docker.com/r/manimcommunity/manim">this link</a>.</p></li>
<li>
<p>First, make sure nothing is running on port 8888, then open a terminal window and run the following command to start up the manim docker container:</p>
<pre><code>
<li><p>First, make sure nothing is running on port 8888, then open a terminal window and run the following command to start up the manim docker container:</p>

```bash
docker run -it -p 8888:8888 manimcommunity/manim jupyter lab --ip=0.0.0.0
</code></pre>
```

</li>
<li>
<p>You should see the following output:</p>
<pre><code>
file:///manim/.local/share/jupyter/runtime/jpserver-1-open.html
<li><p>You should see the following output:</p>

```
file:///manim/.local/share/jupyter/runtime/jpserver-1-open.html
Or copy and paste one of these URLs:
http://1a7fb2e74b32:8888/lab?token=542f72b2a4f0f8eb58089e3ab795f43c1ad3730b0500af58
http://1a7fb2e74b32:8888/lab?token=542f72b2a4f0f8eb58089e3ab795f43c1ad3730b0500af58
or http://127.0.0.1:8888/lab?token=542f72b2a4f0f8eb58089e3ab795f43c1ad3730b0500af58
```

or http://127.0.0.1:8888/lab?token=542f72b2a4f0f8eb58089e3ab795f43c1ad3730b0500af58
</code></pre>
<p>Cut and Paste one of the above links in your browser. You should see the following:</p>

<p>Cut and Paste one of the above links in your browser. You should see the following:</p>
<img width="70%" src={require('@site/static/img/labs/misc/manim_browser.png').default} />
<img width="70%" src={require('@site/static/img/labs/misc/manim_browser.png').default} />

</li>
<li><p>Congratulations! You're now ready to use manim!</p></li>
<li>Congratulations! You're now ready to use manim!</li>
</ol>

## Example
Expand All @@ -51,81 +55,92 @@ Let's start with a simple example:

<ol>
<li><p>Open a new JupyterLab notebook and import all the contents of the manim library in a cell:</p>
<pre><code>

```python
from manim import *

# To download image used in this example:

!wget https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/assets/logos/SN_favicon.png
</code></pre>

```
</li>
<li>
<p>Objects in manim are generally divided into three categories:</p>

<li><p>Objects in manim are generally divided into three categories:</p>
<ul>
<li><p>Scene</p></li>
<li><p>Mobject</p></li>
<li><p>Animation</p></li>
</ul>
<p>To create a scene, we create a <code>Scene</code> object as follows:</p>
<pre><code>

<p>To create a scene, we create a <code>Scene</code> object as follows:</p>

```python
class SN(Scene):

def construct(self):
sn_logo = ImageMobject("SN_favicon.png")
text1 = Text("Skills" ).shift(DOWN).shift(DOWN).shift(DOWN)
text2 = Text("Skills Network", t2c={'[0:6]': PURPLE}).shift(DOWN).shift(DOWN).shift(DOWN)
def construct(self):
sn_logo = ImageMobject("SN_favicon.png")
text1 = Text("Skills" ).shift(DOWN).shift(DOWN).shift(DOWN)
text2 = Text("Skills Network", t2c={'[0:6]': PURPLE}).shift(DOWN).shift(DOWN).shift(DOWN)

self.add(sn_logo)
self.play(Write(text1))
self.play(ReplacementTransform(text1, text2))
self.wait(2)
</code></pre>
self.add(sn_logo)
self.play(Write(text1))
self.play(ReplacementTransform(text1, text2))
self.wait(2)
```

</li>
<li>
<p>To run the scene, execute the following in the next code cell:</p>
<pre><code>
<li><p>To run the scene, execute the following in the next code cell:</p>

```python
%manim SN
</code></pre>
<p>More generally, <code>%manim [name of class]</code> - where <code>[name of class]</code> is the name of the scene class you defined.</p>
```

<p>More generally, <code>%manim [name of class]</code> - where <code>[name of class]</code> is the name of the scene class you defined.</p>

</li>
<li>
<p>You should see a scene resembling the following:</p>
<img width="70%" src={require('@site/static/img/labs/misc/manim_scene.png').default} />
<p>For more information, check out the <a href="https://docs.manim.community/en/stable/">Manim docs</a>.</p>
<li><p>You should see a scene resembling the following:</p>

<img width="70%" src={require('@site/static/img/labs/misc/manim_scene.png').default} />

<p>For more information, check out the <a href="https://docs.manim.community/en/stable/">Manim docs</a>.</p>

</li>
</ol>

### Saving your work

**If you shut down your Docker Container you will lose your work.**
__If you shut down your Docker Container you will lose your work.__
So you're going to need to download the video and JupyterLab. The lab is straightforward; let's see how to download the video:

<ol>
<li><p>Go to the directory <code>./media/Jupyter/</code></p></li>
<li>
<p>Download the video, which is the name of the class followed by an <code>@</code> and the date:</p>
<p>For example, <code>SN@[email protected] more generally [name of class]@[date].mp4</code> as seen in the image below:</p>
<img width="30%" src={require('@site/static/img/labs/misc/manim_download_video.png').default} />
<li><p>Go to the directory <code>./media/Jupiter/</code></p></li>
<li><p>Download the video, which is the name of the class followed by an <code>@</code> and the date:</p>

<p>For example, <code>SN@[email protected] more generally [name of class]@[date].mp4</code> as seen in the image below:</p>

<img width="30%" src={require('@site/static/img/labs/misc/manim_download_video.png').default} />

</li>
<li>
<p>Finally, when you close your application you must make sure the container is closed, open a terminal window and type:</p>
<pre><code>
<li><p>Finally, when you close your application you must make sure the container is closed, open a terminal window and type:</p>

```bash
docker ps
</code></pre>
<p>You should see a list of your running containers, for example:</p>
<pre><code>
```

<p>You should see a list of your running containers, for example:</p>

```
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1a7fb2e74b32 manimcommunity/manim "jupyter lab --ip=0.…" 3 days ago Up 3 days 0.0.0.0:8888->8888/tcp peaceful_kowalevski
</code></pre>
1a7fb2e74b32 manimcommunity/manim "jupyter lab --ip=0.…" 3 days ago Up 3 days 0.0.0.0:8888->8888/tcp peaceful_kowalevski
```

</li>
<li>
<p>Stop the container by typing <code>docker stop [name of container]</code> for this case it would be:</p>
<pre><code>
<li><p>stop the container by typing <code>docker stop [name of container]</code> for this case it would be </p>

```bash
docker stop peaceful_kowalevski
</code></pre>
```

</li>

</ol>
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "^3.0",
"@docusaurus/preset-classic": "^3.0",
"@mdx-js/react": "^2.0",
"@docusaurus/core": "^2.0",
"@docusaurus/preset-classic": "^2.0",
"@mdx-js/react": "^1.6",
"clsx": "^1.1.1",
"prism-react-renderer": "^1.3",
"react": "^18",
Expand Down
Loading

0 comments on commit 68bb0be

Please sign in to comment.