Author: jules

PROJECT 05 – WALLPAPER

sketch
function setup() {
    createCanvas(600, 500);
}

function draw() {
    background(214, 204, 135);

//stars 
    for(var x = 25; x <= 600; x += 150) {
        for(var y = 0; y <= 500; y += 160) {
            push();
            translate(x, y);
            poopiB(x, y);
            pop();
        }
   }

//pizza
    for(var x = -50; x <=600; x += 150) {
        for(var y = -50; y <= 500; y += 160) {
            push();
            translate(x, y);
            pizza(x, y);
            pop();
        }
    }
}

function poopiB(x, y) {
//head
    stroke(0);
    fill(255, 254, 143)
    rect(35, 70, 25, 70, 17)

//hat
    fill(0);
    rect(32, 65, 31, 8)
    rect(38, 35, 20, 30)

//hat detail
    fill(35, 105, 94)
    rect(38, 60, 20, 5)

//eyes
    fill(255);
    circle(35, 95, 18, 18);
    circle(60, 95, 18, 18);

//pupils
    strokeWeight(3);
    fill(0);
    point(35, 95);
    point(60, 95);

//nose
    strokeWeight(1);
    noFill();
    beginShape();
    curveVertex(44.5, 102);
    curveVertex(44.5, 102);
    curveVertex(45.5, 112);  
    curveVertex(47.5, 115);
    curveVertex(49.5, 112);
    curveVertex(50.5, 102);
    curveVertex(50.5, 102);
    endShape();

//mouth
    fill(105, 35, 37);
    beginShape();
    curveVertex(39, 118);
    curveVertex(39, 118);
    curveVertex(56, 118);
    curveVertex(56, 121);
    curveVertex(54, 122.5);
    curveVertex(47.5, 125);
    curveVertex(40.5, 122.5);
    curveVertex(39.5, 121);
    curveVertex(39, 119);
    curveVertex(39, 119);
    endShape();

    fill(202, 66, 68);
    beginShape();
    curveVertex(44.5, 124);
    curveVertex(44.5, 124);
    curveVertex(45, 122);
    curveVertex(46, 121);
    curveVertex(49, 120.5);
    curveVertex(52, 123.5);
    curveVertex(51, 124.5);
    endShape();

}

function pizza(x, y) {
//crust
    stroke(0);
    fill(208, 166, 116);
    triangle(28, 75, 60, 55, 85, 85);
    quad(24, 69.5, 85, 80, 85, 85, 24, 75);
    quad(24, 69.5, 33, 70.5, 60, 50, 58, 47);

//cheese
    fill(255, 248, 194);
    triangle(28, 70, 60, 50, 85, 80);

//pepperoni
    fill(223, 78, 73);
    circle(45, 67, 8, 8);
    circle(68, 70, 8, 8);
    circle(59, 60, 8, 8);


}

I love Rick and Morty, and I wanted to create a wallpaper of the additional characters that show up in certain episodes. One of my favorite characters is Mr. Poopybutthole. My wallpaper is inspired by a scene in the show where he is also surrounded by pizza.

Scene from Rick and Morty of Mr. Poopybutthole.

LO – 05: 3D COMPUTER GRAPHICS

Screenshot of Renders by @bijouhome_ on Instagram

@bijouhome_ on Instagram is an account which posts varieties of renderings of building interiors. I find their work to be extremely inspiring because although each rendering is different from another, there is a clear style and aesthetic to each design. The use of pastel colors, as well as the realistic, yet futuristic style is something I strive for in my work. Although I do not know much about the exact process of how the renders are generated, I would assume that Rhino, and V-Ray are two very important tools that are common when rendering for architecture. Knowing the challenges and difficulties of these two programs, I was especially inspired by the extent of which the tools can be used.

https://www.instagram.com/bijouhome_/

PROJECT 04 – STRING ART

sketch
var dx1;
var dy1; 
var dx2;
var dy2;
var numLines = 40;

function setup() {
    createCanvas(400, 300);
    background(0);

    line(400, 150, 400,  300)

    dx1 = (0 - 0)/numLines;
    dy1 = (200 - 0)/numLines;
    dx2 = (300 - 200)/numLines;
    dy2 = (50 - 400)/numLines;
}

