Baby Photoshop

I did not embed the code because of the pixel size as well as multiple files the code loads. This is my final project in a .zip file. It includes multiple photos, but more importantly a font file that I couldn’t link in any way other than the file.

For my final project, I want to expand on the work I did in week 9. I will create a photo editor. An editor that applies a multitude of filters to different aspects of the images. It will load an image of the correct size, provide multiple options for editing through a panel of interactive buttons, and will re-display the edited image. Different buttons will edit the composition, color, pixels, and any other edits I can come up with or code. I plan to create a blur function. A black and white filter. A duotone filter with an attached color editor. A pixelating function. And possibly more I will come up with in the process, this is all I know I can code right now.

I want to also focus on creating a clean and successful UI in p5js to successfully support the code. Something simple but powerful that I will also create descriptive icons to describe the different possible edits that can be made to the image.

“MOUSE.PRESS”

sketch

var S = 25;
var M = 50;
var L = 200;
var pickColor;
function setup() {
  createCanvas(800,800);
  background(0);
}
function mousePressed() {
  pickColor = floor(random(0, 2));
  drawThing(mouseX, mouseY);
}
function drawThing(x, y) {
  strokeCap(PROJECT);
  T = makeTurtle(x, y); 
  T.setWeight(5);
  T.setColor(color(256, 256, 0));
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.right(90);
  T.forward(L);
  T.penDown();
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.right(90);
  T.forward(L/2+2);
  T.right(90);
  T.forward(L/2+2);
  T.penDown();
  T.right(90);
  T.forward(S/2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
  T.penUp();
  T.forward(2);
  T.right(90);
  T.forward(L);
  T.penDown();
  T.right(90);
  T.forward(S/2+2);
  T.left(90);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(135);
  T.forward(M);
  T.left(90);
  T.forward(M);
  T.left(135);
  T.forward(S);
  T.right(90);
  T.forward(S);
  T.left(90);
  T.forward(S/2);
}
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;}

sketch

var house = [];
var houseImg = [];
function preload() {
  houseImg[3] = loadImage("https://i.imgur.com/wsrsd27.png");
  houseImg[2] = loadImage("https://i.imgur.com/AG35goZ.png");
  houseImg[1] = loadImage("https://i.imgur.com/PkUvm1J.png");
}  
function setup() {
  createCanvas(480, 480);
  for (var i = 0; i < 1; i++){
    var x = random(0,width);
    house[i] = makeHouse(x);
  }
  frameRate(10);
}
function draw(){
  background(256);
  updateNdisplayHouses();
  newHouses();
}
function updateNdisplayHouses() {
  for (var i = 0; i < house.length; i ++){
    house[i].move();
    house[i].display();
  }
}
function newHouses() {
  var newHouseProb = .015;
  if (random(0,1) < newHouseProb) {
    house.push(makeHouse(width));
  }
}
function houseMove() {
  this.x += this.speed;
}
function houseDisplay() {
  push();
  translate(this.x, 0);
  // var imgNum = floor(random(1, 3.99));
  image(houseImg[1], 0, 0);
  image(houseImg[2], 220, 0);
  image(houseImg[3], 400, 0);
  noStroke();
  fill(0);
  rect(0, 400, 2000, 80);
  for (var i = 0; i < 2000; i += 48) {
    fill(256, 256, 0);
    rect(i, 435, 28, 10);
  }
  pop();
}
function makeHouse(startLocationX) {
  var house = {x: startLocationX,
              speed: -5,
              move: houseMove,
              display: houseDisplay}
  return house;
}

sketch

