[vertices, colors]
const { imageToShapes, rectangleCloudShapes } = Fig.morph;
const image = new Image();
image.src = './logo.png';
image.onload = () => {
const [logo, logoColors] = imageToShapes({
image,
width: 0.7,
height: 0.7,
filter: c => c[3] > 0,
});
const cloud = rectangleCloudShapes({
width: 2,
height: 2,
num: logo.length / 2 / 6,
});
const m = figure.add({
make: 'morph',
points: [cloud, logo],
color: [logoColors, logoColors],
});
m.animations.new()
.delay(1)
.morph({ start: 0, target: 1, duration: 2 })
.start();
};
const { imageToShapes } = Fig.morph;
const micImage = new Image();
micImage.src = './mic.png';
const headphonesImage = new Image();
headphonesImage.src = './headphones.png';
let index = 0;
const loaded = () => {
index += 1;
if (index < 2) {
return;
}
const [mic, micColors] = imageToShapes({
image: micImage,
width: 0.7,
filter: c => c[3] > 0,
});
const [headphones, headphoneColors] = imageToShapes({
image: headphonesImage,
width: 0.7,
filter: c => c[3] > 0,
num: mic.length / 6 / 2,
});
const m = figure.add({
make: 'morph',
points: [mic, headphones],
color: [micColors, headphoneColors],
});
m.animations.new()
.delay(1)
.morph({ start: 0, target: 1, duration: 2 })
.start();
};
micImage.onload = loaded.bind(this);
headphonesImage.onload = loaded.bind(this);
imageToShapesmaps the pixels of an image to shapes that will be used to draw those pixels.All pixels in an image can be made shapes, or a
filterfunction can be used to only use desired pixels.The shapes can be rasterized in order (raster from top left to bottom right) or be in a random order.
The image pixel centers are mapped to some
widthandheightand aligned to a position relative to either all pixels in the original image, or just the filtered pixels. The shapes are centered on the pixel centers.This method is useful for including images in morphing effects. It should not be used to simply show an image (use a texture with some FigureElementPrimitive for this).