//setting variables
function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 300;
    var x3 = 0;
    var y3 = 0;
    var x4 = -100;
    var y4 = height;
    var x5 = width;
    var y5 = height;

//blue and pink gradient
    for (var i = 0; i <= numLines; i += 1) {
        stroke(225-i*10, 125-i*10, 225  );
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

//orange and green gradient
    for (var j = 0; j <= 60; j ++) {
        stroke(100+j*10, 200, 140);
        line(x4, height, width, y4);
        x4 += width/20;
        y4 -= height/20;
    }

//green on bottom left
    for (var k = 0; k <= 30; k ++) {
        stroke(25, 255, 255-k*10);
        line(0, y3, x3, height);
        x3 += width/20;
        y3 += height/20;
    }

//pink top left
    for (var z = 0; z <= 20; z ++) {
        stroke(100+z*10, 0, 140);
        line(x5, 0, width, y5);
        x5 -= width/20;
        y5 -= height/20;
    }

}

For this project, I really wanted to test out how curvatures can warp lines into creating new dimensions. I also tried to emphasize the depth by using gradients.

LO – 04 : SOUND ART

François Quévillion – Algorithmic Drive, 2019

François Quévillon’s “Algorithmic Drive” is a project that I personally found to be very interesting. This project is an interactive installation that was inspired by cars and dash cams. It began with François collecting a large database of recordings from a camera attached to his car’s computer. The data collected includes information on location, orientation, speed, temperature, stabilitiy, etc. This data is fed into a sampling system that uses signal processing, data analysis, and computer vision algorithms that then begins to sort the content statistically. The information is mapped using a Uniform Manifold Approcimation and Projection dimension reduction technique.

This project was interesting to me because it utilizes data and information that surrounds us in our daily life, but is then used to create something new and creative.

Algorithmic Drive – Spectacular car(au)tonomy

PROJECT 03 – DYNAMIC DRAWING

sketch
function setup() {
    createCanvas(600, 450);


}

