function createCloth() {
//draw the image to the canvas...
context.drawImage(img, 0, 0);
//now grab its pixel data
var imageData = context.getImageData(0, 0, img.width, img.height);
//make a new image buffer for direct manipulation
// var buffer = new ImageBuffer(imageData);
//util to create a lightweight object -- { r:0, g:0, b:0, a:0 }
var particles = [];
// for (var y=0; y<img.height; y+=spacing) {
// for (var x=0; x<img.width; x+=spacing) {
// var color = ImageBuffer.createColor();
// buffer.getPixelAt(x, y, color);
// particles.push({
// color: color,
// x: x,
// y: y
// });
// }
// }
context.clearRect(0, 0, width, height);
world.points = [];
// var rows = Math.floor( clothHeight/spacing );
// var cols = Math.floor( clothWidth/spacing );
var rows = Math.floor(img.height / spacing);
var cols = Math.floor(img.width / spacing);
var color = ImageBuffer.createColor();
console.log("ROWS", rows, "COLS", cols, "IMGDATALEN", imageData.data.length)
for (var y = 0; y < rows; y++) {
for (var x = 0; x < cols; x++) {
var p = new PointMass(start_x + x * spacing, start_y + y * spacing, mass);
// p.color = "red";
var xi = x*spacing,
yi = y*spacing;
var offset = ~~(xi + (yi * imageData.width));
offset *= 4;
// buffer.getPixelAt(xi, yi, color);
p.color = "rgb("+
~~imageData.data[offset] +", "+
~~imageData.data[offset+1]+", "+
~~imageData.data[offset+2]+")";
// console.log(x*spacing, y*spacing);
// p.color = "rgba("+color.r+", "+color.g+", "+color.b+", "+(color.a/255)+")";
var edge = !usePins
? (y === 0)
: (y === 0 || x === 0 || y === rows-1 || x === cols-1);
var size = spacing + ~~rand(-8, 8);
p.size = size;
if (x!==0)
p.attach(world.points[world.points.length - 1], size, stiff, tear);
if (edge)
p.pin(p.position.x, p.position.y);
if (y !== 0)
p.attach(world.points[ x + (y - 1) * (cols)], size, stiff, tear);
world.points.push(p);
}
}
console.log(xi, yi);
}
setup: function(width, height, spacing) {
var particles = this.particles;
//clear points
particles.length = 0;
this.buffer.width = width;
this.buffer.height = height;
//setup properties
this.width = width;
this.height = height;
spacing = spacing || 10;
this.spacing = spacing;
var start_x = 0;
var start_y = 0;
var usePins = this.usePins; // maybe want to play with this later
//move these out
var stiff = this.stiffness,
mass = this.mass,
tear = this.tear; //at what distance does a constraint "tear" ?
var rows = Math.floor(height / spacing);
var cols = Math.floor(width / spacing);
console.log(rows, cols);
//create fabric
for (var y = 0; y < rows; y++) {
for (var x = 0; x < cols; x++) {
var p = new PointMass(start_x + x * spacing, start_y + y * spacing, mass);
//whether to pin to edge
var edge = !usePins
? (y === 0)
: (y === 0 || x === 0 || y === rows-1 || x === cols-1);
//size of this particle
var size = spacing;
if (this.randomizeSize) {
size += ~~rand(this.sizeLow, this.sizeHigh);
}
var other;
if (x!==0) {
other = particles[particles.length - 1];
if (other) {
p.attach(other.pointMass, size, stiff, tear);
}
}
if (edge)
p.pin(p.position.x, p.position.y);
if (y !== 0) {
other = particles[ x + (y - 1) * (cols)];
if (other)
p.attach(other.pointMass, size, stiff, tear);
}
// var xi = x*spacing,
// yi = y*spacing;
var particle = new Particle(x, y, p, size);
particles.push(particle);
}
}
},