模拟撕衣服的代码

最新推荐文章于 2020-11-14 22:07:28 发布
最新推荐文章于 2020-11-14 22:07:28 发布
阅读量791 收藏
点赞数
分类专栏： web 文章标签： 撕衣服 js

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

<canvas id="c"></canvas>
    <script>

var physics_accuracy  = 3,
    mouse_influence   = 20,
    mouse_cut         = 5,
    gravity           = 1200,
    cloth_height      = 30,
    cloth_width       = 50,
    start_y           = 20,
    spacing           = 7,
    tear_distance     = 60;


window.requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
};

var canvas,
    ctx,
    cloth,
    boundsx,
    boundsy,
    mouse = {
        down: false,
        button: 1,
        x: 0,
        y: 0,
        px: 0,
        py: 0
    };

var Point = function (x, y) {

    this.x      = x;
    this.y      = y;
    this.px     = x;
    this.py     = y;
    this.vx     = 0;
    this.vy     = 0;
    this.pin_x  = null;
    this.pin_y  = null;

    this.constraints = [];
};

Point.prototype.update = function (delta) {

    if (mouse.down) {

        var diff_x = this.x - mouse.x,
            diff_y = this.y - mouse.y,
            dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

        if (mouse.button == 1) {

            if (dist < mouse_influence) {
                this.px = this.x - (mouse.x - mouse.px) * 1.8;
                this.py = this.y - (mouse.y - mouse.py) * 1.8;
            }

        } else if (dist < mouse_cut) this.constraints = [];
    }

    this.add_force(0, gravity);

    delta *= delta;
    nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
    ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);

    this.px = this.x;
    this.py = this.y;

    this.x = nx;
    this.y = ny;

    this.vy = this.vx = 0;
};

Point.prototype.draw = function () {

    if (!this.constraints.length) return;

    var i = this.constraints.length;
    while (i--) this.constraints[i].draw();
};

Point.prototype.resolve_constraints = function () {

    if (this.pin_x != null && this.pin_y != null) {

        this.x = this.pin_x;
        this.y = this.pin_y;
        return;
    }

    var i = this.constraints.length;
    while (i--) this.constraints[i].resolve();

    this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
    this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};

Point.prototype.attach = function (point) {

    this.constraints.push(
        new Constraint(this, point)
    );
};

Point.prototype.remove_constraint = function (constraint) {

    this.constraints.splice(this.constraints.indexOf(constraint), 1);
};

Point.prototype.add_force = function (x, y) {

    this.vx += x;
    this.vy += y;
};

Point.prototype.pin = function (pinx, piny) {
    this.pin_x = pinx;
    this.pin_y = piny;
};

var Constraint = function (p1, p2) {

    this.p1     = p1;
    this.p2     = p2;
    this.length = spacing;
};

Constraint.prototype.resolve = function () {

    var diff_x  = this.p1.x - this.p2.x,
        diff_y  = this.p1.y - this.p2.y,
        dist    = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
        diff    = (this.length - dist) / dist;

    if (dist > tear_distance) this.p1.remove_constraint(this);

    var px = diff_x * diff * 0.5;
    var py = diff_y * diff * 0.5;

    this.p1.x += px;
    this.p1.y += py;
    this.p2.x -= px;
    this.p2.y -= py;
};

Constraint.prototype.draw = function () {

    ctx.moveTo(this.p1.x, this.p1.y);
    ctx.lineTo(this.p2.x, this.p2.y);
};

var Cloth = function () {

    this.points = [];

    var start_x = canvas.width / 2 - cloth_width * spacing / 2;

    for (var y = 0; y <= cloth_height; y++) {

        for (var x = 0; x <= cloth_width; x++) {

            var p = new Point(start_x + x * spacing, start_y + y * spacing);

            x != 0 && p.attach(this.points[this.points.length - 1]);
            y == 0 && p.pin(p.x, p.y);
            y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])

            this.points.push(p);
        }
    }
};

Cloth.prototype.update = function () {

    var i = physics_accuracy;

    while (i--) {
        var p = this.points.length;
        while (p--) this.points[p].resolve_constraints();
    }

    i = this.points.length;
    while (i--) this.points[i].update(.016);
};

Cloth.prototype.draw = function () {

    ctx.beginPath();

    var i = cloth.points.length;
    while (i--) cloth.points[i].draw();

    ctx.stroke();
};

function update() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    cloth.update();
    cloth.draw();

    requestAnimFrame(update);
}