function draw() {

    if (mouseX < width / 2) {
        background(133, 199, 222);
    } else if (mouseX >= width / 2) {
        background(69, 123, 157);
    }
    noStroke();

    fill(230, 250, 252);
    circle (300, 225, -max(min(mouseX, 800), 0));

 //balloon string
    strokeWeight(3);
    fill(101, 101, 94);
    beginShape();
    curveVertex(20 + (mouseX - 50), 200);
    curveVertex(20 + (mouseX - 50), 200);
    curveVertex(15 + (mouseX - 50), 250);
    curveVertex(5 + (mouseX - 50), 280);
    curveVertex(5 + (mouseX - 50), 280);
    endShape();

//balloon
    fill(249, 112, 104);
    ellipse(20 + (mouseX - 50), 160, 65, 80);
    triangle(5 + (mouseX - 50), 210, 20 + (mouseX - 50), 200, 35 + (mouseX - 50), 210);

//bike

/*wheel*/
    strokeWeight(1);
    fill(255);
    ellipse(15 + (mouseX - 200), 400, 50, 50);
    ellipse(-55 + (mouseX - 200), 400, 50, 50);
/*skeleton*/
    stroke(0);
    line(-55 + (mouseX - 200), 400, -43 + (mouseX - 200), 370);
    line(-43 + (mouseX - 200), 370, 15 + (mouseX - 200), 350);
    line(15 + (mouseX - 200), 330, 20 + (mouseX - 200), 400);
    line(15 + (mouseX - 200), 350, -20 + (mouseX - 200), 400);
    line(-20 + (mouseX - 200), 400, -55 + (mouseX - 200), 400);
    line(-43 + (mouseX - 200), 370, -47 + (mouseX -  200), 350);
    line(-43 + (mouseX  - 200), 370, -15 + (mouseX - 200), 407);
/*seat&handle*/
    fill(0);
    rect(-55 + (mouseX - 200), 350, 20, 10, 20);
    rect(-20 + (mouseX - 200), 407, 7, 5, 5);
    rect(10 + (mouseX - 200), 330, 10, 7, 2);

//path
    noStroke();
    fill(187, 181, 189);
    rect(0, 425, 600, 200);

//bob on bike

/*body*/
    fill(153, 178, 221);
    noStroke();
    beginShape();
    curveVertex(-20 + (mouseX - 200), 275);
    curveVertex(-20 + (mouseX - 200), 275);
    curveVertex(-24 + (mouseX - 200), 280);
    curveVertex(-26 + (mouseX - 200), 280);
    curveVertex(-28 + (mouseX - 200), 300);
    curveVertex(-20 + (mouseX - 200), 320);
    curveVertex(-20 + (mouseX - 200), 340);
    curveVertex(-25 + (mouseX - 200), 350);
    curveVertex(-28 + (mouseX - 200), 350);
    curveVertex(-30 + (mouseX - 200), 350);
    curveVertex(-31 + (mouseX - 200), 350);
    curveVertex(-32 + (mouseX - 200), 350);
    curveVertex(-32 + (mouseX - 200), 350);
    curveVertex(-33 + (mouseX - 200), 350);
    curveVertex(-34 + (mouseX - 200), 350);
    curveVertex(-35 + (mouseX - 200), 350);
    curveVertex(-40 + (mouseX - 200), 350);
    curveVertex(-43 + (mouseX - 200), 350);
    curveVertex(-45 + (mouseX - 200), 350);
    curveVertex(-50 + (mouseX - 200), 350);
    curveVertex(-53 + (mouseX - 200), 350);
    curveVertex(-65 + (mouseX - 200), 340);
    curveVertex(-60 + (mouseX - 200), 300);
    curveVertex(-50 + (mouseX - 200), 280);
    curveVertex(-45 + (mouseX - 200), 277);
    curveVertex(-40 + (mouseX - 200), 277);
    curveVertex(-36 + (mouseX - 200), 278);
    curveVertex(-33 + (mouseX - 200), 276);
    curveVertex(-30 + (mouseX - 200), 274);
    curveVertex(-28 + (mouseX - 200), 272);
    curveVertex(-28 + (mouseX - 200), 272);
    endShape();

/*legs*/
    strokeWeight(1);
    stroke(153, 178, 221);
    line(-26 + (mouseX - 200), 350, -20 + (mouseX - 200), 380);
    line(-52 + (mouseX - 200), 350, -47 + (mouseX - 200), 380);
    line(-80 + (mouseX - 200), 320, -50 + (mouseX - 200), 300);
    line(-50 + (mouseX - 200), 310, -12 + (mouseX - 200), 290);

/*eyes*/
    noStroke();
    fill(0);
    ellipse(-47 + (mouseX - 200), 300, 5, 10);
    ellipse(-37 + (mouseX - 200), 298, 5, 10);
    

/*background shapes*/
    if (mouseX < 200) {
        fill(251, 216, 127);
    } else if (mouseX < 300) {
        fill(230, 170, 206);
    } else if (mouseX < 400) {
        fill(216, 241, 160);
    } else if (mouseX < 500) {
        fill(164, 145, 211);
    } else if (mouseX >= 500) {
        fill(224, 96, 126);
    }

    translate(width / 2, height / 2);
    rotate(PI / 3.0);
    rect(-26, -26, 12, 12);
    rect(-80, 80, 22, 22);
    rect(-36, 180, 32, 32);
    rect(10, 35, 18, 18);
    rect(100, -160, 20, 20);



}

I was inspired by a game I used to play all the time called Dumb Ways to Die. I found it challenging making sure different components weren’t overlapping each other in places I didn’t want them to be.

LO – 03 : COMPUTATIONAL FABRICATION

3D WOOD PANEL by WOOD-SKIN
Chalgrin by Quadri Fiore Architecture, Paris, France, 2019

Chalgrin by Quadri Fiore Architecture is an exploration on mesh sheets and wood-skin. The elegantly tessellated design creates a unique experience as an entrance and almost seems to warp the space.

The tessellation seamlessly flows with the space, so much so that the design takes even windows, arches, spotlights, and doors into consideration. This project was executed using Quadri Fiore’s custom MESH-SHEETS, which allow for the structure to wrap around the space the way that it does. The firm utilised their own program where they were able to abstract and manipulate the fabrication as needed.

