Merge pull request #93 from botamochi6277/face_custom

Add Face templates, custom eyes, mouths, and eyebrows

Author: mongonta0716

docs/FaceCustomizationGuideline.md

@@ -0,0 +1,67 @@
+# Customization Guideline
+
+## Anatomy of Face
+
+<img src="https://github.com/user-attachments/assets/0f9da4df-f5f6-48ce-adc6-ac0405041b6f" width=50% alt="anatomy">
+
+`m5avatar::Face` consists of five components: 
+
+- left eye
+- right eye
+- mouth
+- left eyebrow
+- right eyebrow
+
+You can customize a face with replacing the components.
+[examples/face-and-color/face-and-color.ino](../examples/face-and-color/face-and-color.ino) is an example of using and customizing faces.
+
+## Face templates
+Pre-assembled faces are available and defined in [src/faces/FaceTemplates.hpp](../src/faces/FaceTemplates.hpp)
+
+|preview|face|eye|mouth|eyebrow|notes|
+|:-:|:-|:-|:-|:-|:-|
+|<img src="https://github.com/user-attachments/assets/5908e69f-9674-43df-a933-9f8d24fa488c/" width=20% alt="SimpleFace">|`SimpleFace`| `EllipseEye` | `RectMouth` | -- | Alternative  implementation of (Native) `Face`
+|<img src="https://github.com/user-attachments/assets/5457eaec-a774-46f5-90dd-7ee1a3e13c03" width=20% alt="DoggyFace">|`DoggyFace`|`DoggyEye`|`DoggyMouth`|`RectEyebrow`|Alternative  implementation of `DogFace`|
+|<img src="https://github.com/user-attachments/assets/0ddd047a-76bf-450f-8a32-d245fdc40380" width=20% alt="OmegaFace">|`OmegaFace`|`EllipseEye`|`OmegaMouth`|--||
+|<img src="https://github.com/user-attachments/assets/fc0a5d3f-bf0d-4563-aa19-1e2d565e83aa" width=20% alt="GirlyFace">|`GirlyFace`|`GirlyEye`|`UShapeMouth`|`EllipseEyebrow`||
+
+
+
+
+
+## Eyes
+
+Predefined eye components are in [src/Eyes.hpp](../src/Eyes.hpp) and [src/Eyes.cpp](../src/Eyes.cpp)
+
+- `EllipseEye` (Extended implement of `Eye`)
+- `GirlyEye`
+- `PinkDemonEye`
+- `DoggyEye` (Alternative implement of `DogEye`)
+
+
+
+## Mouth
+
+Predefined mouth components are in [src/Mouths.hpp](../src/Mouths.hpp) and [src/Mouths.cpp](../src/Mouths.cpp)
+
+- `RectMouth` (Alternative implement of `Mouth`)
+- `OmegaMouth`
+- `UShapeMouth`
+- `DoggyMouth` (Alternative implement of `DogMouth`)
+
+## Eyebrows
+
+Predefined mouth components are in [src/EyeBrow.hpp](../src/EyeBrow.hpp) and [src/EyeBrow.cpp](../src/EyeBrow.cpp)
+
+- `RectEyebrow`
+- `EllipseEyebrow`
+- `BowEyebrow`
+
+
+## Notes
+
+### Native files
+- [src/Eye.h](../src/Eye.h) and [src/Eye.cpp](../src/Eye.cpp) : Native `Eye` code
+- [src/Mouth.h](../src/Mouth.h) and [src/Mouth.cpp](../src/Mouth.cpp) : Native `Mouth` code
+- [src/Eyeblow.h](../src/Eyeblow.h) and [src/Eyeblow.cpp](../src/Eyeblow.cpp) : Native `Eyeblow` code for Eyebrow
+- [src/faces/DogFace.h](../src/faces/DogFace.h) : Native `DogFace` code

examples/face-and-color/face-and-color.ino

@@ -1,72 +1,97 @@
-#include <M5Unified.h>
 #include <Avatar.h>
-#include <faces/DogFace.h>
+#include <M5Unified.h>
+
+#include <faces/FaceTemplates.hpp>
 
 using namespace m5avatar;
 
 Avatar avatar;
 
-Face* faces[2];
-const int facesSize = sizeof(faces) / sizeof(Face*);
-int faceIdx = 0;
+Face* faces[6];
+const int num_faces = sizeof(faces) / sizeof(Face*);
+int face_idx = 0;  // face index
 
