Lego_Render

Traditional methods of visualization and texturing often lack interactivity and intuitive exploration.

We made a user-friendly tool for experiencing digital textures with a physical interface.

Making an Interface -> Capturing Colors -> Displaying -> Texture Experimentation -> Display -> Compose + Capture

1. Mapping Color.

function getColorCategory(c) { let h = hue(c); let s = saturation(c); let b = brightness(c); if ((s <= 10) && (0 <= b < 10)) { return 'shadows'; } else if ((s > 5 && s <= 100) && (b > 10 && b < 90)) { if (h >= 330 || h < 15) { return 'red'; } else if (h >= 15 && h < 30) { return 'orange'; } else if (h >= 30 && h < 65) { return 'yellow'; } else if (h >= 65 && h < 145) { return 'green'; } else if (h >= 145 && h < 190) { return 'cyan'; } else if (h >= 190 && h < 245) { return 'blue'; } else if (h >= 245 && h < 285) { return 'purple'; } else if (h >= 285 && h < 330) { return 'pink'; } } else if ((s <= 10) && (b >= 90)) { return 'bright'; } else { return 'unknown'; } } }

2. Displaying.

} else if (colorCategory === 'yellow') { // Draw yellow flowers paintCanvas.push(); paintCanvas.strokeWeight(1); //no fill paintCanvas.noFill(); paintCanvas.stroke(255, 213, 0, 30); paintCanvas.translate(mappedX, mappedY); for (let i = 0; i < 10; i++) { paintCanvas.ellipse(0, 10, 4, 8); paintCanvas.rotate(PI / 5); } paintCanvas.pop(); }

3. Experimenting with textures (like grass).

else if (colorCategory === 'green') { // Draw organic-looking grass with curves paintCanvas.push(); let grassCount = 5; let bladeWidth = max(brushSize / 10, 1); let bladeHeight = brushSize/2; let colorVariation = 20; // Slight color variation for natural effect for (let i = 0; i < grassCount; i++) { let bladeX = mappedX + random(-brushSize / 2, brushSize / 2); let bladeY = mappedY; let curveHeight = random(bladeHeight * 0.8, bladeHeight * 1.2); // Vary blade height let curveBend = random(-5, 5); // Amount of curve bending let rotation = radians(random(-5, 5)); // Rotation angle in degrees paintCanvas.translate(bladeX, bladeY); paintCanvas.rotate(rotation); let bladeColor = color(53 + random(-colorVariation, colorVariation), 191 + random(-colorVariation, colorVariation), 74 + random(-colorVariation, colorVariation), 60); paintCanvas.stroke(bladeColor); paintCanvas.strokeWeight(bladeWidth); paintCanvas.noFill(); // Draw a curved blade of grass using Bezier paintCanvas.beginShape(); paintCanvas.vertex(0, 0); paintCanvas.bezierVertex(curveBend, -curveHeight * 0.2, curveBend, -curveHeight * 0.2, 0, -curveHeight); paintCanvas.endShape(); paintCanvas.rotate(-rotation); paintCanvas.translate(-bladeX, -bladeY); // Reset translation for next blade } paintCanvas.pop();

Making Pictures:

Overlaying:

Lighting:

Adding to it:

Next Steps:

  • Removing excess noise / Better color recognition:

  • Adding 3D elements [like our 1st assignment]