Final Project-Alison Hoffman

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Final Project 

//This project is an interactive exploration of the psychological phenomenon 
//of random association. Basically it is a random word generator that provides 
//a response to user input

//I used Donald Trump Tweets as the source text
var trumpTweets = ["beautiful","important","evening","man",
"woman","never","forgotten","again","together","never","happy","birthday",
"service","fantastic","first","time","really","good","meeting","great",
"chemistry","very","open","successful","professional",
"protesters","incited","media","very","unfair","love","fact","small",
"groups","protesters","last","night","passion","great","country","together","proud", 
"busy","planned","soon","making","important","decisions","people",
"running","government","express","deepest","gratitude","served","armed","force",
"prove","great","time","unite","losing","subscribers","poor",
"inaccurate","coverage","letter","subscribers","apologizing","coverage","wonder",
"change","doubt","congratulate","very","nice","express","best","wishes","very",
"nice","great","great","great","people","incredible","states","believe",
"countries","acquire","nuclear","weapons","dishonest","never","interview","tonight", 
"game","enjoy","especially","second","third","speeches","intensity",
"large","rallies","great","supporters","election","total","popular",
"campaign","bigger","easily","actually","genius","including","smaller","play",
"different","very","organized","process","decide","positions","finalist","trying",
"children","typically","news","story","failing","totally","wrong","transition",
"foreign","leaders","always","available","upset","fools","coverage","transition", 
"team","hours","fantastic","call","advised","plant","great","confidence",
"working","weekend","great","women","helping","make","America","great","again",
"settled","lawsuit","small","fraction","potential","award","focus","country",
"winning","trial","wonderful","future","harassed","night","theater","cast","cameras",
"blazing","safe","special","place","very","rude","very","good","apologize",
"producers","overrated","immediately","apologize","terrible","behavior","numerous",
"patriots","various","positions","necessary","make","America","great","again",
"totally","one-sided","biased","show","nothing","funny","equal","time","considered",
"impressive","yesterday","good","relationship","smarter","ability","news","update",
"policy","prior","interests","properties","world","crooked","media",
"deal","people","represent","nasty","meantime","complaints","formation","talented",
"terrible","beautiful","exciting","working","scam","defeated","demoralized",
"tabulation","victory","people","illegally","convincingly","serious","fraud","media",
"terminate","embarrassed","burn","consequences","wildfires","terrible","business",
"tragic","wonderful","history","interesting","billions","unwatchable","funny",
"impersonation","worse","regulations","employees","retribution","expensive",
"mistake","losing","scam","massive","complex","thrilled","press","cancel","invest"];

var instrtText0 = "You are here to find the meaning.";
var instrtText1 = "I am here to help you find the meaning";
var instrtText2 = "So this is how this is going to work:";
var instrtText3 = "You give me a word, then I give you a word.";
var instrtText4 = "This will happen six times, after which you must tell me what it all means.";
var instrtText5 = "Got it? Good.";

var sourceWords1 = []; var sourceWords2 = []; var sourceWords3 = [];
var inputWords; var ar = [];
var inputCt = 0; var currentWord; //variables for keeping up with current input words
var jBiebs; //holds song
var myWord; var myGenWords = []; //variables for generator words
var landImgs = []; 
var usedImgs = [];
var randNum;
var wordX; var wordY; //controls word position
var font;
var scaler8; // controls rate of scaling 
var instruction = [instrtText0,instrtText1,instrtText2,instrtText3,
                   instrtText4,instrtText5];

var explaination = ["This program was testing the psychological phenomenon of random association.",
                    "Random association is the propensity for humans to try to find",
                    "meaning or connection among random events. All of the words displayed",
                    "were generated randomly, so any connection you found was coincedental."]

var realExplain = ["So, if you guessed Donald Trump you're not entirely wrong.",
                    "All words were sourced from Trump's tweets since the election.",
                    "However, words were still generated randomly, but the majority of",
                    "what he says is random and has no meaning, so it's still fitting."]
