p5+matter实现拖动薯片到油锅里炸一炸交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：拖放
代码描述：p5+matter实现拖动薯片到油锅里炸一炸交互效果代码，拖动试试。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

 
  
<style>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #fee096;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.height-warning {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 10;
}

@media(max-height: 499px) {
  .height-warning {
    opacity: 1;
  }
}

.instructions {
  display: none;
  line-height: 26px;
}

.instructions a {
  color: #7f6e4a;
}

@media(min-width: 768px) {
  .instructions {
    z-index: 5;
    position: absolute;
    top: 20px;
    left: 20px;
    color: #b79e6a;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.010em;
  }
}
</style>




</head>

<body >

  <div class="height-warning"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/matter.0.17.1.js"></script>
      <script>
// Module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body,
    Constraint = Matter.Constraint,
    Composite = Matter.Composite,
    Composites = Matter.Composites,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    Events = Matter.Events,
    Vertices = Matter.Vertices;

var engine = Engine.create();
var world = engine.world;

var floor;
var cup;
var cupLeft;
var cupRight;
var cupHandle;

var chain = null;
var heatLines = [];

var distanceToCup = 10000;
var distanceFromCup = {size: 500, towards: true};
var firstAnimation = {max: 241, min: 171, percent: 1};
var secondAnimation = {max: 170, min: 100, percent: 0};
var thirdAnimation = {max: 241, min: 100, percent: 0};



// ---------------
// Box Constructor
// ---------------

function Box(x, y, w, h, options) {
  this.w = w;
  this.h = h;
  this.body = Bodies.rectangle(x, y, w, h, options);

  World.add(world, this.body);
}



//
function calculateLinks() {
  // 77 is the offset from the bottom and the top
  // 200 is the amount of space we want between the marshmallow and cup when hanging
  var spaceLeft = window.innerHeight - (125 + 100 + 77 + 200);
  var links = spaceLeft / 26;

  if(links < 3) {
    return Math.ceil(3);
  } else if(links > 6) {
    return Math.ceil(6);
  } else {
    return Math.ceil(links);
  }
}



// ------------
// Create chain
// ------------

function CreateChain(x, y, chainLinks, linkLength) {
  this.x = x;
  this.y = y;
  this.hinges = [];
  this.constraints = [];
  this.chainLinks = chainLinks;
  this.linkLength = linkLength;
}

CreateChain.prototype.remove = function() {
  for(let i = 0; i < this.constraints.length; i++) {
    World.remove(world, this.constraints[i]);
  }

  chain = null;
};

CreateChain.prototype.init = function() {
  // Create hinges
  for(var i = 0; i < this.chainLinks; i++) {
    var staticCheck = (i === 0) ? true : false ;

    var anchor = new Box(this.x, this.y + (this.linkLength * i), 5, 5, {
      isStatic: staticCheck,
      collisionFilter: {
        category: 0x0001
      }
    });

    this.hinges.push(anchor);
  }

  // Create links between hinges
  for(let i = 0; i < this.hinges.length; i++) {
    var constraint;

    if(i === this.chainLinks - 1) {
      constraint = Constraint.create({
        bodyA: this.hinges[i].body,
        bodyB: marshmallow.body,
        pointB: { x: 0, y: (marshmallow.h/2 * -1) + 12 },
        length: this.linkLength,
        damping: 0.5,
        stiffness: 0.1,
        label: 'marshmallowAttachment'
      });
    } else {
      constraint = Constraint.create({
        bodyA: this.hinges[i].body,
        bodyB: this.hinges[i + 1].body,
        length: this.linkLength,
        damping: 0.5,
        stiffness: 0.1
      });
    }

    this.constraints.push(constraint);
    World.add(world, constraint);
  }
};

function createChain() {
  chain = new CreateChain(width/2, 50, calculateLinks(), 10);
  chain.init();
}



// --------------
// Heat particles
// --------------

function HeatParticle(x, y) {
  this.position = createVector(x, y);
  this.index = 0;
}

HeatParticle.prototype.render = function() {
  push();
  noStroke();
  fill('#f0d38d');
  ellipse(this.position.x, this.position.y, this.parent.particleSize);
  pop();
};

HeatParticle.prototype.updatePos = function() {
  this.position.y -= 0.5;
  this.position.x = Math.sin((frameCount + this.index/0.4) / 35) * 10 + this.parent.position.x;
};

HeatParticle.prototype.checkPos = function() {
  if(this.position.y < this.parent.position.y - this.parent.height) {
    this.reset();
  }
};

HeatParticle.prototype.reset = function() {
  this.parent.particleIndex += 1;
  this.index = this.parent.particleIndex;
  this.position.y = this.parent.position.y;
};



// ----------
// Heat lines
// ----------