function start() {

    canvas.onmousedown = function (e) {
        mouse.button  = e.which;
        mouse.px      = mouse.x;
        mouse.py      = mouse.y;
        var rect      = canvas.getBoundingClientRect();
        mouse.x       = e.clientX - rect.left,
        mouse.y       = e.clientY - rect.top,
        mouse.down    = true;
        e.preventDefault();
    };

    canvas.onmouseup = function (e) {
        mouse.down = false;
        e.preventDefault();
    };

    canvas.onmousemove = function (e) {
        mouse.px  = mouse.x;
        mouse.py  = mouse.y;
        var rect  = canvas.getBoundingClientRect();
        mouse.x   = e.clientX - rect.left,
        mouse.y   = e.clientY - rect.top,
        e.preventDefault();
    };

    canvas.oncontextmenu = function (e) {
        e.preventDefault();
    };

    boundsx = canvas.width - 1;
    boundsy = canvas.height - 1;

    ctx.strokeStyle = '#888';

    cloth = new Cloth();

    update();
}


    canvas  = document.getElementById('c');
    ctx     = canvas.getContext('2d');

    canvas.width  = 560;
    canvas.height = 350;

    start();

    </script>
    </body>
</html>
tomorrow_be_good
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android代码模拟按键事件
08-23
Android代码模拟按键事件，demo中以按数字键1为例子，响应power按键事件，系统进待机。按数字键1可以替换成接收消息，广播，接口回调，等等
撕衣服小游戏代码
weixin_30920597的博客
01-30 1222
public class MainActivity extends Activity { private ImageView iv; // 可以修改的位图 private Bitmap alertBitmap; private Canvas canvas; @Override protected void onCreate(Bundle savedInstanceState)...
55.模拟撕衣服游戏编辑图片
augfun的博客
11-14 1万+
撕衣服游戏的原理：原本有2个图片，一个原图片，一个被撕了衣服以后的图片。两个图片放在一起，原图片放在上面，收滑动的时候上面图片的像素点设置成透明，下面的图片自然露出来了。 布局文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too
Android之Canvas撕衣服
重心开始，重新开始
07-06 2051
前几篇都涉及到了Canvas，Paint，Bitmap的结合使用，这里就不多说了~ 现在我要写的是撕衣服的这个项目~ 其实这个项目只是涉及到了一张图片到另一张图片的变换 先看效果图： 布局文件也是俩张图片，一张穿了衣服的图片在没穿衣服的图片上面~ 布局代码： <RelativeLayout xmlns:android="http://schemas.android.com/ap
撕衣服代码IOS
10-20
2011年的代码，撕衣服游戏代码 源码 IOS版 手写例子
宅男神器——撕衣服
热门推荐
mmtmyyl的博客
11-09 1万+
给大家介绍一个简单的好玩的app应用程序--撕衣服 思路： 一、在布局文件中：               在中间放两张图片，上面一张为原图（撕衣服之前）的拷贝，下面一张为撕衣服之后的图片 二、在MainActivity中：               关心上面一张图片即撕衣服之前的控件，通过位图工厂获取它的位图，拷贝位图，然后创建画板和画笔，开始作画，然后将拷贝并画好的位图放到原图的位
Android 多媒体开发学习之撕衣服
半月旋空
07-30 1111
今天我们学习撕衣服。我先说一下撕衣服的原理： 撕衣服有2张图片，一张是美女穿外衣的图片，一张是美女穿内衣的图片。当我们手指滑动后，然后将美女穿外衣衣服的图片设置为透明色，这样下面的图片就显示出来了。 直接上代码： public class MainActivity extends Activity { private Bitmap bmpCopy; private Paint p
模拟退火算法的代码.zip
05-02
模拟退火代码
撕衣服软件代码
03-24
撕衣服类安卓代码，当年好火好火的软件，宅男最爱
3D版网页模拟衣服撕扯
12-10
html源码，其效果是3D版，HTML模拟衣服撕扯动画，很适合新手学习。
撕美女衣服源码安卓
07-08
撕美女衣服小游戏，采用当前热门的安卓开发技术，代码量少，简单易懂
扒衣服小游戏Demo
11-20
一个很简单的小游戏Demo，一个activity搞定。通过触摸事件实现，设置图片
模拟串口_单片机模拟串口代码_
09-29
实现51普通IO口设为串口000000000000
鼠标模拟 VB源代码
05-11
摘要:VB源码,系统相关,鼠标模拟 鼠标模拟，可模仿鼠标左键、右键、模拟鼠标中键等，选中演示相应功能的按钮，单击回车模拟鼠标事件。 运行环境：Windows/VB6
JAVA斗地代码模拟
04-23
上课时，做个一个小的斗地主模拟发牌，用于map的学习和理解，相当好用，里边有动画演示
HTML5模拟衣服撕扯动画
w1366352655的博客
12-04 339
HTML5模拟衣服撕扯动画 在线演示 本地下载 posted @ 2018-12-04 10:52 栖息地 阅读(...) 评论(...) 编辑 收藏
HTML5模拟衣服撕扯效果
w1366352655的博客
12-05 336
HTML5模拟衣服撕扯效果 在线演示 本地下载 posted @ 2018-12-05 20:17 栖息地 阅读(...) 评论(...) 编辑 收藏
蒙特卡洛模拟光通信代码
最新发布
04-27
蒙特卡洛模拟光通信代码一般包括以下几个步骤： 1. 定义光通信系统的参数，如光纤长度、发射功率、接收器灵敏度等； 2. 生成多个随机光子，并对每个光子进行传输过程的模拟，包括考虑光的衰减、散射、折射等影响； ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值