function preload(){
    var landURLs = [];
    landURLs[0] = "http://i.imgur.com/yfhTfHG.jpg";
    landURLs[1] = "http://i.imgur.com/VvhFDxD.jpg";
    landURLs[2] = "http://i.imgur.com/AuLBi3f.jpg";
    landURLs[3] = "http://i.imgur.com/rcqJJjl.jpg";
    landURLs[4] = "http://i.imgur.com/nDdVmCQ.jpg";
    landURLs[5] = "http://i.imgur.com/JrSGcKa.jpg";
    landURLs[6] = "http://i.imgur.com/k2eT8Em.jpg";
    landURLs[7] = "http://i.imgur.com/VzoUiOv.jpg";
    landURLs[8] = "http://i.imgur.com/ck0OEfD.jpg";

    jBiebs = loadSound("WDYM.wav");

    for(var i = 0; i < landURLs.length; i++){ //loads images into array
        landImgs[i] = loadImage(landURLs[i]);
    }
}

function setup() {
    createCanvas(640, 480);
    textAlign(CENTER);
    for(var i = 0; i < trumpTweets.length; i++){ 
        if(trumpTweets[i].length % 2 === 0){ //breaks up source words based on wordlength
            sourceWords2.push(trumpTweets[i]);//even length words
        } else if(trumpTweets[i].length % 2 === 1){ //breaks up source words based on wordlength
            sourceWords3.push(trumpTweets[i]);// odd length words
        }
    }
    for(var i = 0; i < landImgs.length; i++){ 
        landImgs[i].filter("gray"); //puts all images in grayscale
        landImgs[i].loadPixels();
    }
    jBiebs.play(); //play justin bieber song
}

function draw() {
    background(0);
    scaler8 = frameCount;
    //--------------------page reloads based on the number of times input entered
    if(inputCt == 0){ 
        start();
    }
    if(inputCt == 1){
        background(0);
        instructions();
    }

    if(inputCt >= 2){   
        for (var i = 0; i < ar.length; i++){ //displays generated words
            background(220);
            image(landImgs[randNum],0,0);
            fill(255);
            textSize(12);
            textFont("Helvetica");
            textStyle(ITALIC);
            text("Your word: " + currentWord, width/2, 20);
            textSize(72);
            textStyle(NORMAL);
            textFont(str(font));
            push();
            fill(0);
            translate(wordX,wordY)
            scale(scaler8/2000);
            text(myGenWords[i],0,0);
            fill(255);
            text(myGenWords[i],4,0); 
            pop();
            textSize(18);
            textStyle(ITALIC);
            textFont("Helvetica")
            text("Press ENTER to continue", width/2, height-40);
        }
    }
    if(inputCt == 8){ //page for getting last user input
        background(0);
        finale();
    }

    if(inputCt > 8){ //final pages
        background(0);
        explain();
    }
    if(inputCt == 10){
        background(255);
        fill(0);
        textSize(64);
        text("*",100,100);
        textSize(16);
        for(var i = 0; i < realExplain.length; i++){ //displays text line by line
            text(realExplain[i],width/2,height/2+(30*i));
        }
    }
}
//---------does a lot based on user hitting enter
function keyPressed(){
    if (keyCode === ENTER){
        inputCt = inputCt + 1; //incraments input count by one 
        if((inputCt >= 2) & (inputCt < 8)){
            inputWord = prompt("Please type a word"); //asks for user input
                while(inputWord.length < 2){
                    inputWord = prompt("You must type a word");
                }
            currentWord = inputWord; 
            currentWordL = inputWord.length;//used in other functions to compare
            ar.push(inputWord);
            backgroundChooser();//changes background every time enter is pressed
            wordCheck();
            wordPosition();
            fontSelect();
        }
        if(inputCt == 9){
            inputWord = prompt("Tell me what it means");
            while(inputWord.length < 2){
                    inputWord = prompt("You must type a word");
                }
        }
    }
}