This form of “wood-skin” is very commonly seen, especially in architecture. Creating forms which appear free flowing and random are often products of complex and intricate iterations, based solely on a system which allows for forms to be organic.

CHALGRIN – Paris, France

LO2

Muqarna Mutation, Mori Art Museum, Future and the Arts exhibition, 未来と芸術展
Muqarna Mutation at Mori Art Museum – by Kyungsub Shin

Michael Hansmeyer’s Muqarna Mutation installation at the Mori Art Museum is a striking piece which I found especially intricate and beautiful. Amongst the chaos which seems to take over the space, there is a sense of order and flow. As an architecture student, I enjoyed this piece because it explores the breadth of design ideas that can come from computational tools, as well as exemplifying how systems can be established and expanded from a very simple initial idea.

Hansmeyer is an architect, as well, who utilizes generative design as a way of rethinking design and its purpose. A big part of his process are the “happy accidents” that come along, ideas that usually take longer to discover. I think that being able to maximize new ideas because of the tools used, is something that is super fascinating.

The algorithmic composition in this project focuses on the designs of muqarna ceiling plans. It utilizes a “selective subdivision algorithm to generate and successively refine these plans”. Essentially, the project started with simply two contour lines outlining the space, then the algorithm subdivides the space into tiles, creating a rather complex grid system. This algorithm is layered on top to create the different levels and layers which can be seen in his project.

Hansmeyer’s artistic abilities are manifested in this piece very evidently. As an architect, maintaining and following a clear set of rules and system is key in creating a new design. More importantly, being able to abstract and develop the systems into layered and purposeful ideas becomes a challenge which many face in the design process. This project is a great example of being able to remain within the bounds of the system while creating an elaborate design.

http://www.michael-hansmeyer.com/muqarnas

PROJECT 02 – VARIABLE FACE

(click on the center of the canvas to change the faces)

sketch
//random colors used by all functions
var r;
var g;
var b;

//other variables
var rand_shape = 1;
var brow_shape = 1;
var eyeWidth = 20;
var eyeHeight = 40;
var nosehole = 20;
var mouthWidth = 60;
var mouthHeight = 30;
var ellipseWidth = 250;
var ellipseHeight = 300;
var pupilWidth = 5;
var pupilHeight = 10;


function setup() {
    createCanvas(640, 480); 
}

function draw() {
    background(180, 210, 231);
    var r = 0;
    var x = width / 2;
    var y = height / 2; 
    fill(0, 12);
    noStroke();


//eyes
    fill(0);
    ellipse(x - 40, y - 20, eyeWidth, eyeHeight);
    ellipse(x + 40, y - 20, eyeWidth, eyeHeight);

//pupils
    fill(255);
    ellipse(x - 40, y - 20, pupilWidth, pupilHeight);
    ellipse(x + 40, y - 20, pupilWidth, pupilHeight);

//mouth
    fill(255);
    beginShape();
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x, y + (mouthHeight*2));
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    endShape();

//brows
    strokeWeight(5);
    stroke(r, g);
    fill(r, g, 120);
    if (brow_shape == 1) {
        beginShape();
        curveVertex(x - 60, y - 60);
        curveVertex(x - 60, y - 60);
        curveVertex(x - 40, y - 70);
        curveVertex(x - 40, y - 70);
        endShape();

        beginShape();
        curveVertex(x + 60, y - 60);
        curveVertex(x + 60, y - 60);
        curveVertex(x + 40, y - 70);
        curveVertex(x + 40, y - 70);
        endShape();
    } else if (brow_shape == 2) {
        noFill();
        bezier(x - 50, y - 90, x - 50, y - 80, x - 25, y - 65, x - 25, y - 50);
        bezier(x + 50, y - 90, x + 50, y - 80, x + 25, y - 65, x + 25, y - 50);
    } else if (brow_shape == 3) {
        noFill();
        beginShape();
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();

        beginShape();
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();
    }


//face shape
    strokeWeight(1);
    stroke(r, g, b);
    fill(r, g, b, 120);
    if (rand_shape == 1) {
        ellipse(x, y, ellipseWidth, ellipseHeight);
    } else if (rand_shape == 2) {
        triangle(x - 200, y - 140, x + 200, y - 140, x, y + 140);
    } else if (rand_shape == 3) {
        rect(160, 100, x, y);
    } else {
        quad(x, y - 160, x + 160, y, x, y + 140, x - 160, y)
    }



