tanviharkare_sketch

//position of ball
var px = 100;
var py = 100;
var yvel = 4;
var ox = 400;
var bs = 30;

var r = 100;
var rx = 200;
var count = 0;
var score = 0;
var hscore = 0;

var obspeed = 2;

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var terrainSpeed2 = 0.0002;
var terrainDetail2 = 0.002;


function preload() {
    mySnd = loadSound("boing.wav");
    mySnd.setVolume(0.5);
}
// to play the sound from within draw() or anywhere:

function setup(){
    createCanvas(400, 400);
    frameRate(30);
}

function draw(){
    background(255);
    py -= yvel;
    yvel -= 0.3;

    for (var x = 0; x < width; x++) {
        stroke(243, 184, 141);
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        line(x, y, x, height); 
        stroke(143, 61, 75);
        var t2 = (x * terrainDetail2) + (millis() * terrainSpeed2);
        var y2 = map(noise(t2), 0,1, 0, height);
        line(x, y2 + (y2 / 2), x, height); 
    }
    noStroke();
    fill(74, 47, 72);
    ellipse(px, py, bs, bs);
    fill(43, 29, 66);
    if(ox > 0){
        rect(ox, 0, 10, r);
        rect(ox, height - rx, 10, rx);
        ox -= obspeed;        
    }

    else if(ox <= 0){
        r = random(0, 200);
        rx = 300 - r;
        ox = 400;
        score++;
        count++;
        if (count % 5 === 0){
            obspeed += 1;
        }
    }
    intersect();
    fill(0);
    textSize(12);
    text("Score: " + score, 10, 10);
}

function mousePressed(){
    mySnd.play();
    yvel = 6;

}

function intersect(){
    if(py - (bs / 2) < r || py + (bs / 2) > height - rx ){
        if(px < ox + 10 & px > ox - 10){
            if(score > hscore){
                hscore = score;
                score = 0;
            }
            noLoop();
            textSize(18);
            text("You Lost :(", 300, 20);
            text("Score: " + hscore, 300, 50);
            text("Play Again!", 300, 80);
            }
        }
}

For this project, I wanted to create a game that would have a level of difficulty as time progressed. This game is a classic spinoff of the popular game flappy bird – a sphere that bounces every time you click the mouse. Your job is to make sure your sphere doesn’t hit any of the obstacles that move along the screen. In order to get the boing sound every time the ball bounces, download the zip file with all the files!

tharkare_finalzip

For my project proposal, I am really interested in making an interactive game. I was really inspired by one of the projects I covered in my looking outwards for this week, which was a retake on the popular game Flappy Bird. It combines the use of the generative landscape and simple animation of an object on the screen. The object would bounce up and down dependent on a mouse click or a keypress.

I’m still not 100% sure what the theme of my game will be, but one idea that I had in mind was using another character that could fly, such as a different type of bird or even a fictional character like a dragon or unicorn. For example, if a dragon were used, a generative background of something similar to a cave could be used. While starting to code this project, I would start with something that was simple like a circle, in order to make sure the code works.

For my final project, I wanted to create a game – coding video games is one of the reasons why I chose to take this class. The two projects I found dealing with this subject is Flappy Bogost by Greg Borenstein, and Method Random by Rafael Lozano-Hemmer.

Flappy Bogost is a spin off of the popular game, Flappy Bird. It uses multiple generative landscapes to create a game in which an object must “flap” its way around the obstacles provided. One of the things that I think could have been improved is the reasoning for the landscape and obstacles – currently it is a desert landscape with green chillies as the obstacle. I believe something with a theme could make this game more appealing to its users.

Flappy Bogost from Greg Borenstein on Vimeo

Method Random was created with the intention of creating a grid of random sized squares, with a different fill in each color. There is a series of nine algorithms that perform different tasks, mainly different seeds for generating numbers for individual R, G, and B values. This could be useful for generating random colors in my final project.

sketch

var l = 50;
var m = 10;
var R = 100;
var G = 200;
var B = 50;

function setup(){
    frameRate(10);
    createCanvas(400, 400);
    background(0);
    myTurtle = makeTurtle(mouseX, mouseY);
    myTurtle.setWeight(6);
    myTurtle.penDown(); 
}

function draw(){
    var c = color(R, G, B)
    myTurtle.setColor(c);
    myTurtle.turnToward(mouseX, mouseY, l);
    myTurtle.forward(m);
    if (frameCount % 100 === 0){
        newColor();
    }
}

function newColor(){
    m = random(0, 20);
    l = random(0, 100);
}

function mouseClicked(){
    R = random(0, 255);
    G = random(0, 255);
    B = random(0, 255);
}

function keyPressed(){
    background(0);
}

//// change nothing under this line ////
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) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      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,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, 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;
}

I was inspired by the etch a sketch toy, which draws small lines that can potentially create an interesting drawing. The turtle turns towards the direction of the mouse. Every 100 frames, the line type changes to be more jagged or more smooth. When you click the mouse on the canvas, it changes the color of the line. If you press any key, the background erases to create a blank slate – similar to shaking an etch a sketch.

Prelude in AGCT is a project created by Pierry Jaquillard at ECAL Media and Interaction Design Unit. The project takes a person’s DNA and turns it into music notes. As of now the project only has Pierry’s DNA. It includes all 23 chromosomes, which are run through different interfaces in order to create different results. Everything is processed through JavaScript scripts. The DNA helps Pierry to visualize his DNA as sound. You can view the data on any digital device, such as an iPad. Pierry uses a midi file to generate signals to a computer that plays the file. Certain aspects of the music track can be changed, such as the tempo, arrangement, instruments, etc.