//------------chooses background image randomly
function backgroundChooser(){
    randNum = int(random(0,landImgs.length-1));
    var radIndex = usedImgs.indexOf(randNum); //searches used imgaes to see if new random number has been used
    if(radIndex == -1){
        usedImgs.push(randNum); //if not add it to the array and use it
    } else{
        backgroundChooser(); //if it is repeated num, recursively call 
        //function to generate another word
    } 
    println(usedImgs);

}
//-------------checks to make sure the generated word has not been used already
function wordCheck(){
    if(currentWordL % 2 === 0){
        myWord = sourceWords2[int(random(0,sourceWords2.length))];
            for(var i = 0; i < myGenWords.length; i++){
                if(myWord === myGenWords[i]){
                   myWord = sourceWords2[int(random(0,sourceWords2.length))];
                }
            }
    }else {
        myWord = sourceWords3[int(random(0,sourceWords3.length))];
            for(var i = 0; i < myGenWords.length; i++){
                if(myWord === myGenWords[i]){
                    myWord = sourceWords3[int(random(0,sourceWords3.length))];
                }                   
            }
    }
    myGenWords.push(myWord); //adds word to array if it hasnt been used yet
}
//--------------selects font based on whether position in array is even or odd
function fontSelect(){
    var idx = trumpTweets.indexOf(myWord);
    if((idx < 100) & (idx % 2 == 0)){ //if in first half and even position
        font = "Copperplate";
    }else if((idx < 100 ) & (idx % 2 == 1)){ //in first half and odd position
        font = "Impact";
    }else if ((idx >=100) & (idx % 2 == 0)){// in second and even position 
        font = "Arial";
    }else if ((idx >=100) & (idx % 2 == 1)){ //in second and odd position
        font = "Georgia";
    }

}
//----------choose random position of generated word 
function wordPosition(){
    wordX = int(random(200,width-200));
    wordY = int(random(100,height-175));
}
//----start page-------------------
function start(){
    background(landImgs[8]);
    textFont("Palatino");
    textStyle(NORMAL);
    textSize(80);
    fill(0);
    text("What does it",width/2-4, 120); 
    fill(255);
    text("What does it",width/2, 120); 
    textSize(145);
    push();
    fill(0);
    textFont("Helvetica")
    translate(width/2,240);
    text("mean",0, 0);
    fill(255); 
    text("mean",4, 0);
    pop();
    textFont("Palatino");
    for(var i = 0; i < width - 180; i = i + 50){
        textSize(96);
        fill(0);
        text("?", 95 + i, 360);
        fill(255);
        text("?", 99 + i, 360);
    }
    textSize(28);
    textStyle(ITALIC);
    textFont("Helvetica");
    text("Press ENTER to find meaning",width/2, 420);
}
// ----- displays instructions ---------------------
function instructions(){
    fill(255);
    textSize(18);
    textStyle(NORMAL);
    for(var i = 0; i < instruction.length; i++){
        text(instruction[i],width/2,(25*i)+(height/2-80));
    }
    textSize(28);
    textStyle(ITALIC);
    text("Press ENTER to begin",width/2,height-80);
}
//-----displays all generated words and asks for final input
function finale(){
    fill(255);
    textStyle(NORMAL)
    textSize(44);
    textFont("Helvetica");
    textStyle(BOLD);
    text("So, what does it all mean?",width/2, 120);
    textStyle(NORMAL);
    textSize(32);
    for(var i = 0; i < 6; i++){
        text(myGenWords[i],width/2,190+(40*i));
    }
    textStyle(ITALIC);
    textSize(18); 
    text("(Press ENTER)",width/2,height-40); 
}
//---------displays final explaination of project
function explain(){
    textStyle(BOLD);
    textSize(44);
    text("Nothing. It means nothing.",width/2, 100);
    textSize(16);
    for(var i = 0; i < explaination.length; i++){ //loads sentences by line
        text(explaination[i],width/2,height/2+(30*i));
    }
    textFont("TimesNewRoman");
    text("*Press ENTER for more information",width/2,height-20);

}

For this final project I wanted to bring in some sort of perspective with my  primary major. After meeting with Roger I decided to work with the concept of random association — a phenomenon which illustrates our propensity for finding meaning or connection even when events are entirely random. So in its simplest form this is project a random word generator based on user input. For every word a user inputs, the program generates one in response. At the end the user is asked say what is the meaning behind all of the words. The words are displayed to look like the those motivation landscape photos you see on Facebook all of the time. This program is unable to be displayed because it requires running a local server for playing a song file.

