This is an extended example of the RenderKit Component being used as a base for a Custom Component. The RenderKit has a number of special attributes and features which make it ideal for situations where you need to get lower level access to the Umajin system than other base components give you. It has custom properties and can animate every frame using the on_tick event – see more features in the RenderKit language reference.

This example uses getData and setData to manage storing data locally for each instance of this component and draws a SIN wave on the RenderKit canvas.

Note: using the on_tick event incorrectly can cause major performance issues if time consuming procedures are run within it, so use this event carefully.

// register a component with a frequency slider which will contain a RenderKit
// on the RenderKit we will make an animating Sin curve
registerComponent("rk_shape", "", "rk_shape", "RK Shape", "rk_shape_init", "rk_shape_resize", "rk_shape_refresh", "real:frequency:1:1:5", "");

function rk_shape_init(width, height){
  // create a RenderKit
  var rk = createComponent(self, "renderkit", 0, 0, 100, 100);
  // create a shape
  var id = renderkitShapeCreate(rk, "");
  setData(rk,"shape_id",id);
  // register for the per frame tick event
  bindEvent(rk,"on_tick","rk_shape_on_tick");
}

var cnt = 0;
function rk_shape_on_tick(){
  rk_shape_draw(self);
  //increment the offset into the Sin curve
  cnt += 0.1;
}

function rk_shape_resize(width, height){
  // get the renderkit from the parent and draw
  var rk = getComponentChild(self,0);
  rk_shape_draw(rk);
}

function rk_shape_refresh(width, height){
  //set the frequency value into the internal renderkit and draw
  var frequency = getData(self, "frequency");
  var rk = getComponentChild(self,0);
  setData(rk, "frequency", frequency);
  rk_shape_draw(rk);
}

function rk_shape_draw(rk){
  // check size of renderkit in local units
  var width = getProperty(rk, "width");
  var height2 = getProperty(rk, "height") / 2.0;
  var frequency = getData(rk, "frequency");
  var id = getData(rk,"shape_id");
  // clear the shape
  renderkitShapeClear(rk,id);
  //setup the start of the curve
  var y = height2 + Math.sin(cnt + ((a * 0.0628) * frequency)) * height2;
  renderkitShapeDoMove(rk,id,y,100);
  // draw the lines of a sin curve
  for (var a = 0; a < 101; a++){
    var y = height2 + Math.sin(cnt + ((a * 0.0628) * frequency)) * height2;
    renderkitShapeDoLine(rk,id,a * width / 100.0, y);
  }
}