Month: October 2017

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-09  

var underlyingImage;
var nPoints = 100;
var CYCLOID = 0; 

var titles = ["-●●●-"];
var curveMode = CYCLOID;

function preload() {

    var myImageURL = "https://i.imgur.com/cNsCKtz.png";
    underlyingImage = loadImage(myImageURL);
}

function setup() {

    createCanvas(480, 480);
    background(100, 170, 25, 100);

    underlyingImage.loadPixels();
    frameRate(100);

    var myImageURL2 = "https://i.imgur.com/Sna9w4t.png";
    img = loadImage(myImageURL2)
    
}

function draw() {

    textSize(23);
    fill(0, 200, 0);
    text("Eat healthy, ya picky eater!", 10, 30);

    textSize(23);
    fill(0, 200, 0);
    text("These edamame beans will make you strong", 10, 400);

    //photo of edamame beans 
    image(img, 0, height/4, width/2);

    //draws the picture
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

        noStroke();
        fill(theColorAtLocationXY);
        //little pie slices
        arc(px, py, 17, 17, 0, HALF_PI);
    
        //little edamame beans
        //controlled by mouse
        fill(78, 215, 0, 25); 
        text(titles[curveMode], mouseX, mouseY);
        //having this below means the 
        //beans will have no no stroke
        stroke(0);
}

function drawEdamameBeans (thisX, thisY) {

    fill(theColorAtLocationXY);
    titles(titles[curveMode], py, thisX, thisY);
}

My goal with this project was to focus on having fun and being playful with code versus feeling defeated by it. I started with a photo of me from freshman year eating my typical meal, broccoli (which I never ate because it was undercooked) and mac and cheese. That year was not very healthy for me food wise, and so I wanted to make fun of myself being a picky eater in this project, though I have improved a lot.

I decided to have arcs make up the photo because they looked like slices of pie, and then wrote code so that whenever the mouse was dragged a shape would be drawn. I chose “-●●●-“ to be the shape because it looks like edamame beans, which I found I enjoy eating. Plus they’re healthy. Now, by moving these around on the screen, I essentially am “feeding myself” if an edamame bean is moved towards my mouth!

aboyle portrait

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/znMO3pp.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(470, 410);
    background(255);
    underlyingImage.loadPixels();
//framerate is low, so random dots appear slowly
    frameRate(3);
}

function draw() {
//creates random dots
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
//makes dots match the color of the photo
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
//varies size of random dots
    var ellipseSize=random(3,7)
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, ellipseSize);

}


function mouseDragged() {
//if you drag mouse, you get line of randomly sized dots
    var ellipseSize=random(3,7)
    var theColorAtMouse=underlyingImage.get(mouseX,mouseY)
    fill(theColorAtMouse)
    ellipse(mouseX, mouseY, ellipseSize);
}


function mousePressed(){
//if you press mouse, you get randomly sized dot
    var ellipseSize=random(3,7)
    var theColorAtMouse=underlyingImage.get(mouseX,mouseY)
    fill(theColorAtMouse)
    ellipse(pmouseX, pmouseY, ellipseSize);
}

//My name is Anna N Boyle, so I made my picture appear faster
//if you type in the letters A N B O Y L E
//each section is the width of the canvas and 60 pixels down
//and each ellipse is 10 pixels and spaced evenly
//the color variables make the ellipses match the photo color

function keyTyped(){
    if (key==='a'){
      for(i=0; i<width; i+=10){
        for(w=0; w<60; w+=10){
        var theColorAtTheA=underlyingImage.get(i,w)
        fill(theColorAtTheA)
        ellipse(i,w,10)
    }
  }
}
    if (key==='n'){
        for(i=0; i<width; i+=10){
          for(w=60; w<120; w+=10){
            var theColorAtTheN=underlyingImage.get(i,w)
            fill(theColorAtTheN)
            ellipse(i,w,10)}
          }
          firstNCheck=1
        }
    if (key==='b'){
      for (i=0; i<width; i+=10){
        for(w=120; w<180; w+=10){
          var theColorAtTheB=underlyingImage.get(i,w)
          fill(theColorAtTheB)
          ellipse(i,w,10)}
    }
  }
    if (key==='o'){
      for (i=0; i<width; i+=10){
        for(w=180; w<240; w+=10){
          var theColorAtTheO=underlyingImage.get(i,w)
          fill(theColorAtTheO)
          ellipse(i,w,10)}
      }
}
    if (key==='y'){
      for (i=0; i<width; i+=10){
        for(w=240; w<300; w+=10){
          var theColorAtTheY=underlyingImage.get(i,w)
          fill(theColorAtTheY)
          ellipse(i,w,10)}
        }
      }
      if (key==='l'){
        for (i=0; i<width; i+=10){
          for(w=300; w<360; w+=10){
            var theColorAtTheL=underlyingImage.get(i,w)
            fill(theColorAtTheL)
            ellipse(i,w,10)}
          }
        }
        if (key==='e'){
          for (i=0; i<width; i+=10){
            for(w=360; w<height; w+=10){
              var theColorAtTheE=underlyingImage.get(i,w)
              fill(theColorAtTheE)
              ellipse(i,w,10)}
            }
          }
}

//If you press the enter key, the portrait resets to white screen
function keyPressed(){
    if (keyCode===ENTER){
      background(255);
    }
}

This was a fun project! I went ahead with the “randomly appearing dots” idea, but I made the frame rate very low so they would appear slowly–I wanted to the majority of my portrait to appear as a result of the viewer interacting with it. I made it so if you clicked the mouse a randomly sized dot appears at that point, and if you drag the mouse a line of dots appears. Since this was a portrait of me, I made it so typing my first two initials and my last name would make sections of the portrait appear. Finally, if you press Enter, the portrait resets to a white canvas and lets you start over!

The portrait when you drag and click the mouse 

The portrait when you type in ANBOYLE

The portrait when you use a mix of typing and dragging