The photos I used are not my. They were all sourced from the internet. You can find the photos 1, 2, 3, 4, 5, 6, 7, 8, 9, at the corresponding links.

The song is also not mine. The song I used belongs the new and improved Justin Bieber. No copyright infringement intended.

Lastly, all of the words I used in my source text belong to the president-elect Donald Trump.

Project 3 – Alison Hoffman

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 3

//*This Program is a dynamic drawing that responds to the mouseX and mouseY position
function setup() {
    createCanvas(640,480);
}

function draw() {
    background("lavender");
    noStroke();
    rectMode(CENTER);

    var boxColor = map(mouseX,0,width,0,180);
    var boxTrans = map(mouseX,0,width,100,255);
    //top row 
    fill(boxColor);
    push();
    translate(width*.15,100);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.38,100);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.62,100);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.85,100);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();

    //middle row 
    fill(255,255,255,boxTrans);
    push();
    translate(width*.12,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.30,height/2);
    scale(1 - mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.50,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.70,height/2);
    scale(1 - mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.88,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    //rect(width*.25,height/2,25,25);
    //rect(width*.47,height/2,25,25);
    //rect(width*.69,height/2,25,25);
    //rect(width*.86,height/2,25,25);



    //bottom row
    fill(boxColor);
    push();
    translate(width*.15,380);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.38,380);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.62,380);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.85,380);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();

}

For this project I focused on making the mouseX & mouseY interaction feel intuitive. As you move mouseX left to right, the boxes in the first and third row rotate alternatively based on the mouseX position. The shade of the boxes also get lighter as you increase mouseX. The transparency of the the smaller white boxes in the middle row also decrease as mouseX decreases. MouseY controls the scale of the middle boxes as well.

Project 10 – Alison Hoffman

For this project I was trying to create a underwater landscape. I was rather scared to work with objects, so I kept concept rather simple in order to focus on really learning to work with objects. I definitely feel more comfortable working with objects after this project, actually I think its makes simple animation like this a lot easier.

sketch

var redFishies = [];
var yelFishies = [];
var tSpeed = 0.0001;
var tDetail = 0.003;


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of fish
    for (var i = 0; i < 10; i++){
        redFishies[i] = makeRedFish(random(width),random(height-100));
        yelFishies[i] = makeYelFish(random(width),random(height-100));
    }
    frameRate(12);
}


function draw() {
    var cB = 20;
    x = map(cB,0,height,255,0);
    background(100,173,193);
   
    updateAndDisplayRedFish();
    removeRedFish();
    addNewRedFish();

    updateAndDisplayYelFish();
    removeYelFish();
    addNewYelFish(); 

    //dark purple
    noStroke();
    beginShape(); 
    fill(56,30,81);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 0,1,300, height+50);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);
    //light purple
    noStroke();
    beginShape(); 
    fill(98,79,119);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 1,0,320, height);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);

}

//red fish
function updateAndDisplayRedFish(){
    for (var i = 0; i < redFishies.length; i++){
        redFishies[i].move();
        redFishies[i].display();
    }
}


function removeRedFish(){
    var redFishToKeep = [];
    for (var i = 0; i < redFishies.length; i++){
        if (redFishies[i].x + redFishies[i].bodySize > 0) {
            redFishToKeep.push(redFishies[i]);
        }
    }
    redFishies = redFishToKeep; // only keeps fish on screen
}


function addNewRedFish() {
    // adds new red fish with randomization
    var newRedFishLikelihood = 0.02; 
    if (random(0,1) < newRedFishLikelihood) {
        redFishies.push(makeRedFish(width,random(2,height-100)));
    }
}


// updates postion of red fish
function redfishSwim() {
    this.x += this.speed;
}
    

// draw the building and some windows
function redfishDisplay() {
    fill(this.colorR,this.colorG,0); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.bodySize, this.bodyWidth);
    triangle(this.bodyWidth+9,-10,
             this.bodyWidth+9,10,
             this.bodyWidth-3,0)
    pop();
}


