html5 柔性字体,HTML5 Playground.js/Verlet.js 柔性多边形

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

"use strict";

VerletJS.prototype.star = function(origin, radius, segments, spokeStiffness, treadStiffness, oddAngle) {

var stride = (2 * Math.PI) / segments;

var i;

var composite = new this.Composite();

for (i = 0; i < segments; ++i) {

var theta = i * stride;

console.log(theta);

if (i % 2 !== 0 ? true : false) {

composite.particles.push(new Particle(new Vec2(origin.x + Math.cos(theta) * oddAngle, origin.y + Math.sin(theta) * oddAngle)));

} else {

composite.particles.push(new Particle(new Vec2(origin.x + Math.cos(theta) * radius, origin.y + Math.sin(theta) * radius)));

}

}

var center = new Particle(origin);

composite.particles.push(center);

for (i = 0; i < segments; ++i) {

composite.constraints.push(new DistanceConstraint(composite.particles[i], composite.particles[(i + 1) % segments], treadStiffness));

composite.constraints.push(new DistanceConstraint(composite.particles[i], center, spokeStiffness));

composite.constraints.push(new DistanceConstraint(composite.particles[i], composite.particles[(i + 5) % segments], treadStiffness));

}

this.composites.push(composite);

return composite;

};

DistanceConstraint.prototype.draw = function(ctx, color) {

ctx.beginPath();

ctx.moveTo(this.a.pos.x, this.a.pos.y);

ctx.lineTo(this.b.pos.x, this.b.pos.y);

ctx.strokeStyle = color;

ctx.stroke();

};

Particle.prototype.draw = function(ctx, color) {

ctx.beginPath();

ctx.arc(this.pos.x, this.pos.y, 2, 0, 2 * Math.PI);

ctx.fillStyle = color;

ctx.fill();

};

var app = playground({

scale: 1,

smoothing: false,

create: function() {

this.sim = new VerletJS(this.width, this.height, this.layer.canvas);

this.sim.ctx = this.layer.context;

var star1 = this.sim.star(new Vec2(100, 150), 50, 10, 0.3, 0.9, 30);

var star2 = this.sim.star(new Vec2(200, 100), 50, 10, 0.3, 0.9, 20);

var star3 = this.sim.star(new Vec2(300, 0), 50, 10, 0.3, 0.9, 15);

this.colorAngle = 0;

},

step: function(dt) {

this.sim.frame(16);

this.colorAngle += 2;

this.colorAngle = this.colorAngle % 360;

},

render: function(dt) {

var i,

c,

index = 0;

this.layer.clear('rgba(24,24,24,0.5');

for (c in this.sim.composites) {

if (this.sim.composites[c].drawConstraints) {

this.sim.composites[c].drawConstraints(this.layer.context, this.sim.composites[c]);

} else {

var constraints = this.sim.composites[c].constraints;

for (i in constraints)

constraints[i].draw(this.layer.context, 'hsl(' + (this.colorAngle + (i * 5) + (index * 25)) + ', 50%, 50% )');

}

if (this.sim.composites[c].drawParticles) {

this.sim.composites[c].drawParticles(this.layer.context, this.sim.composites[c]);

} else {

var particles = this.sim.composites[c].particles;

for (i in particles)

particles[i].draw(this.layer.context, 'hsl(' + (this.colorAngle + (i * 5) + (index * 25)) + ', 50%, 50% )');

}

index++;

}

var nearest = this.sim.draggedEntity || this.sim.nearestEntity();

if (nearest) {

this.layer.beginPath();

this.layer.context.arc(nearest.pos.x, nearest.pos.y, 8, 0, 2 * Math.PI);

this.layer.strokeStyle(this.sim.highlightColor);

this.layer.stroke();

}

}

});