I find this project interesting because of how each person can create a different soundtrack because each individual has their own unique set of DNA. I wish there was an easier way for users to get a soundtrack unique to them – perhaps of their facial or body structure, which is something else that is unique to everyone.

A woman I found interesting is Jenny Sabin – she is an architectural designer who uses computational design as the main driver in her design process. She studied ceramics and interdisciplinary visual arts from the University of Washington. She also holds an M. Arch from University of Pennsylvania. Sabin also holds many awards and fellowships, as well as founding multiple studios at Cornell.  Her project, Lumen (created with a team of 20+ people) was the winner of the MoMA’s Young Architects Program in 2017. Lumen is a responsive structure that responds to environmental factors, as well as social context. It’s made from recycled materials, such as textiles & yarns that absorb light that active its micro climate. The experiment is held together by tension, which is calculated by sun, site, materials, program, and morphology through structures. Lumen goes through a lot of experimentation to create a spatial environment that is delightful for all its users, and goes through many transformations through every hour of the day. Click here for a link to the project

For this looking outwards, I liked the project that Romi Jin covered in her looking outwards 3 about computational fabrication. As an architecture major, computational design is one of the many ways we can design buildings for the future. The specific computational project was HG’s opening chronometry. I agree with the fact that using a tool called Grasshopper to create parametric designs are a very easy way to create iterations in your design process, versus trying to record all those things by hand. My favorite project by this group is their Hide-and-Seek project, which is an art museum and cultural space. They used computational design to create a labyrinth of corridors that visitors can use to go through series of small spaces. Users are to “hide and discover each other” through different material transparencies and stairs. The main building material is recycled plastic pallets & LED lights for lighting, which is an unusual combination of materials I haven’t seen before.

Click here for a link to the original looking outwards post, and click here for the link to the project!

tanvi09

/* Tanvi Harkare
tharkare@andrew.cmu.edu
Section B
Project-09*/

var img;
var ix;
var iy;
var px;
var py;
var sizeC = 10;
var colAtLoc;

function preload(){
    var url = "https://i.imgur.com/yJADhdn.jpg"
    img = loadImage(url);
}

function setup() {  
    createCanvas(480, 480);
    background(255);
    img.loadPixels();
}

function draw() {
    //x and y locations for ellipses
    px = int(random(0, 480));
    py = int(random(0, 480));
    //saving x and y locations of mouse
    ix = mouseX;
    iy = mouseY;
    //colors for circle and text
    colAtLocCircle = img.get(px, py);
    colAtLocText = img.get(ix, iy);
    //drawing text based on mouseX and mouseY
    noStroke();
    fill(colAtLocText);
    textSize(6); 
    text("PK", ix - 3, iy + 3); //so mouse is in center of text
    //setting random size and drawing circles
    randomSize();
    fill(colAtLocCircle);
    ellipse(px, py, sizeC, sizeC);
}

function randomSize(){
    sizeC = int(random(0, 10));
}

For this project I chose a picture of my friend Prerana that I took myself last year! Circles appear on the canvas in a random order, and also vary in size because of the randomSize function. In addition to the points, if you run the mouse over the canvas, her initials appear in the color of wherever the mouse position is located based off the image pixel color.

sketch

/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-07 */

var numLines = 20;
var angle = 0;
var angleX;
var clickCount = 1;
var circleW;
var circleC;

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

function draw() {
    background(0);
    for(var i = 0; i < numLines; i++){
        noFill();
        strokeWeight(clickCount);
        push();
        angleX = map(mouseX, 0, 480, 0, 90); //altering how slow or fast ellipses rotate 
        circleC = map(mouseX, 0, 480, 20, 255); //altering stroke color from black to white
        numLines = map(mouseY, 0, 480, 5, 50); // altering amount of lines drawn
        circleW = map(mouseY, 0, 480, 200, 50); //altering ellipse width
        stroke(circleC);
        translate(width / 2, height / 2);
        rotate(radians(angle));
        ellipseMode(CENTER);
        ellipse(0, 0, circleW, 400);
        pop();
        angle += angleX;

    }
}

function mouseClicked(){
    //increases strokeWeight parameter based on mouse clicks
    clickCount++;
}

function keyPressed() {
    clickCount = 1;
}

For this project, I was inspired by the spirograph curves. I created a set of ellipses that change based on mouseX and mouseY parameters. The mouseX changes the color of the stroke and the angle of rotation for the ellipses. The mouseY changes how many curves are drawn and the width of the curves. Additionally, when the mouse is clicked the strokeWeight will increase. When any key is pressed, the strokeWeight defaults back to its original value.

A project that I found interesting is the Wind Map by artist Martin Wattenberg and Fernanda Viegas. Martin Wattenberg leads the AI research initiative at Google, and focuses on combining those aspects with art. These wind maps range from calm days to huge hurricanes. In terms of time, all the maps focus on wind patterns since 2012. One of the main points that we can get out of this is that whether there is a hurricane or slight winds, wind patterns can still look dramatic at a 2D level. The algorithm to create this artwork is purely done in JavaScript and html, and the comet like tails describe the specific wind pattern.

I thought this was an interesting project because earlier this semester, we had to do a similar project for our architecture studio. Using wind patterns and other climate data can help us design better buildings. You can view the full project here.