Tutorial

This tutorial is a step-by-step guide to using Ripl from the most basic use-case and progressively adding complexity for more advanced use-cases.

The basics

Render a basic element

The following example show the most basic usage of Ripl - drawing a element to a context. There are 3 steps to rendering a basic element:

1. Create a context for which the element will be rendered to
2. Create an instance of an element specifying all required parameters for that element type
3. Render the element to the context

import {
    createContext,
    createCircle
} from '@ripl/core';

const context = createContext('.mount-element');
const circle = createCircle({
    fillStyle: '#3a86ff'
    cx: context.width / 2,
    cy: context.height / 2,
    radius: Math.min(context.width, context.height) / 3,
});

circle.render(context);

TIP

Ripl renders to a canvas context by default. To render to a different context import createContext from the relevant package (eg. @ripl/svg) as opposed to @ripl/core

Change element properties

An element can be modified at any point by simply changing the properties you wish to update and re-rendering the element to the context.

circle.cx += 20;
circle.cy += 20;
circle.radius = 58;
circle.fillStyle = 'rgb()'

Creating structure

Using groups

Using scenes

Interactivity and animation

Using renderers

Adding animation