var Emma;
var z = .5;
function preload() {
  Emma = loadImage("https://i.imgur.com/pWLCrQJ.jpg"); //image from imgur
}
function setup() {
  createCanvas(400, 400);
  background(0);
  for (var i = 0; i < width/2; i+=z) { 
    for (var j = 0; j < height/2; j+=z) {               //nested for loop image sized
      var pixelColor1 = Emma.get(i, j);                 //storing pixels info
      var pixelBrightness1 = brightness(pixelColor1);   //sampling brightness of pixles
      noStroke();
      fill(256, 0, 256, pixelBrightness1 + 30);              //solid color brightness from image
      ellipse(i, j, z, z);                              //draw new image using colors
    }
  }
  for (var k = 0; k < width/2; k+=z) {
    for (var l = 0; l < height/2; l+=z) {
      var pixelColor2 = Emma.get(k, l);
      var pixelBrightness2 = brightness(pixelColor2);
      noStroke();
      fill(256, 256, 256, pixelBrightness2 + 50);
      ellipse(k + width/2, l + width/2, z, z);
    }
  }
  for (var m = 0; m < width/2; m+=z) {
    for (var n = 0; n < height/2; n+=z) {
      var pixelColor3 = Emma.get(m, n);
      var pixelBrightness3 = brightness(pixelColor3);
      noStroke();
      fill(0, 256, 256, pixelBrightness3 + 30);
      ellipse(m + width/2, n, z, z);
    }
  }
  for (var x = 0; x < width/2; x+=z) {
    for (var y = 0; y < height/2; y+=z) {
      var pixelColor4 = Emma.get(x, y);
      var pixelBrightness4 = brightness(pixelColor4);
      noStroke();
      fill(256, 256, 0, pixelBrightness4 + 30);
      ellipse(x, y + width/2, z, z);
    }
  }
}

sketch

var nPoints = 100;
function setup() {
    createCanvas(400, 400);
    frameRate(60);
}
function draw() {
    background(0);
    translate(width / 2, height / 2);
    var a = 150; //for function
    var b = 25;
    var h = 25;
    fill(256, 256, 0);
    push();
    beginShape();
    for (var i = 0; i < nPoints; i++) { //draw the curves
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var x = (a - b) * cos(t) + h * cos(t * (a - b) / b); //use these functions
        var y = (a - b) * sin(t) - h * sin(t * (a - b) / b);
        vertex(x + random(-1, 1), y + random(-1, 1)); //wiggle
        if (mouseX > width / 2 & mouseY > height / 2) { //2nd quadrant
          fill(256, 0, 256)
          b = 50;
          h = 50;
        }
        if (mouseX < width / 2 & mouseY < height / 2) { //3rd quadrant
          fill(256)
          b = 10;
          h = 10;
        }
        if (mouseX > width / 2 & mouseY < height / 2) { //4th quadrant
          fill(0, 256, 256)
          b = 15;
          h = 15;
        }
    }
    endShape(CLOSE);
    pop();
}

sketch

//Mason Young-Shor 
//Section C 
//myoungsh@andrew.cmu.edu 
//Abstract Clock
function setup() {
  createCanvas(600, 600);
  background(0);
}
function draw() {
  background(0);
  angleMode(DEGREES);
  var h = hour();
  var m = minute();
  var s = second();
  if (h > 12) { //12 hour clock
    h -= 12;
  }
  for (var H = 1; H < h + 1; H ++) { //hour indicatior
    var x = 0;
    var y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(30 * H);
    if (H % 3 === 0) { //every three hours is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are small and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 110 + x);
    ellipse(0, 110 + x, 10 + y, 10 + y);
    pop();
  }
  for (var M = 1; M <= m; M ++) { //minute indicator
    x = 0;
    y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(6 * M);
    if (M % 5 === 0) { //every five minutes is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are smal and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 170 + x);
    ellipse(0, 170 + x, 10 + y, 10 + y);
    pop();
  }
  for (var S = 1; S <= s; S ++) { //second indicator
    x = 0;
    y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(6 * S);
    if (S % 5 === 0) { //every five seconds is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are small and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 230 + x);
    ellipse(0, 230 + x, 10 + y, 10 + y);
    pop();
  }
}

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    var tile = 50; //each tile is 50x50
    for (var y = 0; y < 8; y++) { //8 columns
        for (var x = 0; x < 8; x++) { //and 8 rows
            var py = 25 + y * tile; //move px and py into the grid spots
            var px = 25 + x * tile;
              noStroke();
              fill(256); //draw white parts
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10); 
                //only once
              push();
              translate(-25, 0); //but copy and translate them 
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10);
              pop();
              if (x % 2 == 0) { //if its an even column
                fill(256, 256, 0); //draw in yellow
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, py - 10, 
                  px + 12.5, py, px, py + 10); 
                //similarly expressing triangles 
                //and copying+translating them all over the place
              } else { //if odd row do the saem in pink
                fill(256, 0, 256);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, 
                  py - 10, px + 12.5, py, px, py + 10);
              }
        }
    }
    noLoop();
}

