polygon cloth

put image or dom on canvas and interact with user like cloth

Install

Usage

dom

const Cloth= require(polygon-cloth);
 
let canvas = document.getElementById('canvas');
 
let dom = document.getElementById('domid');
new Cloth({
    canvas:canv,
    gravity:{x:0,y:500},
    start:{x:0,y:0},
    numcol:54,
    numrow:23,
    render_times:2,
    tear_distance:300,
    space:25,
    renderType:2,
    pand:{
        x:1.02,
        y:1.02
    },
    mouse_influence:50,
    filltype:"glass",
    doGrain:true
})
.init()
.bindEvent()
.renderGrain(dom)
.then(()=>{
    requestAnimationFrame(anim);
});
 
function anim(){
    cl.update();
    // if((delaycount = ++delaycount%9) ==0)
    cl.draw();
    requestAnimationFrame(anim);
}
 

img

let image = new Image();
image.onload = function(){
    new Cloth({
        ...
    }).init()
    .bindEvent()
    .renderGrain(image)
    .then(()=>{
        //anim
    })
}
image.src = 'image_src';

Options

• canvas = canvas element,
• ctx = ctx //ctx or canvas,not nessary support both
• numrow = how many cell-rows(cell number in y-axis),
• numcol = how many cell-cols(cell number in x-axis),
• space = the size of one cell,
• start ={ x:x, y:y, }//start
• gravity = {x:0,y:1200}重力加速度,
• tear_distance = 撕裂距离,
• mouse_influence = 光标影响范围,
• mouse_cut = 剪切影响范围,
• render_times = 每次更新前物理作用渲染次数,
• img = img src ,
• doGrain = false//是否渲染纹理,
• renderType=clarity 1|pattern 0//你试试

License

MIT