//crown
    /*point(270, 103);
    point(320, 120);
    point(355, 110);
    point(370, 103);
    point(270, 103);
    point(270, 54);
    point(300, 75);
    point(320, 45);
    point(340, 75);
    point(370, 54);*/
    strokeWeight(1);

    fill(g, b, 200);
    beginShape();
    curveVertex(270, 103);
    curveVertex(270, 103);
    curveVertex(320, 120);
    curveVertex(355, 110);
    curveVertex(370, 103);
    curveVertex(370, 103);
    curveVertex(370, 54);
    curveVertex(370, 54);
    curveVertex(340, 75);
    curveVertex(340, 75);
    curveVertex(320, 45);
    curveVertex(320, 45);
    curveVertex(300, 75);
    curveVertex(300, 75);
    curveVertex(270, 54);
    curveVertex(270, 54);
    curveVertex(270, 103);
    curveVertex(270, 103);
    endShape();

}

function mousePressed() {
//face
    rand_shape = random([1, 2, 3, 4]);

//eyes
    eyeWidth = random(20, 60);
    eyeHeight = random(40, 80);

//pupil 
    pupilWidth = random(2, 10);
    pupilHeight = random(2, 10);

//mouth
    mouthWidth = random(20, 90);
    mouthHeight = random(20, 50);

//brows
    brow_shape = random([1, 2, 3]);

//changing colors
    var d = dist(mouseX, mouseY, 320, 240);
    if (d < 100) {
        r = random(255);
        g = random(255);
        b = random(255);

    }

}

Creating this was a fun process overall. I wanted to change my style up a bit and create a character that’s more abstract, so I used different shapes for the heads. I wanted the style to be more cartoon-y so I tried to use more pastel, and brighter colors in the color randomization. I learned a lot about different ways to randomize the varying components of my piece. A challenge I faced was definitely getting the colors to show up right.

PROJECT 01 – SELF PORTRAIT

portrait
function setup() {
    createCanvas(700, 500);
    background(247, 208, 245);
    var purple = color(202, 163, 246);
    var blue = color(0, 128, 255);
    var green = color(153, 255, 153);
    var yellow = color(255, 255, 153);
    var orange = color(255, 204, 153);
    var red  =  color(255,  153, 153);
    fill(purple);
    noStroke();
    circle(350, 250, 800);
    fill(blue);
    circle(350, 250, 700);
    fill(green);
    circle(350, 250, 600);
    fill(yellow);
    circle(350, 250, 500);
    fill(orange);
    circle(350, 250, 400);
    fill(red);
    circle(350, 250, 300);

}