I started this project making small edits to the dot code from  assignment b, making the tiles all line up and fit into the smaller canvas without a border. Then I started imagining what could be drawn over and over in the small boxes I created. Luckily my friend was looking at patterns on her computer and this seemed like the perfect challenge. I used a sketch I made, finding  way to replete the pattern and used that to play each triangle and quadrangle within the variable defined plane of a single tile.

As soon as I read this looking outwards was about sound a project I was tangentially involved in immediately came to mind. Actually quite similar to our professors work with music by a professor at Princeton university Perry Cook. He had a totally electronic orchestra.

https://www.cs.princeton.edu/~prc/

He did work with my dad, a stone sculptor on a project for an installation in Princeton. They made a lithopone, historically a large upright stone xylophone. The installation quark park was many pieces done in collaboration between local artists and Princeton University scientists.

http://www.princetonoccasion.org/quarkpark/

They created a system that mixed sounds from a stone sculpture being hit with random sounds recorded from the process of making the sculpture toy create a large electronic and stone instrument. When I was a little kid working with my dad on this project I had no idea really what electronic music really meant but as soon as we were showed the trumpet accompanied by a full electronic bras section in class I was reminded of this project.

sketch

function setup() {
  createCanvas(400, 300);
  background(0);
  angleMode(DEGREES);
  for(var x = 100; x < 300; x += 10) { //vary x
    stroke(256);
    line(width, x, x, 0); //draw a line, curve it using varied x
  }
  push(); //reflect the curve
  scale(-1, 1);
  translate(-400, 0);
  for(var y = 100; y < 300; y += 10) {
    stroke(256);
    line(width, y, y, 0); 
  }
  pop();
  push(); //reflect both curves
  scale(1, -1);
  translate(0, -300);
  for(var n = 100; n < 300; n += 10) {
    stroke(256);
    line(width, n, n, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z = 100; z < 300; z += 10) {
    stroke(256);
    line(width, z, z, 0); 
  }
  pop();
  pop();
  push(); //disapear into the distance
  scale(.5, .5);
  translate(200, 150);
  for(var x1 = 100; x1 < 300; x1 += 10) {
    stroke(256);
    line(width, x1, x1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y1 = 100; y1 < 300; y1 += 10) {
    stroke(256);
    line(width, y1, y1, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n1 = 100; n1 < 300; n1 += 10) {
    stroke(256);
    line(width, n1, n1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z1 = 100; z1 < 300; z1 += 10) {
    stroke(256);
    line(width, z1, z1, 0); 
  }
  pop();
  pop();
  pop();
  push(); //go even further back
  scale(.25, .25);
  translate(600, 450);
  for(var x2 = 100; x2 < 300; x2 += 10) {
    stroke(256);
    line(width, x2, x2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y2 = 100; y2 < 300; y2 += 10) {
    stroke(256);
    line(width, y2, y2, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n2 = 100; n2 < 300; n2 += 10) {
    stroke(256);
    line(width, n2, n2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z2 = 100; z2 < 300; z2 += 10) {
    stroke(256);
    line(width, z2, z2, 0); 
  }
  pop();
  pop();
  push();
  scale(.5, .5);
  translate(200, 150);
  for(var x3 = 100; x3 < 300; x3 += 10) {
    stroke(256);
    line(width, x3, x3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y3 = 100; y3 < 300; y3 += 10) {
    stroke(256);
    line(width, y3, y3, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n3 = 100; n3 < 300; n3 += 10) {
    stroke(256);
    line(width, n3, n3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z3 = 100; z3 < 300; z3 += 10) {
    stroke(256);
    line(width, z3, z3, 0); 
  }
  pop();
  pop();
  pop();
  pop();
}

This project started with a lot of frustration with only being able to create arrays of line. And then once I was able to create a curve creating another curve, and controlling it was close to impossible within the same for loop. To solve this problem I copied the same curve and used translations to draw more.