Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
@pearmini
pearmini committed Sep 4, 2023
1 parent bac20d0 commit ef9077a
Showing 1 changed file with 56 additions and 69 deletions.
125 changes: 56 additions & 69 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ Charming focus on making the _charm_ of [_character_](<https://en.wikipedia.org/

If you are new to Charming, we highly recommend first reading these tutorials to introduce Charming's core concepts:

- [Creating Application](#creating-application-1) - Rendering app into DOM and animate it.
- [Setting Attributes](#setting-attributes-1) - Controlling the aesthetic appearance of the shapes.
- [Drawing Shapes](#drawing-shapes-1) - Adding primitives, vertices, and curves to app.
- [Applying Transformations](#applying-transformations-1) - Transforming shapes.
- [Control Flow](#control-flow-1) - A more declarative programming style.
- [Instance Properties](#instance-properties-1) - State of the app.
- [Creating Application](#creating-application) - Rendering app into DOM and animate it.
- [Setting Attributes](#setting-attributes) - Controlling the aesthetic appearance of the shapes.
- [Drawing Shapes](#drawing-shapes) - Adding primitives, vertices, and curves to app.
- [Applying Transformations](#applying-transformations) - Transforming shapes.
- [Control Flow](#control-flow) - A more declarative programming style.
- [Instance Properties](#instance-properties) - State of the app.

And there are [a plenty of examples](https://github.com/charming-art/charming/tree/next) to get started with.

Expand Down Expand Up @@ -85,69 +85,56 @@ If Charming is properly installed, you should get a _lucky clove_ as below 🎉:

## API Reference

### [Creating Application](#creating-application-1)

Rendering app into DOM and animate it.

- [cm.**app**](#cm-app)
- [app.**render**](#app-render)
- [app.**frame**](#app-frame)
- [app.**start**](#app-start)
- [app.**stop**](#app-stop)

### [Setting Attributes](#setting-attributes-1)

Controlling the aesthetic appearance of the shapes.

- [app.**scene**](#app-scene) - Sets the specified css _color_ used for the background of the rendering context of the app and returns this app.
- [app.**background**](#app-background) - Sets the specified color (_ch_, _fg_, _bg_) used for the background of the app in cells and returns this app.
- [app.**stroke**](#app-stroke) - Sets the specified color (_ch_, _fg_, _bg_) for drawing the stroke of shapes and returns this app.
- [app.**noStroke**](#app-nostroke) - Disables drawing the stroke of shapes and returns this app.
- [app.**fill**](#app-fill) - Sets the specified color (_ch_, _fg_, _bg_) for drawing the fill of shapes and returns this app.
- [app.**noFill**](#app-nofill) - Disables drawing the fill of shapes and returns this app.
- [cm.**wide**](#cm-wide) - Marks the _ch_ as a wide character and returns the marked code point of it.

### [Drawing Shapes](#drawing-shapes-1)

Adding primitives, vertices, and curves to app.

- [app.**point**](#app-point) - Draws a single cell at the specified coordinates (x, y) and returns this app.
- [app.**line**](#app-line) - Draws a straight path from the specified coordinates (_x_, _y_) to coordinates (_x1_, _y1_) and returns this app.
- [app.**rect**](#app-rect) - Draws a rectangle at the specified coordinates (_x_, _y_) with specified _width_ and _height_ and returns this app.
- [app.**pixels**](#app-pixels) - Draws pixels specified by the _render_ function at the specified coordinates (_x_, _y_) and returns this app.

### [Applying Transformations](#applying-transformations-1)

Transforming shapes.

- [app.**translate**](#app-translate)
- [app.**scale**](#app-scale)
- [app.**rotate**](#app-rotate)
- [app.**popMatrix**](#app-popMatrix)
- [app.**pushMatrix**](#app-pushMatrix)

### [Control Flow](#control-flow-1)

A more declarative programming style.

- [app.**call**](#app-call) - Calls the specified function on this app with any optional arguments and returns this app.

### [Instance Properties](#instance-properties-1)

State of the app.

- [app.**node**](#app-node) - Returns the canvas used to render the app.
- [app.**cols**](#app-cols) - Returns the number of columns in the terminal.
- [app.**rows**](#app-rows) - Returns the number of rows in the terminal.
- [app.**width**](#app-width) - Returns the computed width of the terminal.
- [app.**height**](#app-height) - Returns the computed height of the terminal.
- [app.**cellWidth**](#app-cellwidth) - Returns the computed width of the cells.
- [app.**cellHeight**](#app-cellheight) - Returns the computed height of the cells.
- [app.**fontSize**](#app-fontsize) - Returns the font size used to render text.
- [app.**fontFamily**](#app-fontfamily) - Returns the font family used to render text.
- [app.**fontWeight**](#app-fontweight) - Returns the font weight used to render text.
- [app.**frameCount**](#app-framecount) - Returns the number of frames that have been displayed since the app started.
- [app.**frameRate**](#app-framerate) - Returns or sets the number of frames to be displayed every seconds.
Rendering app into DOM and animate it:

- [_cm_.**app**](#cm-app)
- [_app_.**render**](#app-render)
- [_app_.**frame**](#app-frame)
- [_app_.**start**](#app-start)
- [_app_.**stop**](#app-stop)

Controlling the aesthetic appearance of the shapes:

- [_app_.**scene**](#app-scene) - Sets the css color for the rendering context.
- [_app_.**background**](#app-background) - Sets the color for the background.
- [_app_.**stroke**](#app-stroke) - Sets the color for drawing the stroke of shapes.
- [_app_.**noStroke**](#app-nostroke) - Disables drawing the stroke of shapes.
- [_app_.**fill**](#app-fill) - Sets the color for drawing the fill of shapes.
- [_app_.**noFill**](#app-nofill) - Disables drawing the fill of shapes.
- [_cm_.**wide**](#cm-wide) - Marks the _ch_ as a wide character.

Adding primitives, vertices, and curves to app:

- [_app_.**point**](#app-point) - Draws a single cell.
- [_app_.**line**](#app-line) - Draws a straight path.
- [_app_.**rect**](#app-rect) - Draws a rectangle.
- [_app_.**pixels**](#app-pixels) - Draws any shapes with canvas API.

Transforming shapes:

- [_app_.**translate**](#app-translate)
- [_app_.**scale**](#app-scale)
- [_app_.**rotate**](#app-rotate)
- [_app_.**popMatrix**](#app-popMatrix)
- [_app_.**pushMatrix**](#app-pushMatrix)

A more declarative programming style:

- [_app_.**call**](#app-call) - Facilitates method chaining.
State of the app:

- [_app_.**node**](#app-node) - Returns the canvas used to render the app.
- [_app_.**cols**](#app-cols) - Returns the number of columns in the terminal.
- [_app_.**rows**](#app-rows) - Returns the number of rows in the terminal.
- [_app_.**width**](#app-width) - Returns the computed width of the terminal.
- [_app_.**height**](#app-height) - Returns the computed height of the terminal.
- [_app_.**cellWidth**](#app-cellwidth) - Returns the computed width of the cells.
- [_app_.**cellHeight**](#app-cellheight) - Returns the computed height of the cells.
- [_app_.**fontSize**](#app-fontsize) - Returns the font size used to render text.
- [_app_.**fontFamily**](#app-fontfamily) - Returns the font family used to render text.
- [_app_.**fontWeight**](#app-fontweight) - Returns the font weight used to render text.
- [_app_.**frameCount**](#app-framecount) - Returns the number of frames that have been displayed since the app started.
- [_app_.**frameRate**](#app-framerate) - Returns or sets the number of frames to be displayed every seconds.

## Creating Application

Expand Down

0 comments on commit ef9077a

Please sign in to comment.