Basic Shapes

This tutorial section shows some selected shapes & primitives with their corresponding code examples. For a detailed listing of supported shapes, refer to the Painter’s API documentation.

Arrows

Arrow shapes can easily be customized:

# Style specification:
arrow_style = viren2d.ArrowStyle(
    width=7, color='forest-green', cap=viren2d.LineCap.Round)

painter.draw_arrow((10, 190), (100, 10), arrow_style)

arrow_style.color = 'rose-red'
arrow_style.tip_closed = True
arrow_style.tip_angle = 10
painter.draw_arrow(pt2=(80, 190), pt1=(180, 10), arrow_style=arrow_style)

arrow_style.color = 'azure'
arrow_style.tip_closed = False
arrow_style.tip_angle = 30
arrow_style.double_headed = True
painter.draw_arrow((200, 30), (390, 30), arrow_style)

arrow_style.dash_pattern = [20, 20]
painter.draw_arrow((200, 100), (390, 100), arrow_style)

arrow_style.tip_angle = 15
arrow_style.tip_closed = True
painter.draw_arrow((200, 170), (390, 170), arrow_style)

Circles & Lines

The following example shows basic line & circle drawings:

This example is C++ only, because viren2d focuses on visualization and thus, does not provide Python bindings for the tangent computation. This geometric functionality is available in C++ via the werkzeugkiste::geometry library:

/// Draws the two circles and their tangents.
void TangentsDemoHelper(
    std::unique_ptr<Painter> &painter,
    const wkg::Circle &circ1,
    const wkg::Circle &circ2) {
  LineStyle tangent_style(3, Color::CoordinateAxisColor('x'));
  LineStyle circle_style(3, "azure");

  // Draw the transverse common tangents:
  wkg::Line2d t1, t2;
  const int num_transverse = circ1.TransverseCommonTangents(circ2, &t1, &t2);

  std::vector<wkg::Line2d> transverse_tangents;
  if (num_transverse > 0) {
    transverse_tangents.push_back(t1);
  }
  if (num_transverse > 1) {
    transverse_tangents.push_back(t2);
  }
  for (const auto &tangent : transverse_tangents) {
    painter->DrawLine(tangent.From(), tangent.To(), tangent_style);
  }

  // Draw the direct common tangents:
  wkg::Line2d d1, d2;
  const int num_direct = circ1.DirectCommonTangents(circ2, &d1, &d2);

  std::vector<wkg::Line2d> direct_tangents;
  if (num_direct > 0) {
    direct_tangents.push_back(d1);
  }
  if (num_direct > 1) {
    direct_tangents.push_back(d2);
  }

  tangent_style.color = Color::CoordinateAxisColor('y');
  for (const auto &tan : direct_tangents) {
    painter->DrawLine(tan.From(), tan.To(), tangent_style);
  }

  // Draw the circles
  painter->DrawCircle(
        circ1.Center(), circ1.Radius(),
        circle_style, Color::Same.WithAlpha(0.3));
  painter->DrawCircle(
        circ2.Center(), circ2.Radius(),
        circle_style, Color::Same.WithAlpha(0.3));
}


void DemoCircleTangents() {
  PrintDemoHeader("Circle Tangents");

  auto painter = CreatePainter();
  painter->SetCanvas(512, 512, Color::White.WithAlpha(0.0));

  // Two separate circles, with all four tangents
  wkg::Circle circle1{{100.0, 100.0}, 90.0};
  wkg::Circle circle2{{300.0,  60.0}, 50.0};
  TangentsDemoHelper(painter, circle1, circle2);

  // Same radii
  circle1 = {{440.0,  50.0}, 40.0};
  circle2 = {{455.0, 160.0}, 40.0};
  TangentsDemoHelper(painter, circle1, circle2);

  // Intersecting (outside), different radii
  circle1 = {{285.0, 450.0}, 50.0};
  circle2 = {{375.0, 450.0}, 40.0};
  TangentsDemoHelper(painter, circle1, circle2);

  // Overlapping
  circle1 = {{260.0, 245.0}, 80.0};
  circle2 = {{350.0, 230.0}, 60.0};
  TangentsDemoHelper(painter, circle1, circle2);

  // Intersecting (inner)
  circle1 = {{100.0, 400.0}, 80.0};
  circle2 = {{140.0, 400.0}, 40.0};
  TangentsDemoHelper(painter, circle1, circle2);

  // Inside (no tangent)
  circle1 = {{425.0, 340.0}, 35.0};
  circle2 = {{420.0, 340.0}, 50.0};
  TangentsDemoHelper(painter, circle1, circle2);

  ProcessDemoOutput(painter->GetCanvas(false), "circle-tangents.png");
  painter.reset();
}

Ellipses

Both ellipses and elliptical arcs are supported:

# Style specifications:
text_style = viren2d.TextStyle(
    family='xkcd', size=23, line_spacing=0.8, halign='center')

line_style = viren2d.LineStyle(width=5, color='azure!80')

fill_color = 'ivory!80'

# Top-left ellipse:
ellipse = viren2d.Ellipse(
    center=(100, 60), axes=(180, 50), rotation=0)
painter.draw_ellipse(ellipse, line_style, fill_color)

painter.draw_text(['0°'], ellipse.center, 'center', text_style)

# Top ellipse:
ellipse.cx = 300
ellipse.rotation = 30
painter.draw_ellipse(ellipse, line_style, fill_color)

painter.draw_text(
    ['30°'], ellipse.center, 'center', text_style,
    rotation=ellipse.rotation)

# Top-right ellipse:
ellipse.cx = 500
ellipse.angle_from = 45
ellipse.angle_to = 315
painter.draw_ellipse(ellipse, line_style)

text_style.color = 'ivory'
painter.draw_text(
    ['30°'], ellipse.center, 'right', text_style,
    padding=(10, 0), rotation=ellipse.rotation)

# Bottom-left ellipse:
line_style.dash_pattern = [20, 10]
ellipse.center = (100, 175)
painter.draw_ellipse(ellipse, line_style, fill_color)

# Bottom ellipse:
ellipse.cx = 300
painter.draw_ellipse(ellipse, viren2d.LineStyle.Invalid, fill_color)

# Bottom-right ellipse:
ellipse.include_center = False
ellipse.cx = 500
painter.draw_ellipse(ellipse, viren2d.LineStyle.Invalid, fill_color)

Rectangles

Rectangles can be drawn in a variety of configurations:

# Style specification:
line_style = viren2d.LineStyle(width=5, color='azure!80')
fill_color = 'ivory!80'

# Square rectangles (left):
rect = viren2d.Rect(center=(40, 110), size=(60, 180))
painter.draw_rect(rect, line_style)

rect.cx += 80
painter.draw_rect(rect, line_style, fill_color)

# Rounded rectangles (center):
rect.cx = 250
rect.radius = 0.3
painter.draw_rect(rect, line_style)

rect.cx += 80
painter.draw_rect(rect, line_style, fill_color)

# Dashed & rotated rectangles (right):
line_style.dash_pattern = [20, 10]
rect.cx = 460
rect.rotation = 10
painter.draw_rect(rect, line_style)

rect.cx += 80
painter.draw_rect(rect, line_style, fill_color)