function makeRedFish(LocationX,LocationY) {
    var redfish = {x: LocationX,
                y: LocationY,
                bodyWidth: random(12,25),
                bodySize: random(40,80),
                speed: random(-3.0,-1.0),
                colorR: random(130,240),
                colorG: random(20,80),
                move: redfishSwim,
                display: redfishDisplay}
    return redfish;
}


// yellow fish
function updateAndDisplayYelFish(){
    for (var i = 0; i < yelFishies.length; i++){
        yelFishies[i].move();
        yelFishies[i].display();
    }
}


function removeYelFish(){
    var yelFishToKeep = [];
    for (var i = 0; i < yelFishies.length; i++){
        if (yelFishies[i].x + yelFishies[i].bodySize > 0) {
            yelFishToKeep.push(yelFishies[i]);
        }
    }
    yelFishies = yelFishToKeep; // only keeps yellow fish on screen
}


function addNewYelFish() {
    // adds new yellow fish with randomization
    var newYelFishLikelihood = 0.02; 
    if (random(0,1) < newYelFishLikelihood) {
        yelFishies.push(makeYelFish(width,random(2,height-100)));
    }
}


// updates postion of yel fish
function yelfishSwim() {
    this.x += this.speed;
}
    

// draw the building and some windows
function yelfishDisplay() {
    fill(220,this.colorG,0); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    ellipse(0, 0, this.bodySize, this.bodyWidth);
    triangle(this.bodyWidth+9,-10,
             this.bodyWidth+9,10,
             this.bodyWidth-3,0)
    pop();
}


function makeYelFish(LocationX,LocationY) {
    var yelfish = {x: LocationX,
                y: LocationY,
                bodyWidth: random(12,25),
                bodySize: random(40,60),
                speed: random(-3.0,-1.0),
                colorG: random(190,255),
                move: yelfishSwim,
                display: yelfishDisplay}
    return yelfish;
}

 

 

 

 

sketch

Project 09 – Alison Hoffman

For this project I used an old photo of my roommate Julia. I would like to think this is Julia in her prime. I wanted to recreate the photo with an object that was also representative of the photo- that is why I decided to make this picture of my little star out of little stars. While accidental, I like how the stars in end give the picture a distressed look especially since this is an older photo.

Original:

juliaedited

Half-way:

screen-shot-2016-10-28-at-11-30-25-am

Final result:

screen-shot-2016-10-28-at-7-22-01-pm

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 9

var imgJulz;
var starSize;

function preload() {
    var myImageURL = "http://i.imgur.com/RhNrs1N.jpg";
    imgJulz = loadImage(myImageURL);
}

function setup() {
    createCanvas(487, 867);
    background(0);
    imgJulz.loadPixels();
    frameRate(100);
}

