Hannah K-Final Project


var ySpeed = 1;
var countOfEspresso = 0; // Keeps track of how many total espresso shots

// All var for slider
var offset = 0.5;
var barX = offset;
var barY;
var barW;
var barH = 100;
var sliderX = offset;
var sliderY;
var sliderW = 115;
var sliderH = 100;
var modifer = 40;

// Espresso Array
var espresso = [];
var numEspresso = 10; // Initial number of espresso shots

function setup() {
    createCanvas(600, 425);
    for(i = 0; i < numEspresso; i++) {
      var newEspresso = new Espresso();

function draw() {
    background(175, 238, 238);
    text("HOW MUCH COFFEE SHOULD YOU DRINK?", 40, 40);

    // Area of slider - Same color as background so slider 
    // Is not actually visible
    // Relied on Lab Week 3 to create slider

    // Create divider
    stroke(210, 210, 210);
    line(0, barY-1, width, barY-1);
    text("^ Catch before this line! ^", width/2-100, barY+20);

    // Actual slider (Will be the espresso cup in this case)
    rect(sliderX, sliderY, sliderW, sliderH);

    // The following lines of help to create the cup shape
    triangle(sliderX, barY, sliderX + 20, barY + 100, sliderX, barY + 100);
    triangle(sliderX + 115, barY, sliderX + 115, barY + 100, 
    sliderX + 95, barY + 100);
    rect(sliderX + 18, sliderY + 90, 79, 8);
    text("Score: " + countOfEspresso, width/2-20, height-20);

    // Terminating the program
    // Once the player has collected 50 espresso "elements", 
    // the game stops
    if(countOfEspresso > 50) {
    text("You've had too much coffee. No more for you!", 100, height/2);

// Week 10 - Generative landscape notes helped!
function updateAndDisplayEspresso() {
    for (var i = 0; i < numEspresso; i++) {

    var d = dist(espresso[i].x, espresso[i].y, 
      sliderX + sliderW/2, sliderY);
      if (d > 0 & d < 5) {
        countOfEspresso += 1;

function mouseDragged() {
  var sliderMax = width - offset - sliderW;
  if(mouseY >= barY & mouseY <= barY+barH){
    sliderX = max(min(mouseX,sliderMax),barX);

function Espresso() {
  this.x = random(0, width);
  this.y = random(0, height);

  this.draw = function() {
    if (this.y <= height + 2) {
      fill(139, 69, 19);
      ellipse(this.x, this.y, 40, 40);  
    else {
      this.y = -2;

  this.move = function() {
    this.y = this.y + ySpeed;

For my final project, I created a game where the player catches espresso shots (expressed as ellipses) falling from the top of the screen in a cup at the bottom of the canvas. The cup is controlled by a scroller, and the user must drag their mouse in order to move the cup.

The user should move the cup in order to catch the falling espresso “elements” in order to get a (more than healthy, probably way too much!) dose of caffeine. Once the user has caught more than 50 espresso “elements” in their cup, there is a surprise.

In creating my project, I went back and referred to some class notes, notably the lab from Week 3 and the Week 10 deliverables. Having to revisit these ideas helped me solidify my understanding more, and I really appreciated having those resources.

One thing to note – When testing my game, I noticed that the score keeping mechanism is sometimes inconsistent. I went through my code several times and tried many different things to try and fix this bug, but in the end, I failed. 🙁 However, I quite enjoyed working on this project overall, and this project really made me appreciate beautifully made games because it is obvious that there is immense amounts of work that go into them.

Hannah K-Final Project Proposal

For my final project, I hope to create a game.

In the game, there will be a cup that is controlled by the mouse, and there will be randomly generated elements (of espresso) dropping from the top of the screen. The player will have to move their mouse in order to catch these shots of espresso, and there will be some kind of counting mechanism. Depending on how many the player catches, there will be a different dialogue that is displayed to the user.

This is a picture of my idea:


Hannah K-Looking Outwards-12

For this week’s Looking Outwards, I looked at two examples of games that are are similar to what I hope to create for my final project. Both games were created by primarygamesarena.com and were originally intended to be educational math games for younger children.

The first game was called Apple Catch, and the second game was called FrostBite.

The main elements of these games that I gained inspiration from was that the graphics were simple but still effective, and both games were mouse interactive and had an element of keeping tracking how how many “items” that the mouse-controlled character caught.


In the background of both of these projects, there were random graphic elements, which is something I may consider adding. As I go about working on my project, I think it will be helpful to come back and look at these games again.

Apple Catch requires that the player moves the mouse to where is apple is dropping.
Apple Catch requires that the player moves the mouse to where is apple is dropping.
FrostBite has a similar idea as Apple Catch, but it requires that the player moves the mouse away from randomly generated elements dropping from the sky.
FrostBite has a similar idea as Apple Catch, but it requires that the player moves the mouse away from randomly generated elements dropping from the sky.

Hannah K-Project 11


var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;
var turtle7;
var turtle8;
var turtle9;

function setup() {
    createCanvas(500, 500);
    turtle1 = makeTurtle(120, 60);
    turtle2 = makeTurtle(110, 230);
    turtle3 = makeTurtle(120, 350);
    turtle4 = makeTurtle(250, 75);
    turtle5 = makeTurtle(260, 210);
    turtle6 = makeTurtle(250, 375);
    turtle7 = makeTurtle(400, 60);
    turtle8 = makeTurtle(390, 230);
    turtle9 = makeTurtle(400, 350);

function draw() {

    // Draw the frame
    fill(255, mouseX, mouseY);
    rect(0, 0, width-1, height-1);

    // Creating turtle 1 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 2 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 3 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 4 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 5 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 6 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 7 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 8 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {

    // Creating turtle 9 / 9
    for (var i = 0; i < 500; i++) {
        if (i % 10 === 0) {


function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

This week for my project, I decided to make several repeating turtles with a changing background. It kind of reminds me of the pattern we had to create for a project in a past week. It was fun revisiting the use of turtles, and I enjoyed making turtles that looked totally different from the meanders we created for the assignment last week. I think the changing background adds a cool visual effect, and it was something I came up with during the course of making this project. I did not really start this project with an exact plan, like I usually do, but I enjoyed it nonetheless and feel much more comfortable using turtles now.

Hannah K-Looking Outwards-11

This week for my Looking Outwards, I looked at John Wynne‘s untitled installation for 300 Speakers, Pianola, and Vacuum Cleaner. It was released September of 2011 and explores the boundaries between sound, space, and music. In terms of sounds, there are three elements: the sound of the space in which this installation occurred, the notes being played by the piano, and a computer-controlled soundtrack of synthetic sounds. These three elements are not synchronized, meaning that the track never repeats. The pianola in the exhibit has been modified to only play notes whose frequencies would best resonate in the space in which they are being played, so there was careful consideration about which notes would be played. This exhibit has been described as creating a sort of “epic, abstract 3-D opera in slow motion,” and I agree with that statement completely.

I found this installation to be particularly interesting because I think it demonstrates an intersection of sound and space. There is a strong visual element because there are so many speakers in the space that have been carefully and deliberately placed, but this visual element is only an addition since the purpose of this exhibit was about highlighting sound.

This massive display of different sonic elements work together to explore the idea of space.
This massive display of different sonic elements work together to explore the idea of space.


Hannah K-Looking Outwards-10

This week for my Looking Outwards, I looked at a project called Neurotiq by Sensoree. Sensoree began as a research endeavor focused on creating wearable technologies that augment Sensory Processing Disorder. Now, Sensoree Design Labs represents a cohort of designers and engineers that work with futuristic fabrics and materials.

Sensoree’s founder is Kristin Neidlinger, who is also a future concepts designer. I appreciated that this week’s Looking Outwards was directed at highlighting the amazing things that female creators are making.

Now, back to talking about Neurotiq. Neurotiq is a wearable piece of fashion that was knitted and 3D printed. It has EEG brain sensors that reflects the wearer’s thoughts and brain states, and it does so with colors. The EEG brain sensor captures brain waves. Neurotiq perfectly captures the bridge between science and art, as it is both beautiful and functional. Something that made me especially happy with this week’s Looking Outwards was that Sensoree had a process video for Neurotiq available, which is information that I have generally found difficult to obtain for past posts. The process video is below:

Here is a video of Neurotiq in action:

Neurotiq makes a visual representation of one's brain waves and thoughts possible.
Neurotiq makes a visual representation of one’s brain waves and thoughts possible.

Hannah K-Project-10


// Creates a forest with trees

var terrain = []; // Values of tree terrain unknown
var terrainL = terrain.length; // Returns length of terrain
var j;
var horTreeOff = 1; // Hor tree offset so top of tree is centered on trunk
var vertTreeOff = 10; // Vert tree offset so top of tree is on top of trunk
var a;
var b;
var c;
var d;
var e;
var f;
var g;
var h;
var i;
var forest1 = [];
var forest1L = forest1.length;
var forest2 = [];
var forest2L = forest2.length;
var forest3 = [];
var forest3L = forest3.length;

function setup() {
    createCanvas(600, 400); 

function draw() {
    background(135, 206, 235);

    // Draws the sun
    fill(253, 184, 19);
    ellipse(0, 0, 100, 100);



function createForest1() {
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0001;

    // 1st "layer" of forest
    for(a = 0; a < width; a++) {
        b = (a * forestDetail * 10 + millis() * forestSpeed / 4);
        c = map(noise(b), 0, 1, 0, height-250);
        stroke(139, 143, 143);
        line(a, c, a, height);

function createForest2() {
    var noiseScale = 0.005;
    var forestDetail = 0.0001;
    var forestSpeed = 0.0001;

    // 2nd "layer" of forest
    for (d = 0; d < width; d++) {
        e = (d * forestDetail * 10 + millis() * forestSpeed / 2);
        f = map(noise(e), 0, 1, 0, height-75);
           stroke(139, 150, 50);
           line(d, f + 20, d, height);

function createForest3() {
    var noiseScale = 0.001;
    var forestDetail = 0.0005;
    var forestSpeed = 0.0005;

    // 3rd "layer" of forest
    for (g = 0; g < width; g++) {
        h = (g * forestDetail * 7 + millis() * forestSpeed);
        i = map(noise(h), 0, 1, 0, height-60);
           stroke(139, 175, 63);
           line(g, i + 75, g, height);

// Places trees on hills of terrain
function placeTreesOnTerrain() {
  for(j = 1; j < width; j++) {
    if(terrain[j] < terrain[j+1] & terrain[j] < terrain[j-1]) {

function drawTree() {
  rect(j, terrain[j]-vertTreeOff, 5, 15);
  ellipse(j+horTreeOff, terrain[j]-vertTreeOff, 15, 15);
// Code from Week 7's Assignment
function calculateAndRenderTerrain() {
  eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};
  k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)
  {if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}
  ('c(6);b(4,6,4);9(a 3=0;3<d;3++){8[3]=e(h((3/7.0)+(g()/(7*4))),0,1,5*0.2,5);\

function placeTrees1() {
    for(a = 1; a < width; a++) {
        if(forest1[a] < forest1[a+1] & forest1[a] < forest1[a-1]) {

function drawTrees1() {
    rect(a, forest1[a]-vertTreeOff, 5, 15);
    ellipse(a+horTreeOff, forest1[a]-vertTreeOff, 15, 15);

function placeTrees2() {
    for(d = 1; d < width; d++) {
        if(forest2[d] < forest2[d+1] & forest2[d] < forest2[d-1]) {

function drawTrees2() {
    rect(3, forest2[d]-vertTreeOff, 5, 15);
    ellipse(d+horTreeOff, forest2[d]-vertTreeOff, 15, 15);


function placeTrees3() {
    for(g = 1; g < width; g++) {
        if(forest3[g] < forest3[g+1] & forest3[g] < forest3[g-1]) {

function drawTrees3() {
    rect(3, forest3[g]-vertTreeOff, 5, 15);
    ellipse(g+horTreeOff, forest3[g]-vertTreeOff, 15, 15);


This week’s project was definitely a bit of a struggle. I originally intended to create a forest with multiple layers of trees that appeared at the highest points of the created terrain (similar to an assignment we had to do for Week 7). The inspiration for a forest landscape was from this past summer, when I went camping with my family at Sequoia Kings Canyon. However, while there do not appear to be any bugs in my code, the trees are not showing up on the other “layers” of the forest (see below for a rough sketch of what I intended to create).

Hannah K-Looking Outwards-09

This week for my Looking Outwards, I decided to look at Shannon‘s Looking Outwards post from Week 1!

For her post, she looked at a sound reactive light installation by Nocte that was created in collaboration with the designer Roland Ellis. Nocte, creates light installations and responsive environments in order to engage their audience in a unique experience. Roland Ellis is a British designer based in Somerset House out of London.

I really liked this project because it engages two different senses together. The lamps are digitally controlled, and live audio can control the animations. It is both seemingly simple but complex.

I was not able to gather too much about the details of how this installation actually works, but I thought it was an amazing interactive work. I also thought that Shannon’s original Looking Outwards post was thorough and detailed, and I learned a lot just from reading her post and perspective!


Hannah K-Project-09


var myImage;
// Variables needed for lerp
var orig = color(theColorAtLocationXY);
var next = color(135, 206, 250);

function preload() {
    var goldenGateBridge = "https://i.imgur.com/jeVkTI5.png";
    myImage = loadImage(goldenGateBridge);

function setup() {
    createCanvas(414, 750);

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 10, width-1);
    var iy = constrain(floor(py), 10, height-1);
    var theColorAtLocationXY = myImage.get(ix, iy);

    // Creates a diagonal "line" that pulls colors
    // used in the rest of my portrait
    if(py > px) {
    rect(px, py, 10, 5); 
    else {
    theColorAtLocationXY = lerp(orig, next, 0.5);
    rect(px, py, 5, 10);

For this week’s process, I was heavily reliant on the template for creating my final product. Unless most weeks, I did not really have a drawing that I made prior to starting my final project. I decided to use a picture from a couple of summers ago when I went biking across the Golden Gate Bridge. I decided to create a diagonal “background” of sorts that depends on other colors that were used in my image.

On a final note, I am not sure why the computational portrait is not showing up on this page, even though the code is embedded. I tried re-uploading my file numerous times and embedding it, but nothing seems to work…When I open the html file associated with my code, it works though..!


Hannah K-Looking Outwards-08

This week, I looked at Amanda Cox‘s work. She works for the New York Times as a graphics editor, and as I am a big fan of the NYT, I decided to pick her as the individual whose work I would look at. She received a Master’s degree in statistics and ended up at the NYT when she decided to take an internship there while she was still in school.

I am drawn to her work because I think data visualization presents an interesting challenge but is relevant because there is so much information available to us in this day and age. I think the NYT consistently creates fun and interactive infographics, which I find fascinating. They are both informational and engaging, which I think can be a difficult balance to strike at times.

One of the things she worked on that I found particularly interesting was this infographic on Netflix rental patterns depending on location and neighborhood.

(Please click on the image below to access the infographic.)

This infographic provides information on Netflix rental patterns, neighborhood by neighborhood, in a dozen cities.
This infographic provides information on Netflix rental patterns, neighborhood by neighborhood, in a dozen cities.