function HeatLine(x, y, height, particleSize) {
  this.position = createVector(x, y);
  this.particles = [];
  this.particleIndex = 0;
  this.height = height;
  this.particleSize = particleSize;
}

HeatLine.prototype.render = function() {
  for(var i = 0; i < this.particles.length; i++) {
    this.particles[i].updatePos();
    this.particles[i].render();
    this.particles[i].checkPos();
  }
};

HeatLine.prototype.init = function() {
  var particleCount = this.height / (this.particleSize / 6);

  for(var i = 0; i < particleCount; i++) {
    this.particleIndex += 1;

    var particle = new HeatParticle(this.position.x, this.position.y + (i * this.particleSize / 6));
        particle.index = this.particleIndex;
        particle.parent = this;

    this.particles.push(particle);
  }
};

function populateHeatLines() {
  heatLines.push(new HeatLine(cup.body.position.x, cup.body.position.y - cup.h/2, 50, 5));
  heatLines.push(new HeatLine(cup.body.position.x - 60, cup.body.position.y - cup.h/2, 50, 5));
  heatLines.push(new HeatLine(cup.body.position.x + 60, cup.body.position.y - cup.h/2, 50, 5));

  for(var i = 0; i < heatLines.length; i++) {
    heatLines[i].init();
  }
}



// -----------
// Cup + Floor
// -----------
// Change this to an object since we don't need it to construct anything

function CupFloor() {}

CupFloor.prototype.destroy = function() {
  World.remove(world, [
    floor.body,
    cup.body,
    cupLeft.body,
    cupRight.body,
    cupHandle.body,
  ]);

  floor = null;
  cup = null;
  cupLeft = null;
  cupRight = null;
  cupHandle = null;
};

CupFloor.prototype.init = function() {
  // All of the magic numbers here are to position the elements relative to the marshmallow body
  floor = new Box(width/2, height - 31.75, 320, 3.5, {isStatic: true, collisionFilter: {category: 0x0002}});
  cup = new Box(width/2, height - 93, 259, 125.5, {isStatic: true, isSensor: true, label: 'cup', collisionFilter: {category: 0x0002}});
  cupLeft = new Box(width/2 - 134.5, height - 93, 10, 125.5, {isStatic: true, collisionFilter: {category: 0x0002}});
  cupRight = new Box(width/2 + 134.5, height - 93, 10, 125.5, {isStatic: true, collisionFilter: {category: 0x0002}});
  cupHandle = new Box(width/2 + 153, height - 114, 31, 60.5, {isStatic: true, collisionFilter: {category: 0x0002}});
};

var cupFloor = new CupFloor();



// ---------
// P5 Resize
// ---------

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

  cupFloor.destroy();
  cupFloor.init();

  heatLines = [];
  populateHeatLines();

  marshmallow.body.isStatic = true;
  marshmallow.body.angle = 0;

  if(chain) {
    chain.remove();
  }
  createChain();

  marshmallow.body.isStatic = false;

  Body.setVelocity(marshmallow.body, {
    x: 0,
    y: 0
  });

  marshmallow.angularVelocity = 0;
  marshmallow.angularSpeed = 0;

  firstAnimation.percent = 0;
  secondAnimation.percent = 0;
  thirdAnimation.percent = 0;
}



// --------
// P5 Setup
// --------

function setup() {

  // Setup the canvas
  var canvas = createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);

  // Setup the mouse events
  var mouse = Mouse.create(canvas.elt);
      mouse.pixelRatio = pixelDensity();

  var mouseConstraint = MouseConstraint.create(engine, {mouse: mouse, constraint: {stiffness: 0.2}});
      mouseConstraint.collisionFilter.category = 0x0002;

  World.add(world, mouseConstraint);

  // Load all of the image assets
  marshmallowBody = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/body.png');
  floorImg = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/ground.png');
  cupImg = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/cup.png');
  cupHandleImg = loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/cupHandle.png');

  // Create the boundaries
  cupFloor.init();


  // -----------
  // Marshmallow
  // -----------
  // The marshmallow code below is very messy and should be refactored into a constructor

  marshmallow = new Box(width/2, 0, 80, 100, {
    density: 0.00001,
    label: 'marshmallow',
    collisionFilter: {
      category: 0x0001,
      mask: 0x0002
    }
  });

  createChain();

  armLeft = Bodies.circle(width/2 - 40, 300, 5, {
    collisionFilter: {
      category: 0x0001
    },
    density: 0.00001
  });

  armRight = Bodies.circle(width/2 + 40, 300, 5, {
    collisionFilter: {
      category: 0x0001
    },
    density: 0.00001
  });

  var legRight = Bodies.circle(width/2 + 20, 300 + 50, 0.1, {
    collisionFilter: {
      category: 0x0001
    },
    density: 0.00001
  });

  var legLeft = .........完整代码请登录后点击上方下载按钮下载查看