Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<style>
    body {
        overflow-x: hidden;
    }
    #navbar {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 20%;
        height: 100%;
        padding: 10px 20px 10px 20px;
        overflow-y: scroll;
        display: flex;
        flex-direction: column;
        flex-grow: inherit;
    }
    #navbar ul {
        margin-left: -30px;
        list-style-type: none;
    }
    #navbar ul li {
        display: block;
    }
    #navbar ul li a {
        display: block;
        text-decoration: none;
        padding: 15px 0px;
        border-bottom: 1px solid green;
    }
    #main-doc h2 {
        font-size: 100%;
        font-weight: 70%;
    }
    #main-doc {
        padding left: 20px;
        float: right;
        width: 73%;
        padding-top: 10px;
        margin-right:10px;
        font-size: 105%;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 150%;
    }
    #main-doc header {
        font-size: 150%;
        font-weight: 180%;
        border-bottom: 1px black solid;
    }
    code{
        display: block;
        background-color: #e6f7ff;
        width: 100%;
        padding: 4px;
        margin-right: 5px;
        border: 0.5px dashed #0099e6;
        border-radius: 1px;
    }
    @media (max-width : 800px){
        #navbar {
            position: absolute;
            top:0;
            margin:0;
            padding:0;
            width:100%;
            max-height: 270px;
        }
        #main-doc {
            position: relative;
            margin-left: 0;
            margin-top: 270px;
            float: none;
            width:100%;
        }
    }
</style>

<nav id="navbar">
    <header>Basilisk Tutorial</header>
    <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li><a class="nav-link" href="#Getting_Started">Getting Started</a></li>
    <li><a class="nav-link" href="#The_Simulation">The Simulation</a></li>
    <li><a class="nav-link" href="#Minimal_Program">Minimal Program</a></li>
    <li><a class="nav-link" href="#More_Programs">More Programs</a></li>
    </ul>
</nav>
<main id="main-doc">
    <section class="main-section" id="Introduction">
        <header>
            <h2>Introduction</h2>   
        </header>
        <p>This tutorial is a step by step description on how to setup, compile and run your first Basilisk simulation.</p>
        <p>What you need:</p>
        <ul>
            <li>You need to have at least a minimal understanding of shell commands. If you don’t know what I am talking about, you may want to start with one of the many online tutorials on this subject, such as Learning the shell.</li>
            <li>You will also need a good text editor to write (C) programs in Basilisk. If you do not have a favourite one already, I recommend using emacs. You can install it easily on Debian-like systems by copying and pasting the following command in your shell:</li>
        </ul>
        <code>sudo apt-get install emacs</code>
        <ul>
            <li>
                Because Basilisk programs are written in a variant of the C language, any prior knowledge of C programming you may have will be very useful. If you have never seen a C program, you may want to read up on the topic, for example:
                <ul>
                    <li>C Language Tutorial</li>
                    <li>The C programming language</li>
                </ul>
            </li>
            <li>You then need to follow the installation instructions to setup basilisk on your system.</li>
            <li>If you are using a Mac please see special installation instructions for make and gdb.</li>
        </ul>
    </section>
    <section class="main-section" id="Getting_Started">
        <header>
            <h2>Getting Started</h2>
        </header>
        <p>
            You first need to open both a terminal and a text editor. On my system (Debian), the terminal is hidden in the “Activities -> Applications -> Accessories -> Terminal” menu. You can then start the text editor in the background by typing:
        </p>
        <code>emacs &</code>
        <p>To check that Basilisk is installed properly, do:</p>
        <p>which returns on my system</p>
        <code>
            gcc (Debian 4.7.2-5) 4.7.2<br>
