Author: yrt@andrew.cmu.edu

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Final Project 
//Section E

//storefront mockup
var mockup;
//input of camera variable
var cameraData;
//points for the hypotrochoid
var pixelPoints = 1000;
//location of hypotrochoid x position array
var placeCurvesX = [];
//location of hypotrochoid y position array
var placeCurvesY = [];
// array to store list of colors at 16 points
var getColors = [];
// array to store brightness of pixels at 16 points
var getBrightness =[];
// varible to move the 16 hypotrochoid's in indivudal rotation
var hypotrochoidsRotate = -1;
// scaled canvas for the interaction in the mockup
var SquareW = 154;

//lading the storefront mockup image
//vector image created by me with Adobe Illustrator 
function preload() {
    mockup = loadImage("https://i.imgur.com/pTMuI2T.png");
}
//connecting cameraData variable to createCapture
function setup() {
    createCanvas(600, 480);
    cameraData = createCapture(VIDEO);
    cameraData.hide();
    noStroke();
}

function draw() {
    background(172, 34, 104);
    //loading pixels into the canvas
    cameraData.loadPixels();
    //reflecting and scaling the camera data
    //when visitors move to the right/left, it properly reflects  movements
    push();
    translate(150, 0);
    scale(-1, 1);
    //sizing cameraData to the screen
    image(cameraData, 0,0, 154, 154);
    pop();
    //calling the hypotrochoids function to draw 16 hypotrochoids
    hypotrochoids(); 
    //scaling the image from imgur
    //placing it above hypotrochoids so that hypotrochoids dont go over the screen
    push();
    scale(0.24);
    image(mockup, 0, 0);
    pop();
}
//creating a function to draw a singular hypotrochoid
//setting four parameters for x position, y position, the curves color at one of the 16 points
//and the brightness of one of the 16 points
function drawCurve(x,y, curveColor, curveBrightness) {
    push();
    //translating with x and y for call parameters
    translate(x, y);
    //using the brightness in the map() of h and a to adjust size based on camera
    var h = map(curveBrightness - 100, 0, height, 0, curveBrightness + 100);
    var a = map(curveBrightness - 50, 0 , width, 0, curveBrightness + 50);
    //adding curveBrightness with 50 for more detail
    curveBrightness = curveBrightness + 50;
    var b = a / curveBrightness;
    //a small strokeWeight for clarity between curveBrightness
    strokeWeight(0.05);
    noFill();
    //using the curveColor parameter 
    //adding red and blue to display the hypotrochoids as pink/red
    stroke(curveColor + 200, 0, curveColor + 30);
    //calling all the variables in a nested for loop to draw the hypotrochoid
    beginShape();
    // adding 5 extra points to close the hypotrochoid
    for(var i = 0; i < pixelPoints + 5; i++) {
        var t = map(i, 0, pixelPoints, 0, TWO_PI); {
        x = (a-b) * cos(t) + h * cos(((a-b)/ b) * t)
        y = (a-b) * sin(t) - h * sin(((a-b) / b) * t)
        rotate(hypotrochoidsRotate);
        //slight rotation implemented
        hypotrochoidsRotate = hypotrochoidsRotate + 0.0001;
        //scale of hypotrochoids set to normal
        vertex(x, y);
    }
}
    endShape();
    pop();
}
// using nested for loops to place replicate hypotrochoid into 16 hypotrochoids
function hypotrochoids(){
//translating hypotrochoids function to fit into the square screen
push();
translate(302, 185);
    //4 in the width of the screen
    for(var i = 0; i < 4; i++) {
        //4 in the height of the screen
        for(var t = 0; t < 4; t++) {
            //locationofLoopi and LocationofLoopt space out the hypotrochoids
            var locationofLoopi = i * SquareW/4 + 10;
            var locationofLoopt = t * SquareW/4 + 10;
            //getting the color of locationofLoopi and LocationofLoop 2
            var colorLoop = get(locationofLoopi, locationofLoopt);
            //getting the brightness of the colors
            var sizeLoop = brightness(colorLoop);
            rectMode(CENTER);
            //implementing spacing into 16 hypotrochoids
            drawCurve(locationofLoopi, locationofLoopt, sizeLoop + 20, sizeLoop + 20);
            //pushing list into the arrays of location, color, and brightness of hypotrochoids
            placeCurvesX.push(locationofLoopi);
            placeCurvesY.push(locationofLoopt);
            getColors.push(colorLoop);
            getBrightness.push(sizeLoop);
        }
    }
//loop to call the length of the 16 points and implement the parameters from draw curve
    for(var a = 0; a < locationofLoopi.length; a++) {
        drawCurve(locationofLoopi[a], locationofLoopt[a], getColors[a], getBrightness[a]);
    }
pop();
}

For my final project, I wanted to explore the opportunities in which I can apply computational practices into a physical space. I decided to focus on creating a reactive storefront using a camera to show the movement of visitors in a visually intriguing way. To inspire a creative direction for the storefront, I created an Athletic Clothing brand called ové. Ové derives from the french word of l’oeuvre meaning work. Additionally, Ové is the shared characters of Move and Woven. To make the hypotrochoid curves reactive to the camera’s data, I used 16 specific points of pixel brightness and color. Through this, I create an interactive storefront that reacts to traffic and ultimately would entice people to enter the store.