<commit_before># Cut.js

Cut.js (name inspired from "cutout animation") is a minimal JavaScript library for developing optimized HTML5 games and visual apps from image textures.

Cut.js targets mobile devices and modern browsers and provides dynamic and intractable visual composition functionalities, but it is not a physics or all-in-one game engine.

[Demos](http://piqnt.com/cutjs/)

#### How it works

A cut.js app is a tree of cut objects. Each cut is pinned (transformed) against its parent and may include any number of image cutouts and/or other cuts as children.

Each rendering cycle consists of ticking and painting the tree. Updates are applied during ticking and on painting each cut transforms according to its pinning and pastes all of its cutouts and then delegates to its children.

Cut.js rendering is retained and pauses in each cycle unless/until it is touched directly or indirectly by updating it. 

#### Example

Following code demonstrate a simple use case. Cut.Loader and Cut.Mouse are pluggable components.

```js
  Cut.Loader.load(function(container) {
  
    var root = Cut.create();
    
    Cut.Mouse.subscribe(root, container);
  
    root.listen("resize", function(width, height) {
      this.pin({
        width : 500,
        height : 300,
        resizeMode : "in",
        resizeWidth : width,
        resizeHeight : height,
      });
    };
  
    var colors = [ "dark", "light", "red", "purple", "blue", "orange", "yellow", "green" ];
  
    var row = Cut.row().appendTo(root).pin("parent", 0.5);
    for ( var i = 0; i < colors.length; i++) {
      Cut.image("colors:dark").appendTo(row)
        .listen(Cut.Mouse.CLICK, function(ev, point) {
          this.setImage("colors:" + colors[i]);
          return true;
        });
    }
  
    return root ;
  });
  
  Cut.addTexture({
    name : "colors",
    imagePath : "colors.png",
    cutouts : [
      { name : "dark",   x : 0,  y : 0,  width : 30, height : 30 },
      { name : "light",  x : 0,  y : 30, width : 30, height : 30 },
      { name : "red",    x : 30, y : 0,  width : 30, height : 30 },
      { name : "purple", x : 30, y : 30, width : 30, height : 30 },
      { name : "blue",   x : 60, y : 0,  width : 30, height : 30 },
      { name : "orange", x : 60, y : 30, width : 30, height : 30 },
      { name : "yellow", x : 90, y : 0,  width : 30, height : 30 },
      { name : "green",  x : 90, y : 30, width : 30, height : 30 }
    ]
  });
```

### API

Note: param? means [param].

```js
  // Create a new plain cut instance.
  // No painting is associated with a plain cut, it is just a parent for other cuts.
  var foo = Cut.create();
  
  // Append/prepend bar to foo children.
  bar.appendTo(foo);
  bar.prependTo(foo);
    
  // Insert baz after/before foo.
  baz.insertAfter(bar);
  baz.insertBefore(bar);

  // Append/prepend bar, baz, ... to foo.
  foo.append(bar, baz, ...);
  foo.prepend(bar, baz, ...);

  // Remove bar from parent.
  bar.remove();

  // Remove bar from foo.
  foo.remove(bar);

  // Remove all children from foo.
  foo.empty();

  // Get bar's parent.
  bar.parent();

  // Get the first/last visible (or any) child.
  foo.first(any?);
  foo.last(any?);

  // Get the next/prev visible (or any) sibling.<commit_msg>correct typos<commit_after># Cut.js

Cut.js (name inspired from "cutout animation") is a minimal JavaScript library for developing optimized HTML5 games and visual apps from image textures.

Cut.js targets mobile devices and modern browsers and provides dynamic and intractable visual composition functionalities, but it is not a physics or all-in-one game engine.

[Demos](http://piqnt.com/cutjs/)

#### How it works

A cut.js app is a tree of cut objects. Each cut is pinned (transformed) against its parent and may include any number of image cutouts and/or other cuts as children.

Each rendering cycle consists of ticking and painting the tree. Updates are applied during ticking and on painting each cut transforms according to its pinning and pastes all of its cutouts and then delegates to its children.

Cut.js rendering is retained and pauses in each cycle unless/until it is touched directly or indirectly by updating it. 

#### Example

Following code demonstrate a simple use case. Cut.Loader and Cut.Mouse are pluggable components.

```js
  Cut.Loader.load(function(container) {
  
    var root = Cut.create();
    
    Cut.Mouse.subscribe(root, container);
  
    root.listen("resize", function(width, height) {
      this.pin({
        width : 500,
        height : 300,
        resizeMode : "in",
        resizeWidth : width,
        resizeHeight : height,
      });
    };
  
    var colors = [ "dark", "light", "red", "purple", "blue", "orange", "yellow", "green" ];
  
    var row = Cut.row().appendTo(root).pin("parent", 0.5);
    for ( var i = 0; i < colors.length; i++) {
      Cut.image("colors:dark").appendTo(row)
        .listen(Cut.Mouse.CLICK, function(ev, point) {
          this.setImage("colors:" + colors[i]);
          return true;
        });
    }
  
    return root ;
  });
  
  Cut.addTexture({
    name : "colors",
    imagePath : "colors.png",
    cutouts : [
      { name : "dark",   x : 0,  y : 0,  width : 30, height : 30 },
      { name : "light",  x : 0,  y : 30, width : 30, height : 30 },
      { name : "red",    x : 30, y : 0,  width : 30, height : 30 },
      { name : "purple", x : 30, y : 30, width : 30, height : 30 },
      { name : "blue",   x : 60, y : 0,  width : 30, height : 30 },
      { name : "orange", x : 60, y : 30, width : 30, height : 30 },
      { name : "yellow", x : 90, y : 0,  width : 30, height : 30 },
      { name : "green",  x : 90, y : 30, width : 30, height : 30 }
    ]
  });
```

### API

Note: name? means name is optional.

```js
  // Create a new plain cut instance.
  // No painting is associated with a plain cut, it is just a parent for other cuts.
  var foo = Cut.create();
  
  // Append/prepend bar to foo's children.
  bar.appendTo(foo);
  bar.prependTo(foo);
    
  // Insert baz after/before bar.
  baz.insertAfter(bar);
  baz.insertBefore(bar);

  // Append/prepend bar, baz, ... to foo.
  foo.append(bar, baz, ...);
  foo.prepend(bar, baz, ...);

  // Remove bar from parent.
  bar.remove();

  // Remove bar from foo.
  foo.remove(bar);

  // Remove all children from foo.
  foo.empty();

  // Get bar's parent.
  bar.parent();

  // Get the first/last visible (or any) child.
  foo.first(any?);
  foo.last(any?);

  // Get the next/prev visible (or any) sibling.
{'fraction_non_alphanumeric': 0.1363356901321857, 'fraction_numerical': 0.02090378112511528, 'mean_word_length': 2.5792079207920793, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7670001', 'n_tokens_mistral': 2225, 'n_tokens_neox': 2031, 'n_words': 762}