function makeStar(radSize) {
  var angle = TWO_PI/5;
  var x = 0;
  var y = 0;
  beginShape(); // I referenced p5js.org to learn how to draw a star
  for (var i = 0; i < TWO_PI; i += angle) { //this is a simplified version of their practice code
    var sx = x + cos(i) * radSize;
    var sy = y + sin(i) * radSize;
    vertex(sx, sy);  //makes point at sx,sy
    sx = x + cos(i+(angle/2) * radSize);
    sy = y + sin(i+(angle/2) * radSize);
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

function draw() {
    var px = random(width); //pixel x val
    var py = random(height); //pixel y val 
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var locXYcolor = imgJulz.get(ix, iy); //gets color of pixel

    starSize = 5; 

    noStroke();
    fill(locXYcolor);
    push();
    translate(px,py); //moves star to the pixel location 
    rotate(frameCount/ 50); // makes stars in different directions
    makeStar(starSize);
    pop();

}

Alison Hoffman – Looking Outwards 7

screen-shot-2016-10-14-at-10-15-54-pm

(still of interactive piece Project Ukko)

This is interactive data visualization, entitled Project Ukko, was created by Moritz Stefaner as a representation of the wind patterns across the world. What I find rather amazing about this piece is predictive power. In addition to being a easy to follow visualization of the wind patterns it can also predict future wind patterns based on the data set. I also appreciate how intuitive and simple the design is. The thickness of the lines represents strength while color and tilt represent increase/decrease in speed.  It is very user friendly, which when looking at other visualizations wasn’t always the case. This visualization has practical applications for energy farmers and others in the energy sector, and I think when it comes to these types of data visualizations, practicality translates well into ease of use. For less practical data sets I think artists can make the visualizations a little more abstract.

Alison Hoffman – Project 7

Project 7-ach

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 7 - Curves 

var points = 1000; // number of points 
function setup() {
    createCanvas(420,420);
}

function draw() {
    background(7,26,85);
    push();   // medium curve
    translate(75,75);
    rotate(radians(230));
    drawCurve(85,4,200);
    pop();
    push();
    translate(width/6*5,height/3*2); // lightest
    rotate(radians(90));
    drawCurve(100,2,100);
    pop();
    push();
    translate(width/2,height/2-15); //thicker curve
    rotate(radians(65));
    drawCurve(30,8,60);
    drawCurve(45,8,60);
    pop();
}



function drawCurve(h,w,c) { //takes parameters, h (height variant), w(stroke Weight), and c (value of Green)
    var a = constrain(mouseY/5,0,height); // constrains a to mouseY
    var b = constrain(mouseX/15,0,width); // constrains mouseX to b
    var h = h; // variant degree of curve
    var x;
    var y;
    stroke(mouseX,c,mouseY); // color of stroke depends on input and mouse postions
    strokeWeight(w);
    //
    beginShape();
    noFill();
    for(var i = 0; i < points; i++){
        var t = map(i,0,points,0,TWO_PI); // maps theta to the size of the circle
        x = ((a+b)*cos(t))-(h*cos(((a+b)/b)*t)); // I reversed the signs of the orginal formula in order to invert the curve
        y = ((a+b)*sin(t))-(h*sin(((a+b)/b)*t)); // reversed signs to invert the curve
        curveVertex(-x,-y);
    }
    endShape();
}

This project was really intimidating at first, but once I found a curve that I thought I could replicate it became easier to understand the math behind it. I chose to create a Epicycloid (pictured below). However, I didn’t really like how it created a flower like curve, so I inverted the signs of the formula (- to + and + to -) in order to have the ‘petals’ point inward. I also made the color of the curve depend on the position of the mouse and an input parameter. I chose to do multiple curves to show how the shape changed with varying stroke weight. Overall, once I got started and playing around, I actually ended up really enjoying this project.

screen-shot-2016-10-14-at-9-01-50-pm

Project 6 – Alison Hoffman

For this project I wanted to create an abstract clock that still maintained intuitive function for the user. I stuck with simple forms and color in order to make the representation of time more apparent. The outer circle represents the hour of the day. The weight of the circle changes based on the hour, so, for example, the weight of the circle is greater at 6 than at 2. The shade of the background is also based on the hour of the day such that  the background is lighter at 6 am than at 6pm. The middle circle represents the minute of the hour. Like with the hour, the weight of the circle increases with the minutes passed. The innermost circle represents the seconds in the minute. With each second passed, the arc of the circle gets bigger and the color of the stroke gets darker.project-6-sketch

 

 

 

sketch

//Alison Hoffman
//section D 
//achoffma@andrew.cmu.edu
//Project 06 - Abstract Clock

var bg_color = 0; //intialize color to white

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

function draw() {
    var h = hour();
    var bg_color = map(h,0,23,255,0); // map the hour of day to the color of the canvas
    background(bg_color); // the later the hour the darker the background

    //hour circle 
    var h_stroke = h*4; 
    if (h > 12){        //since hour() works from 0-23, this makes it so noon and midnight are the same size, 
        h_stroke = h*2;
    } else if (h==0){
        h_stroke == 24;
    }
    noFill();
    stroke(106,193,196);
    strokeWeight(h_stroke); //maps hour of the day to the weight of the stroke
    ellipse(width/2,height/2,width/4*3);

    // minute circle
    var m = minute();
    var m_stroke = m;
    stroke(69,152,155);
    strokeWeight(m_stroke); //maps minute to the weight of the stroke
    ellipse(width/2,height/2, width/2);

    //second circle
    var s = second();
    var s_map = map(s,0,59,0,359); // map seconds to the degrees of a circle 
    s_map = radians(s_map); // turn degrees into radians
    stroke(197,221,221); 
    strokeWeight(12);
    ellipse(width/2,height/2,width/4); // circle that is always visible
    noFill();
    
    var sec_colR = map(s,0,59,234,0);
    var sec_colG = map(s,0,59,255,127);
    var sec_colB = map(s,0,59,255,130);

    push();
    translate(width/2,height/2);
    rotate(radians(270));
    stroke(sec_colR,sec_colG,sec_colB);
    strokeCap(SQUARE);
    arc(0,0,width/4,height/4,0,s_map);
    pop();

}

Looking Outwards-06 Alison Hoffman

screen-shot-2016-10-07-at-10-32-21-pm

While researching computational art that uses randomness I stumbled upon the blog of Fletcher Bach. I was immediately mesmerized by his generative terrain pieces (screenshot above). He has created this interesting pieces with Processing and random lines that get added in the background. What I admire most about this piece is that the gray scale and rather simple composition allow the randomness to speak for itself. While simple in form (its lines and color), it is complex and dimensional in scope. The randomness makes this piece dynamic and visually appealing. To see his pieces check out his blog. http://fletcherbach.com/filter/processing/COMPUTATIONAL-ART

Looking Outwards 05 – Alison Hoffman

1327573131_chamelion-01-1000

This piece is a 3D model of a Chameleon by Aram Vardazaryan done in completely in photoshop. Even though it is incredible that this piece only took him a week to complete, what I find more fascinating is how it not only is a 3D render in 2D, but that it is also completely sculpture-like. I would expect to find a piece like this in a sculpture garden, crafted from mixed metals and wire, yet it is completely done on the computer with software. It amazes me how realistic the metallic elements are. Recreating such effects must have required a lot of consideration when it came to lighting sources, especially given the fact that there is so much curvature in the shapes.

Project 5 Alison Hoffman

Alison Hoffman


var petalD = 65; // petal depth
var petalW= 60; // petal width
var rotation = 60; // standard rotation
var xspacing = 380; // space between flowers
var yspacing = 270;
function setup() {
    createCanvas(800, 400);
    background(0);
}

function draw() {
    // draw white stripes
    for(var i = 40; i <height; i +=100){
        stroke(255);
        strokeWeight(50);
        line(0,i,width,i);
    }

    //draw the flowers
    for(var y = 0; y < height; y+= yspacing){
        for(var x = 0; x < width; x+= xspacing){
            flower(x,y);
        }
    }

    noLoop();
}

function flower(x,y){     // function to make flower
    noStroke();

    push();
    translate(x,y);
    
    // leaves           
    fill(179,253,181);
    ellipse(petalD,0,120,20);
    rotate(radians(143));
    ellipse(petalD,0,120,20);
    rotate(radians(230));
    ellipse(petalD,0,120,20);
    rotate(radians(195));
    ellipse(petalD,0,120,20);
    
    rotate(radians(0));  // reset to no rotation
    for (var i=0; i<9; i++){     // makes up to nine petals
        if(i%2==0){
            fill(255,191-i,229-i);  // make every other petal darker 
            petalW = 90;  // vary petal width 
            petalD = 80; //vary petal depth
        }else{
            fill(255,200+i,230+i); // make every other petal lighter
            petalD = 75;  // vary petal depth
            petalW = 90; // vary petal width
        }
        rotate(radians(rotation));
        ellipse(petalD/2,0,petalD,petalW); // makes a petal
        rotation += i;   // makes rotations less uniform and circular
        fill(0);
        ellipse(10,0,15); // center circles 
    }

    pop();

}

For this project I wanted to try to create a wallpaper that combined geometric elements and more organic one. I have been seeing a lot of designs that have been combining stripes with florals, so I decided to try to recreate that in this project.