function draw() {
    var skin = color(252, 224, 158);
    var white = color(255);
    var black = color(0);
    var brown = color(184, 134, 11);
    var pink = color(255, 102, 255);
    var light_pink = color(255, 204, 204);
    var dark_brown = color(102, 51, 0);
    var red  =  color(255,  153, 153);
    var orange = color(255, 204, 153);
    var light_blue = color(102, 178, 255);
    var neon_yllow = color(255, 255, 51);

//SHAPES
    noFill();
    strokeWeight(15);
    stroke(neon_yllow);
    bezier(95, 120, 20, 120, 100, 200, 25, 190);
    stroke(pink);
/*line(95, 130, 20, 130);
  line(100, 210, 25, 200);*/
    bezier(95, 130, 20, 130, 100, 210, 25, 200);
    stroke(pink);
    bezier(550, 470, 630, 290, 600, 550, 650, 370);
    stroke(neon_yllow);
    bezier(550, 480, 630, 300, 600, 560, 650, 380);
    strokeWeight(1);
    stroke(black);
    fill(white);
    triangle(75, 80, 90, 150, 140, 100);
    fill(black);
    triangle(65, 80, 80, 150, 130, 100);
    fill(white);
    triangle(600, 400, 630, 330, 680, 380);
    fill(black);
    triangle(605, 395, 635, 325, 685, 375);



//hair
    noStroke();
    fill(dark_brown);
    ellipse(350, 360, 460, 700)


//clothes
    noStroke();
    fill(light_blue);
    rect(180, 400, 340, 400, 50);

//face
    fill(skin);
    noStroke();
    ellipse(350, 250, 350, 380);

//hair
    fill(dark_brown);
    arc(350, 170, 300, 230, PI, 0);
    strokeWeight(2);
    stroke(black);
    fill(red);
    circle(230, 100, 35);
    circle(215, 125, 35);

//cheeks
    noStroke();
    fill(light_pink, 150);
    circle(230, 300, 93);
    fill(light_pink, 150);
    circle(470, 300, 93);

//freckles
    //leftside
    stroke(brown);
    strokeWeight(3);
    point(230, 320);
    point(240, 328);
    point(225, 280);
    point(195, 325);
    point(200, 295);
    point(237, 284);
    point(260, 310);
    
   //rightside 
    point(475, 320);
    point(460, 319);
    point(488, 295);
    point(462, 298);
    point(482, 334);
    point(452, 283);
    point(430, 320);
    point(478, 264);
    point(500, 318);

//eyes    
    strokeWeight(3);
    stroke(black);
    fill(white);
    circle(280, 230, 100);
    fill(white);
    circle(420, 230, 100);
    strokeWeight(1);
    stroke(black);
    fill(brown);
    circle(280, 230, 25);
    fill(brown);
    circle(420, 230, 25);
    fill(black);
    circle(280, 230, 15);
    fill(black);
    circle(420, 230, 15);
    fill(white);
    ellipse(275, 233, 8, 5);
    fill(white);
    ellipse(415, 233, 8, 5);

//eyelashes
    strokeWeight(3);
    stroke(black);
    noFill();
    arc(230, 220, 50, 50, 0-3*PI/2, PI);
    arc(470, 220, 50, 50, 0, 0-3*PI/2);

//mouth&nose
    strokeWeight(2);
    stroke(black);
    fill(light_pink);
    arc(350, 360, 35, 20, 0, PI);
    noFill();
    arc(350, 290, 35, 35, PI+PI/4, 11*PI/6)




}

LO-01 – MY INSPIRATION

Scene from Black Mirror: Bandersnatch by Netflix.

I found the interactive film “Black Mirror: Bandersnatch” extremely fascinating and inspiring. Bandersnatch is a psychological thriller about a programmer who begins questioning reality when developing a novel (titled Bandersnatch) into an interactive video game. The film itself is also an interactive experience, as the viewers have a role in controlling what happens next during “choice points”.

I found this project admirable because it begins to explore and push the boundaries of cinema and technology. Not only do both work in harmony, they are both able to bring the best out of each other; interweaving technology into cinema pushes the producers and writers to tackle new challenges and rethink many pretenses of a TV show. Introducing cinema to technologies, introduces not only viewers to the expansiveness of what technology can do, but editors and producers to the expansiveness of what they can do.

This film was created by Netflix, the team more specifically, involved Annabel Jones, Charlier Brooker, and David Slade. The process of creating this film also involved the actors, Will Poulter and Fionn Whitehad’s collaboration. Tackling a script with such a large amount of variations of outcome required a lot of exploration in the filming and plot writing. With this all in mind, they also had to make sure the variation of endings wasn’t too overbearing overall for the viewers. The process of which the plot began, started on Post-it notes, then progressed to a whiteboard. Following this, they used a programming tool called Twine. The script was both on paper, but also navigatable on Twine. Scrivener, Final Draft, and Microsoft Notepad were utilised during the process of creating as well. A flowchart was initially used during shooting but then thrown out because it ended up complicating things.

To tackle the interactive component for the viewers, Brooker and Jones had to actually develop a special technology with Netflix, so that the film plays seamlessly, instead of pausing when “choice points” came up. The system they used was one in which lighting, sound design, and aspect ratios change while viewers take the time to choose their options. The time constraint, music in the background, adds to the intensity of the film itself as well.

The interactive film was an idea that Netflix approached the producer and director in May 2017 with. Interactive films have existed prior to this, but the targeted audience was typically for children, with much more straight forward plots.