143 lines
3.9 KiB
JavaScript
143 lines
3.9 KiB
JavaScript
var imageURL;
|
|
var shirt;
|
|
var colors = ["", "", "", "", "", "", "", "", ""];
|
|
var img = "";
|
|
var paths1 = [
|
|
"M 200 400 C 200 310 190 280 260 200 C 330 140 310 210 400 200 ",
|
|
"M 200 400 C 200 310 190 280 290 310 C 390 340 310 190 400 200 ",
|
|
"M 200 400 C 200 330 150 330 230 290 C 370 220 210 80 130 160 Q 30 260 160 310 C 290 390 210 190 400 200 "
|
|
];
|
|
var paths2 = [
|
|
"M 0 200 C 180 190 190 280 230 230 C 260 180 190 150 200 0 ",
|
|
"M 0 200 C 90 210 60 160 160 200 C 310 250 210 100 200 0 ",
|
|
"M 0 200 C 90 210 60 160 30 120 C 0 60 210 100 200 0 ",
|
|
"M 0 200 C 90 210 20 310 100 280 C 310 250 210 100 130 160 Q 40 240 160 310 C 290 390 380 230 200 0 "
|
|
];
|
|
var pattern = document.getElementById("pattern");
|
|
document.body.classList.add("loading");
|
|
drawShirt();
|
|
|
|
function preload() {
|
|
shirt = loadModel("https://assets.codepen.io/383755/shirt.obj", true);
|
|
}
|
|
|
|
function setup() {
|
|
reset();
|
|
}
|
|
|
|
function reset() {
|
|
createCanvas(windowWidth, windowHeight, WEBGL);
|
|
img = loadImage(imageURL);
|
|
}
|
|
|
|
function draw() {
|
|
background(255, 255, 255, 0);
|
|
ambientLight(180);
|
|
directionalLight(255, 255, 255, width / 2, height / 2, 0);
|
|
rotateY(frameCount / 40);
|
|
noStroke();
|
|
rotateX(15.6);
|
|
scale(2, 2, 2);
|
|
model(shirt);
|
|
texture(img);
|
|
textureMode(IMAGE);
|
|
textureWrap(CLAMP);
|
|
}
|
|
|
|
function windowResized() {
|
|
resizeCanvas(windowWidth, windowHeight);
|
|
}
|
|
|
|
function drawShirt() {
|
|
document.body.style.setProperty("--contrast", Math.floor(Math.random() * 10));
|
|
pattern.style.setProperty("--cellcount", Math.floor(Math.random() * 3) + 7);
|
|
pattern.style.setProperty("--stroke", Math.floor(Math.random() * 25) + 5);
|
|
pattern.style.setProperty(
|
|
"--color1",
|
|
"rgba(" +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
1 / (Math.floor(Math.random() * 5) + 1) +
|
|
")"
|
|
);
|
|
pattern.style.setProperty(
|
|
"--color2",
|
|
"rgba(" +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
1 / (Math.floor(Math.random() * 5) + 1) +
|
|
")"
|
|
);
|
|
colors.forEach(function (part, index) {
|
|
this[index] =
|
|
"rgba(" +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
Math.floor(Math.random() * 255) +
|
|
"," +
|
|
1 / (Math.floor(Math.random() * 5) + 1) +
|
|
")";
|
|
}, colors);
|
|
document.querySelectorAll(".cell").forEach((cell) => {
|
|
for (let i = 0; i < colors.length; i++) {
|
|
cell.style.setProperty("--color" + i, colors[i]);
|
|
}
|
|
cell.style.setProperty("--rotate", Math.floor(Math.random() * 360) + 1);
|
|
cell.style.setProperty(
|
|
"--rotate2",
|
|
Math.floor(Math.random() * 360) + 1 + "deg"
|
|
);
|
|
cell.style.setProperty("--scale", Math.floor(Math.random() * 5) + 1);
|
|
cell.style.setProperty("--scale2", Math.floor(Math.random() * 5) + 1);
|
|
cell.style.setProperty("--distance", Math.floor(Math.random() * 25) + 10);
|
|
cell.style.setProperty("--distance2", Math.floor(Math.random() * 25) + 10);
|
|
});
|
|
|
|
document.querySelectorAll(".cellsvg1").forEach((svg) => {
|
|
svg.setAttribute("d", paths1[Math.floor(Math.random() * 3) + 0]);
|
|
});
|
|
|
|
document.querySelectorAll(".cellsvg2").forEach((svg) => {
|
|
svg.setAttribute("d", paths2[Math.floor(Math.random() * 4) + 0]);
|
|
});
|
|
html2canvas(document.getElementById("pattern"), {
|
|
useCORS: true
|
|
}).then(function (canvas) {
|
|
imageURL = canvas.toDataURL("image/jpg");
|
|
});
|
|
}
|
|
|
|
document.addEventListener(
|
|
"click",
|
|
function (event) {
|
|
document.body.classList.add("loading");
|
|
drawShirt();
|
|
setTimeout(() => {
|
|
reset();
|
|
document.body.classList.remove("loading");
|
|
}, 1000);
|
|
},
|
|
false
|
|
);
|
|
|
|
window.addEventListener(
|
|
"load",
|
|
function (event) {
|
|
drawShirt();
|
|
setTimeout(() => {
|
|
reset();
|
|
document.body.classList.remove("loading");
|
|
}, 5000);
|
|
},
|
|
false
|
|
); |