CeramicLogo

View source
Entity → Visual → Mesh → ceramic.CeramicLogo (Class)

A visual component that renders the Ceramic engine logo as a mesh.

The logo consists of:

  • An elliptical top section representing a ceramic disc
  • A curved bottom section with shadow and highlight layers

The logo is procedurally generated and can be customized with:

  • Resolution: Controls the smoothness of curves
  • Tilt: Adjusts the perspective of the ellipse
  • Shadow size: Controls the shadow layer thickness
var logo = new CeramicLogo();
logo.size(224, 324); // Double the default size
logo.resolution = 2; // Higher quality curves
logo.tilt = 0.8; // Less tilted perspective
logo.shadowSize = 0.15; // Larger shadow
logo.pos(screen.width * 0.5, screen.height * 0.5);
logo.anchor(0.5, 0.5);

Instance Members

resolution: Float

Controls the quality/smoothness of the logo curves. Higher values create more vertices for smoother curves.

Common values:

  • 0.5: Low quality (faster rendering)
  • 1.0: Normal quality (default)
  • 2.0: High quality (smoother curves)
tilt: Float

Controls the perspective tilt of the top ellipse. Lower values make the ellipse appear more flat/viewed from above.

Common values:

  • 0.5: Very flat perspective
  • 1.0: Normal perspective (default)
  • 1.5: More tilted perspective
shadowSize: Float

The size of the shadow layer as a fraction of the logo width. Controls how thick the gray shadow section appears.

Common values:

  • 0.05: Thin shadow
  • 0.1075: Normal shadow (default)
  • 0.15: Thick shadow
computeContent(): Void

Generates the logo mesh geometry. Called automatically when content is marked dirty (size, resolution, tilt, or shadowSize changes). Builds the logo in three layers:

  1. Top ellipse (gray)
  2. Bottom section with shadow (lighter gray)
  3. Bottom section highlight (white)
new(): Void

Creates a new Ceramic logo mesh. The logo is initialized with default size of 112x162 pixels. Color mapping is set to INDICES for per-triangle coloring.

Private Members

numEllipseVertices: Int

Number of vertices used for the ellipse section. Used internally to track where the ellipse ends and bottom sections begin.

numEllipseIndices: Int

Number of indices used for the ellipse section. Used internally to track the ellipse mesh data.

filledBottom: Float

Tracks how much of the bottom section has been filled. Used internally when building the shadow and highlight layers.

curveEasing: BezierEasing

Bezier easing curve used for the bottom section curvature. Creates the distinctive curved shape of the logo's bottom.

computeEllipse(color: Color): Void

Generates the elliptical top section of the logo. Creates a filled ellipse using triangle fan technique.

Name Type Description
color Color The color to apply to the ellipse triangles
computeBottomSection(color: Color, cut: Float): Void

Generates a layer of the bottom section of the logo. Creates a curved shape that connects to the ellipse and curves down to a point. Called twice: once for the shadow layer and once for the highlight layer.

Name Type Description
color Color The color to apply to this section
cut Float The horizontal cutoff point as a fraction of width (0-1). Used to create the layered shadow/highlight effect.

Metadata

Name Parameters
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()