-const Expression expressions[] = {
-  Expression::Angry,
-  Expression::Sleepy,
-  Expression::Happy,
-  Expression::Sad,
-  Expression::Doubt,
-  Expression::Neutral
-};
-const int expressionsSize = sizeof(expressions) / sizeof(Expression);
+const Expression expressions[] = {Expression::Angry, Expression::Sleepy,
+                                  Expression::Happy, Expression::Sad,
+                                  Expression::Doubt, Expression::Neutral};
+const int num_expressions = sizeof(expressions) / sizeof(Expression);
 int idx = 0;
 
-ColorPalette* cps[4];
-const int cpsSize = sizeof(cps) / sizeof(ColorPalette*);
-int cpsIdx = 0;
+ColorPalette* color_palettes[5];
+const int num_palettes = sizeof(color_palettes) / sizeof(ColorPalette*);
+int palette_idx = 0;
 
 bool isShowingQR = false;
 
-void setup()
-{
-  M5.begin();
-  M5.Lcd.setBrightness(30);
-  M5.Lcd.clear();
+// an example of customizing
+class MyCustomFace : public Face {
+   public:
+    MyCustomFace()
+        : Face(new UShapeMouth(44, 44, 0, 16), new BoundingRect(222, 160),
+               // right eye, second eye arg is center position of eye
+               new EllipseEye(32, 32, false), new BoundingRect(163, 64),
+               //  left eye
+               new EllipseEye(32, 32, true), new BoundingRect(163, 256),
+               // right eyebrow
+               // BowEyebrow's origin is the center of bow (arc)
+               new BowEyebrow(64, 20, false),
+               new BoundingRect(163, 64),  // (y,x)
+                                           //  left eyebrow
+               new BowEyebrow(64, 20, true), new BoundingRect(163, 256)) {}
+};
+
+void setup() {
+    M5.begin();
+    M5.Lcd.setBrightness(30);
+    M5.Lcd.clear();
 
-  faces[0] = avatar.getFace();
-  faces[1] = new DogFace();
+    faces[0] = avatar.getFace();  // native face
+    faces[1] = new DoggyFace();
+    faces[2] = new OmegaFace();
+    faces[3] = new GirlyFace();
+    faces[4] = new PinkDemonFace();
+    faces[5] = new MyCustomFace();
 
-  cps[0] = new ColorPalette();
-  cps[1] = new ColorPalette();
-  cps[2] = new ColorPalette();
-  cps[3] = new ColorPalette();
-  cps[1]->set(COLOR_PRIMARY, TFT_YELLOW);
-  cps[1]->set(COLOR_BACKGROUND, TFT_DARKCYAN);
-  cps[2]->set(COLOR_PRIMARY, TFT_DARKGREY);
-  cps[2]->set(COLOR_BACKGROUND, TFT_WHITE);
-  cps[3]->set(COLOR_PRIMARY, TFT_RED);
-  cps[3]->set(COLOR_BACKGROUND, TFT_PINK);
+    color_palettes[0] = new ColorPalette();
+    color_palettes[1] = new ColorPalette();
+    color_palettes[2] = new ColorPalette();
+    color_palettes[3] = new ColorPalette();
+    color_palettes[4] = new ColorPalette();
+    color_palettes[1]->set(COLOR_PRIMARY,
+                           M5.Lcd.color24to16(0x383838));  // eye
+    color_palettes[1]->set(COLOR_BACKGROUND,
+                           M5.Lcd.color24to16(0xfac2a8));  // skin
+    color_palettes[1]->set(COLOR_SECONDARY,
+                           TFT_PINK);  // cheek
+    color_palettes[2]->set(COLOR_PRIMARY, TFT_YELLOW);
+    color_palettes[2]->set(COLOR_BACKGROUND, TFT_DARKCYAN);
+    color_palettes[3]->set(COLOR_PRIMARY, TFT_DARKGREY);
+    color_palettes[3]->set(COLOR_BACKGROUND, TFT_WHITE);
+    color_palettes[4]->set(COLOR_PRIMARY, TFT_RED);
+    color_palettes[4]->set(COLOR_BACKGROUND, TFT_PINK);
 
-  avatar.init();
-  avatar.setColorPalette(*cps[0]);
+    avatar.init(8);  // start drawing w/ 8bit color mode
+    avatar.setColorPalette(*color_palettes[0]);
 }
 
-void loop()
-{
-  M5.update();
-  if (M5.BtnA.wasPressed())
-  {
-    avatar.setFace(faces[faceIdx]);
-    faceIdx = (faceIdx + 1) % facesSize;
-  }
-  if (M5.BtnB.wasPressed())
-  {
-    avatar.setColorPalette(*cps[cpsIdx]);
-    cpsIdx = (cpsIdx + 1) % cpsSize;
-  }
-  if (M5.BtnC.wasPressed())
-  {
-    avatar.setExpression(expressions[idx]);
-    idx = (idx + 1) % expressionsSize;
-  }
+void loop() {
+    M5.update();
+    // M5Stack Core's button layout:
+    // -----------
+    // |         |
+    // |         |
+    // -----------
+    // [A] [B] [C]
+    if (M5.BtnA.wasPressed()) {
+        avatar.setFace(faces[face_idx]);
+        face_idx = (face_idx + 1) % num_faces;  // loop index
+    }
+    if (M5.BtnB.wasPressed()) {
+        avatar.setColorPalette(*color_palettes[palette_idx]);
+        palette_idx = (palette_idx + 1) % num_palettes;
+    }
+    if (M5.BtnC.wasPressed()) {
+        avatar.setExpression(expressions[idx]);
+        idx = (idx + 1) % num_expressions;
+    }
 }

src/DrawingUtils.cpp

@@ -0,0 +1,67 @@
+#include "DrawingUtils.hpp"
+
+namespace m5avatar {
+void rotatePoint(float &x, float &y, float angle) {
+    float tmp;
+    tmp = x * cosf(angle) - y * sinf(angle);
+    x = tmp;
+    tmp = x * sinf(angle) + y * cosf(angle);
+    y = tmp;
+}
+
+void rotatePointAround(float &x, float &y, float angle, float cx, float cy) {
+    float tmp_x = x - cx;
+    float tmp_y = y - cy;
+    rotatePoint(tmp_x, tmp_y, angle);  // rotate around origin
+    x = tmp_x + cx;
+    y = tmp_y + cy;
+}
+
+void fillRotatedRect(M5Canvas *canvas, uint16_t cx, uint16_t cy, uint16_t w,
+                     uint16_t h, float angle, uint16_t color) {
+    float top_left_x = cx - w / 2;
+    float top_left_y = cy - h / 2;
+
+    float top_right_x = cx + w / 2;
+    float top_right_y = cy - h / 2;
+
+    float bottom_left_x = cx - w / 2;
+    float bottom_left_y = cy + h / 2;
+
+    float bottom_right_x = cx + w / 2;
+    float bottom_right_y = cy + h / 2;
+
+    // rotate vertex
+    rotatePointAround(top_left_x, top_left_y, angle, cx, cy);
+    rotatePointAround(top_right_x, top_right_y, angle, cx, cy);
+    rotatePointAround(bottom_left_x, bottom_left_y, angle, cx, cy);
+    rotatePointAround(bottom_right_x, bottom_right_y, angle, cx, cy);
+
+    canvas->fillTriangle(top_left_x, top_left_y, top_right_x, top_right_y,
+                         bottom_right_x, bottom_right_y, color);
+    canvas->fillTriangle(top_left_x, top_left_y, bottom_right_x, bottom_right_y,
+                         bottom_left_x, bottom_left_y, color);
+}
+
+void fillRectRotatedAround(M5Canvas *canvas, float top_left_x, float top_left_y,
+                           float bottom_right_x, float bottom_right_y,
+                           float angle, uint16_t cx, uint16_t cy,
+                           uint16_t color) {
+    float top_right_x = bottom_right_x;
+    float top_right_y = top_left_y;
+
+    float bottom_left_x = top_left_x;
+    float bottom_left_y = bottom_right_y;
+
+    rotatePointAround(top_left_x, top_left_y, angle, cx, cy);
+    rotatePointAround(top_right_x, top_right_y, angle, cx, cy);
+    rotatePointAround(bottom_left_x, bottom_left_y, angle, cx, cy);
+    rotatePointAround(bottom_right_x, bottom_right_y, angle, cx, cy);
+
+    canvas->fillTriangle(top_left_x, top_left_y, top_right_x, top_right_y,
+                         bottom_right_x, bottom_right_y, color);
+    canvas->fillTriangle(top_left_x, top_left_y, bottom_right_x, bottom_right_y,
+                         bottom_left_x, bottom_left_y, color);
+}
+
+}  // namespace m5avatar

src/DrawingUtils.hpp

@@ -0,0 +1,34 @@
+/**
+ * @file DrawingUtils.hpp
+ * @author botamochi (botamochi6277@gmail.com)
+ * @brief drawing utils including geometry handling
+ * @version 0.1
+ * @date 2024-07-28
+ *
+ * @copyright Copyright (c) 2024
+ *
+ */
+
+#ifndef M5AVATAR_DRAWING_UTILS_HPP_
+#define M5AVATAR_DRAWING_UTILS_HPP_
+
+#include <BoundingRect.h>
+#include <DrawContext.h>
+#include <Drawable.h>
+
+namespace m5avatar {
+void rotatePoint(float &x, float &y, float angle);
+
+void rotatePointAround(float &x, float &y, float angle, float cx, float cy);
+
+void fillRotatedRect(M5Canvas *canvas, uint16_t cx, uint16_t cy, uint16_t w,
+                     uint16_t h, float angle, uint16_t color);
+
+void fillRectRotatedAround(M5Canvas *canvas, float top_left_x, float top_left_y,
+                           float bottom_right_x, float bottom_right_y,
+                           float angle, uint16_t cx, uint16_t cy,
+                           uint16_t color);
+
+}  // namespace m5avatar
+
+#endif

src/Eyebrows.cpp

@@ -0,0 +1,68 @@
+#include "Eyebrows.hpp"
+
+namespace m5avatar {
+
+BaseEyebrow::BaseEyebrow(bool is_left) : BaseEyebrow(30, 20, is_left) {}
+
+BaseEyebrow::BaseEyebrow(uint16_t width, uint16_t height, bool is_left) {
+    this->width_ = width;
+    this->height_ = height;
+    this->is_left_ = is_left;
+}
+
+void BaseEyebrow::update(M5Canvas *canvas, BoundingRect rect,
+                         DrawContext *ctx) {
+    // common process for all standard eyebrows
+    // update drawing parameters
+    ColorPalette *cp = ctx->getColorPalette();
+    primary_color_ = ctx->getColorDepth() == 1 ? 1 : cp->get(COLOR_PRIMARY);
+    secondary_color_ = ctx->getColorDepth() == 1
+                           ? 1
+                           : ctx->getColorPalette()->get(COLOR_SECONDARY);
+    background_color_ =
+        ctx->getColorDepth() == 1 ? ERACER_COLOR : cp->get(COLOR_BACKGROUND);
+    center_x_ = rect.getCenterX();
+    center_y_ = rect.getCenterY();
+    expression_ = ctx->getExpression();
+}
+
+void EllipseEyebrow::draw(M5Canvas *canvas, BoundingRect rect,
+                          DrawContext *ctx) {
+    this->update(canvas, rect, ctx);
+    if (width_ == 0 || height_ == 0) {
+        return;  // draw nothing
+    }
+
+    canvas->fillEllipse(center_x_, center_y_, this->width_ / 2,
+                        this->height_ / 2, primary_color_);
+}
+
+void BowEyebrow::draw(M5Canvas *canvas, BoundingRect rect, DrawContext *ctx) {
+    this->update(canvas, rect, ctx);
+    uint8_t thickness = 4;
+
+    float angle0 = is_left_ ? 180.0f + 35.0f : 180.0f + 45.0f;
+    float stroke_angle = 100.0f;
+    canvas->fillArc(center_x_, center_y_, width_ / 2, width_ / 2 - thickness,
+                    angle0, angle0 + stroke_angle, primary_color_);
+}
+
+void RectEyebrow::draw(M5Canvas *canvas, BoundingRect rect, DrawContext *ctx) {
+    this->update(canvas, rect, ctx);
+
+    if (width_ == 0 || height_ == 0) {
+        return;
+    }
+    float angle = 0.0f;
+    if (expression_ == Expression::Angry) {
+        angle = is_left_ ? -M_PI / 6.0f : M_PI / 6.0f;
+    }
+    if (expression_ == Expression::Sad) {
+        angle = is_left_ ? M_PI / 6.0f : -M_PI / 6.0f;
+    }
+
+    fillRotatedRect(canvas, center_x_, center_y_, width_, height_, angle,
+                    primary_color_);
+}
+
+}  // namespace m5avatar