week 14:wild week
Embroidery
For this week’s assignment, which was the “wild week,” we were given the freedom to choose from a variety of projects to explore. I decided to participate in the embroidery session because I have a strong interest in fabrics and the different techniques used to produce them. Embroidery offered a hands-on opportunity to understand how patterns and textures are created on textiles, and how design ideas can be translated into physical forms. Working with threads, needles, and fabric allowed me to see the precision and care required for detailed work, as well as the creative possibilities that emerge when combining color, texture, and structure. This session also provided insight into both traditional craftsmanship and modern techniques in textile production, helping me appreciate the skill involved and inspiring new ideas for incorporating fabric-based techniques into future projects.
let img;
let shadowGraphics;
let thresholdSlider;
let sizeSlider; // new slider for circle size
let uploaded = false;
let downloadBtn;
function setup() {
createCanvas(600, 600);
background(30);
// Upload image
createFileInput(handleFile).position(10, 10);
// Shadow threshold slider
thresholdSlider = createSlider(10, 200, 80);
thresholdSlider.position(10, 40);
thresholdSlider.style("width", "300px");
// Circle size slider
sizeSlider = createSlider(5, 100, 30); // min 5px, max 100px, default 30
sizeSlider.position(10, 70);
sizeSlider.style("width", "300px");
// Download button
downloadBtn = createButton("Download Circles");
downloadBtn.position(320, 40);
downloadBtn.mousePressed(downloadCircles);
}
function draw() {
background(30);
if (!uploaded) {
fill(200);
textAlign(CENTER, CENTER);
textSize(16);
text("Upload an image to convert shadows to circles", width / 2, height / 2);
return;
}
// Draw the circles representing shadows
image(shadowGraphics, 0, 0, width, height);
fill(255);
noStroke();
textSize(14);
text("Shadow threshold: " + thresholdSlider.value(), 10, height - 40);
text("Circle size: " + sizeSlider.value() + " px", 10, height - 20);
}
// Handle uploaded file
function handleFile(file) {
if (file.type === "image") {
img = loadImage(file.data, () => {
processShadowsToCircles();
uploaded = true;
});
}
}
// Convert shadow pixels to circles
function processShadowsToCircles() {
if (!img) return;
shadowGraphics = createGraphics(img.width, img.height);
shadowGraphics.background(255); // white background
shadowGraphics.noStroke();
shadowGraphics.fill(0); // black circles
img.loadPixels();
let threshold = thresholdSlider.value();
let circleSize = sizeSlider.value();
for (let y = 0; y < img.height; y += circleSize) {
for (let x = 0; x < img.width; x += circleSize) {
let index = (x + y * img.width) * 4;
let r = img.pixels[index];
let g = img.pixels[index + 1];
let b = img.pixels[index + 2];
let brightnessValue = (r + g + b) / 3;
if (brightnessValue < threshold) {
// Draw circle at this position
shadowGraphics.ellipse(x, y, circleSize, circleSize);
}
}
}
}
// Re-process if threshold or circle size changes
function mouseReleased() {
if (uploaded) processShadowsToCircles();
}
// Download result
function downloadCircles() {
if (shadowGraphics) shadowGraphics.save("shadow_circles.png");
}