How to draw a sine wave with eepp?

[bxijt4]

This example draws a circle but isn't a sine wave more cool?

https://github.com/SpartanJ/eepp/blob/develop/src/examples/empty_window/empty_window.cpp

I'm basically have no knowledge of computer graphics and OpenGL. Don't tell me that I need to dive into OpenGL, pls.

[SpartanJ]

This example draws a circle but isn't a sine wave more cool?

🤷

I'm basically have no knowledge of computer graphics and OpenGL. Don't tell me that I need to dive into OpenGL, pls.

eepp has its own methods to draw basically anything in 2D coordinates, but it's a huge library so I cannot give you many details, you'll have to read the examples.

Here's a simple example using two different methods,

Primitives class contains many facilities to draw simple primitives (lines, circles, rectangles, etc). It's an abstraction of the second method, the BatchRenderer.
The BatchRenderer queues and classify draw calls based on its type. For this example is actually simpler to use it directly.

#include <eepp/ee.hpp>

EE_MAIN_FUNC int main( int, char*[] ) {
    auto win = Engine::instance()->createWindow( WindowSettings( 960, 640, "eepp - Empty Window" ),
                                                 ContextSettings( true ) );

    if ( win->isOpen() ) {
        win->setClearColor( RGB( 255, 255, 255 ) );

        Float frequency = 0.025f;
        win->runMainLoop( [win, &frequency] {
            win->clear();
            win->getInput()->update();

            if ( win->getInput()->isKeyDown( KEY_ESCAPE ) )
                win->close();
            else if ( win->getInput()->isKeyDown( KEY_UP ) )
                frequency += win->getElapsed().asSeconds() * 0.1f;
            else if ( win->getInput()->isKeyDown( KEY_DOWN ) )
                frequency -= win->getElapsed().asSeconds() * 0.1f;

            Sizef size = win->getSize().asFloat();
            Float centerY = size.getHeight() * 0.5f;
            Float amplitude = size.getHeight() / 2 * 0.5f;

            // Using batch renderer
            BatchRenderer br;
            br.lineStripSetColor( Color::Red );
            for ( Float x = 0; x < size.getWidth(); x++ )
                br.batchLineStrip( x, amplitude * std::sin( frequency * x ) + centerY );
            br.draw();

            // Using Primitives class
            Primitives p;
            p.setColor( Color::Blue );
            for ( Float x = 0; x < size.getWidth(); x++ ) {
                Vector2f p1{ x, -amplitude * std::sin( frequency * x ) + centerY };
                Vector2f p2{ x + 1, -amplitude * std::sin( frequency * ( x + 1 ) ) + centerY };
                p.drawLine( { p1, p2 } );
            }

            win->display();
        } );
    }

    Engine::destroySingleton();

    return EXIT_SUCCESS;
}

[bxijt4]

How can I add a label to show the current frequency?

[SpartanJ]

As a quick answer you can follow the fonts example.

It's something like this without using the UI module:

#include <eepp/ee.hpp>

EE_MAIN_FUNC int main( int, char*[] ) {
    auto win = Engine::instance()->createWindow( WindowSettings( 960, 640, "eepp - Empty Window" ),
                                                 ContextSettings( true ) );

    if ( win->isOpen() ) {
        win->setClearColor( RGB( 255, 255, 255 ) );

        Float frequency = 0.025f;
        FontTrueType* font = FontTrueType::New( "DejaVuSansMono" ); // Create a new font
        font->loadFromFile( "assets/fonts/DejaVuSansMono.ttf" ); // Load the font

        Text text; // Create a text
        text.setFont( font ); // Set the font to use with the text
        text.setFontSize( 24 ); // Set the size in px
        text.setFillColor( Color::Black ); // The font color

        win->runMainLoop( [&] {
            win->clear();
            win->getInput()->update();

            if ( win->getInput()->isKeyDown( KEY_ESCAPE ) )
                win->close();
            else if ( win->getInput()->isKeyDown( KEY_UP ) )
                frequency += win->getElapsed().asSeconds() * 0.1f;
            else if ( win->getInput()->isKeyDown( KEY_DOWN ) )
                frequency -= win->getElapsed().asSeconds() * 0.1f;
            
            // Update the frequency value in the text (you can updated it only when changes but i'm lazy)
            text.setString( String::format("frequency is %.2f", frequency) );
            
            Sizef size = win->getSize().asFloat();
            Float centerY = size.getHeight() * 0.5f;
            Float amplitude = size.getHeight() / 2 * 0.5f;

            // Using batch renderer
            BatchRenderer br;
            br.lineStripSetColor( Color::Red );
            for ( Float x = 0; x < size.getWidth(); x++ )
                br.batchLineStrip( x, amplitude * std::sin( frequency * x ) + centerY );
            br.draw();

            // Using Primitives class
            Primitives p;
            p.setColor( Color::Blue );
            for ( Float x = 0; x < size.getWidth(); x++ ) {
                Vector2f p1{ x, -amplitude * std::sin( frequency * x ) + centerY };
                Vector2f p2{ x + 1, -amplitude * std::sin( frequency * ( x + 1 ) ) + centerY };
                p.drawLine( { p1, p2 } );
            }

            text.draw( 32, 32 ); // x and y

            win->display();
        } );
    }

    Engine::destroySingleton();

    return EXIT_SUCCESS;
}

[bxijt4]

How would it look like if using the UI module? Is drawing the sine wave using the UI module different from when not using it?

[SpartanJ]

I added an example of doing this same thing but with the UI module here.
UI elements work as a blank canvas where you can draw whatever you want so the drawing is basically the same but respecting the widget coordinates and size. Since you wanted to draw a sine wave it's needed to create a new type of widget and register it to the system (there are many ways of doing this actually but this is the most "correct"). It's quite more work for this particular example since you need to create a new type of element, you normally just use the UI widgets suite.