Copyright (C) 2012 Free Software Foundation, Inc.<br>
This is free software; see the source for copying conditions.  There is NO<br>
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
        </code>
        <p>If instead you get an error message, you need to go back to the installation instructions and check that you did everything correctly.</p>
    </section>
    <section class="main-section" id="The_Simulation">
        <header>
            <h2>The Simulation</h2>
        </header>
        <p>The model problem we will study is a numerical approximation of the solution of the Saint-Venant equations in a square box with reflecting boundaries</p>
        <p>To create the Basilisk program, use the “File -> Visit New File” menu in emacs and type <i>bump.c</i> in the Name field. Then type the following line …</p>
        <code>#include "saint-venant.h"</code>
        <p>… and save the file using the “File -> Save” menu (or the Control-X Control-S keyboard shortcut). This C preprocessor command, includes the saint-venant.h file into our program. This file defines all the variables and functions which are required to run the Saint-Venant solver of Basilisk. If you follow the link above, you will see that the corresponding code is documented. Now is a good time to read the first two sections (up to Time integration) to remind yourself of what the equations, variables and parameters are…</p>
    </section>
    <section class="main-section" id="Minimal_Program">
        <header>
            <h2>Minimal Program</h2>
        </header>
        <p>We can now try to compile our program using (in the shell)</p>
        <code>qcc bump.c</code>
        <p>which produces something like</p>
        <code>(.text+0x20): undefined reference to `main'<br>
            /tmp/ccueSq1Z.o: In function `normf':<br>
            bump.c:(.text+0x262d2): undefined reference to `sqrt'<br>
            ...</code>
        <p>The compiler (or more precisely the linker), complains that some functions are used but not defined. The sqrt function for example is defined in the standard math library which needs to be linked with the program. The main function however needs to be defined by us. Note that all this is not specific to Basilisk, it is just standard C.</p>
        <p>To fix this problem, we need to add</p>
        <code>#include "saint-venant.h"<br><br>

            int main() {<br>
              run();<br>
            }</code>
        <p>to <i>bump.c</i> (using the text editor). If you have some notions of C (i.e. you have done the homework given above…), you will recognise the definition of a C function called <i>main</i> which takes no parameters and just calls the function run. The <i>run()</i> function is defined by the Saint-Venant solver (i.e. is included in saint-venant.h).</p>
        <p>We can now save the file and recompile using (in the shell)</p>

        <code>qcc bump.c -lm</code>
        <p>If we now type ls in the shell, we will see that this produced a file called a.out which is the compiled program, which we can launch using</p>
        <code>./a.out</code>
        <p> which gives</p>

        <code># Quadtree, 0 steps, 0 CPU, 0.001075 real, 0 points.step/s, 5 var</code>
        <p>Amazing! we have done our first Basilisk simulation!</p>
        
        <p>If you have compiled C programs before, you will see that all we have done here is very standard C, very little is specific to Basilisk. For example the -lm option is the standard way to link the math library (which defines the sqrt function i.e. square-root and other math functions). More generally, because the qcc command calls the C compiler in the background, you can use all the options supported by the C compiler. For example, if you are using GCC, it is a good idea to use
        </p>
        <code>qcc -O2 -Wall bump.c -o bump -lm</code>
        <p>where -O2 turns optimisation on (which makes the code faster), -Wall turns all compilation warnings on (which allows you to catch potential bugs in your program) and -o bump renames the compiled program to bump (rather than a.out).  
        </p>

    </section>
    <section class="main-section" id="More_Programs">
        <header>
            <h2>More Programs</h2>
        </header>
        <p>Of course our program does not do much yet. So why did we start with such a simple program? Because it is always a good idea to start simple and add complexity step-by-step. If a problem occurs in a single line of code, which you have just added, it is trivial to correct it. If this same line is buried within ten other (correct) lines, finding the problem can take (much) longer. This rule is true whether you are an experienced programmer or a beginner.
        </p>
        <p>To make the program more interesting, it needs to produce some outputs at specified times. To do so, we can use events; like this for example:
        </p>
        <code>#include "saint-venant.h"<br><br>

        event end (i = 10) {<br>
        printf ("i = %d t = %g\n", i, t);<br>
        }<br><br>

        int main() {<br>
        run();<br>
        }
        </code>
        <p>What we have done here is told the solver to do 10 timesteps and then print the number of timesteps and the physical time it reached after 10 timesteps. If we now recompile using
        </p>
        <code> -O2 -Wall bump.c -o bump -lm</code>
        <p>(note that you do not need to retype this command, you can just use the up and down keyboard arrows to go through the history of previous commands), and run using
        </p>
        <code>./bump</code>
        <p>we get something like</p>

        <code>i = 10 t = 1e+11<br>
        # Quadtree, 10 steps, 0.04 CPU, 0.06103 real, 6.71e+05 points.step/s, 24 var
        </code>
        <p>The first line comes from our code and the second line is the default output of basilisk. It gives the number of timesteps performed, the CPU time used for the computation, the real time elapsed, the corresponding computation speed (based on the real time) and the total number of fields allocated by the solver.
        </p>    
        <p>The syntax of events is specific to Basilisk (it is not standard C), however the body of the event works just like a standard C function. To learn more about events, have a look at the Basilisk C reference manual. Here we have used the standard C printf function to format the output.
        </p> 
        <p>Note that you can access the manual page for this function using either the link above or directly using the man command in the shell or in emacs (use the “Help -> More Manuals -> Read Man Page” menu and type “3 printf”).
        </p> 
        <code>3 printf</code>
        <p>This can also be used to access the documentation for (almost) any command or program (for example man ls, man cp etc…) and is a good way to learn.
        </p>
    </section>
</main>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console