Create animations

You like drawing and designing or you just want to spice up your project with an animation?
I have two solution for you!

Solution 1. (the easier)

What you will need:

• arduino
• 4 wires
• an oled display

Circuit:

We connect SCL to SCL and SDA to SDA(or SCL to A5 and SDA to A4).

Code:

Go to animator.wokwi.com and choose your animation and the size of the oled display. Then click "GET THE CODE>" and paste the code into the Arduino IDE.

Result:

Solution 2.

We will make an animation from pictures. Everything will be the same, only the code will change.

Code:

Copy and paste this code into the Arduino IDE:

    #include <Adafruit_GFX.h>
    #include <Adafruit_SSD1306.h>

    #define SCREEN_I2C_ADDRESS 0x3C // or try 0x3D
    #define SCREEN_WIDTH 128     
    #define SCREEN_HEIGHT 64     
    #define RESET_PIN -1     
    #define FRAME_DELAY 100 // Choose the delay between frames      

    Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, RESET_PIN);
          

• Go to javl.github.io/image2cpp.
• Choose your images, set background color to black and choose "scale to fit keeping proportions" at scaling
• Check the "invert image color" box(I also recommend checking the vertically and horizontally boxes at "center image")
• Set the "canvas size" to the size of your oled display
• Then click "Generate code" and "Copy Output"
• Paste it into the Arduino IDE

Now paste this code into your Arduino IDE and edit it for yourself:

    void setup() {
      display.begin(SSD1306_SWITCHCAPVCC, SCREEN_I2C_ADDRESS);
    }
            
    void loop() {
      display.clearDisplay();
      display.drawBitmap(0, 0, nameOfFrame1, SCREEN_WIDTH, SCREEN_HEIGHT, 1); // Change the nameOfFrame1! 
      display.display();
      delay(FRAME_DELAY);
      display.clearDisplay();
      display.drawBitmap(0, 0, nameOfFrame2, SCREEN_WIDTH, SCREEN_HEIGHT, 1); // Change the nameOfFrame2! 
      display.display();
      delay(FRAME_DELAY);
      display.clearDisplay();
      display.drawBitmap(0, 0, nameOfFrame3, SCREEN_WIDTH, SCREEN_HEIGHT, 1); // Change the nameOfFrame3! 
      display.display();
      delay(FRAME_DELAY);

      //If you have more frames add more of these:
      /*
      display.clearDisplay();
      display.drawBitmap(0, 0, nameOfFrame3, SCREEN_WIDTH, SCREEN_HEIGHT, 1); // Change the nameOfFrame3! 
      display.display();
      delay(FRAME_DELAY);
      */
    }     

Result: