Category: Section D

Cross Hairs

var baseImage;

//pre load my underlying image
function preload() {
    var imgurLink = "https://i.imgur.com/jjMBr8v.jpg";
    baseImage = loadImage(imgurLink);
}

function setup() {
    createCanvas(480, 480);
    background(0);
//load the pixels of the image so they can be referenced later
    baseImage.loadPixels();
    frameRate(15);
}

function draw() {

//randomly select a pixel on the canvas
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
//loads the color from the base image so the cross hairs coordinate with the colors of the base image
    var theColorAtLocationXY = baseImage.get(ix, iy);
//randomly generate points for the lines to make cross hairs
    var rX = random(1,8);
    var rY = random(1,8);

    noStroke();
    fill(theColorAtLocationXY);
    stroke(theColorAtLocationXY);

//create cross hairs
    line(px, py, px + rX, py + rX);
    line(px + rY, py, px + rX - rY, py + rX);

}

For this Project I decided I did not want to make shapes like ellipses or rectangles, but I wanted to use line work. Instead of just randomly placed lines I decided to make randomly generated cross hairs to add another layer to the sketch.

odhP9

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 9

var underlyingImage;
var pict;

function preload() {
    //Loads two different images:
    //Image 1
    var myImageURL = "https://i.imgur.com/AOEHv7s.jpg";
    //Image 2
    var myImageURL2 = "https://i.imgur.com/iGOj0Sd.jpg"; 
    underlyingImage = loadImage(myImageURL);
    underlyingImage2 = loadImage(myImageURL2);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    underlyingImage2.loadPixels();
    frameRate(60);
    pict = random(1,2);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    //"gets" the pixels color in each image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //Draws Randomly sized, randomly located rectangles reflecting the colors in image 1
    noStroke();
    fill(theColorAtLocationXY);
    rect(px, py, random(1, 10), random(1, 10));

    //Draws a line the follows the mouses location that reflects the colors in image 2
    var theColorAtTheMouse = underlyingImage2.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    strokeWeight(10);
    line(pmouseX, pmouseY, mouseX, mouseY);
}

I chose to have different photos in my portrait, each revealed and shown in different ways. One image is revealed with random varying sized rectangles and the other with the mouse with ellipses. One appears cubist-like, and the other more expressionist.

Both shown finished:

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// project-09
var underlyingImage;
var ellipseSizeX;
var ellipseSizeY;


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

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}


//MAKE THE DOTS LARGER FARTHER FROM THE CENTER
function draw() {

//to draw puzzle pieces spaced on a grid 12 pixels apart
    var px = floor(random(width/12))*12;
    var py = floor(random(height/12))*12;
    //to constrain puzzle pieces to canvas
    var ix = constrain(px, 0, width-1);
    var iy = constrain(py, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //to draw the actual pieces at random locations
    puzzle(px, py);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    // stroke(theColorAtTheMouse);
    // line(pmouseX, pmouseY, mouseX, mouseY);
}
//to draw the puzzle piece
function puzzle(x, y) {
    push();
    translate(x, y);
    //blocks of puzzle piece
    rect(1, 4, 11, 3);
    rect(9, 7, 3, 8);
    rect(4, 7, 5, 5);
    rect(1, 12, 3, 3);
    //pegs of puzzle piece
    rect(5, 1, 3, 1);
    rect(6, 1, 1, 3);
    rect(12, 9, 3, 1);
    rect(14, 8, 1, 3);
    //final fills of puzzle piece
    rect(1, 7, 1, 1);
    rect(3, 7, 1, 1);
    rect(1, 11, 1, 1);
    rect(3, 11, 1, 1);
    rect(4, 12, 1, 1);
    rect(4, 14, 1, 1);
    rect(8, 12, 1, 1);
    rect(8, 14, 1, 1);
    pop();
}

My plan for this project was to create a puzzle that gradually completes itself. Using the marvelous Maggie as a subject wearing her signature origami hat, I made a single puzzle piece that could be repeated infinitely on a square grid. Although I initially had no idea how to draw a good-looking curved puzzle piece, i soon realized that the pieces were so small that I could draw them using only rectangles and end up with a recognizable piece at the end.
In the end I was relatively happy with the result, I only wish the final product could have a higher resolution, perhaps each piece could contain multiple colors.

(edited to change sketch size)

click to change direction pixels come from.

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project-09

//global variables
var squares = [];
var direction;
var side;


function preload(){
    var picurl = "https://i.imgur.com/ABZ50uF.jpg";
    pic = loadImage(picurl);
}

function setup(){
    createCanvas(400,400);
    pic.loadPixels();
    background(0);
    direction = 30; //setting up initial values of the variables to start
    side = 0;
}



function drawsquares() {
    var ix = constrain(floor(this.x), 0, width-1);
    var iy = constrain(floor(this.y), 0, height-1);
    var colourXY = pic.get(this.x, this.y);//gets fill colour from image

    fill(colourXY);//fills with pixel colour
    noStroke();
    rect(this.x, this.y, this.size, this.size);
}


function movesquares() {//function to make the squares roll
    this.x += this.dx*0.1;
}

function portrait(px, py, pdx) {
    s = {x: px,
         y: py,
         dx: pdx,
         squares: drawsquares,
         speed: movesquares,
         size : random(1,3)//randomizes the size of each individual square
        }
    return s;
}
function draw(){
    noStroke();
    newlines = []; //empty array to hold lines
    for (var i=0; i<squares.length; i++){
        var s = squares[i];
        s.speed();//returns function speed
        s.squares();//returns function squares
        newlines.push(s);
    }
    squares = newlines;
}

function mousePressed(){//changes the side and the direction of the lines each time mouse is pressed
    direction = -1*direction;
    if (side == 0){
        side = 400;
    }
    else if (side == 400){
        side = 0;
    }

}
function mouseMoved() {
    var newsquare = portrait(side, mouseY, random(direction));
    squares.push(newsquare);
}

The initial idea for this sketch was to create a portrait that slowly appeared from the sides. However, to integrate the mouse, I made the pixels appear where mouseY is and made clicking change whether the pixels appeared from the right or left.

This is not the complete portrait, however this shows the code’s aesthetics better.

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
// Project-09

var Image;
var initials = []; //my friends and my initials

function preload() {
  var imageURL = "https://i.imgur.com/6U7x1D3.jpg"
  Image = loadImage(imageURL);
}

function setup(){
  createCanvas(270, 480);
  Image.loadPixels();
}

function draw(){
  var initials = ["DK", "MC", "WYL"];
  var InitialsIndex = 0;
  var px = random(width); //x-coordinate of text
  var py = random(height);// y-coordinate of text
  var qx = constrain(floor(px), 0, width);
  var qy = constrain(floor(py), 0, height);
  var colorAtXY = Image.get(qx, qy);
  var colorAtMouse = Image.get(mouseX, mouseY);

  for ( var i = 0; i < initials.length; i++){
    InitialsIndex = i;

    //draws text with image color at randomized x and y-coordinates
    textSize(random(10,20));
    strokeWeight(random(3,6));
    fill(colorAtXY);
    text(initials[InitialsIndex], px, py);

    //draws text with image color at mouse x and y-coordinates
    textSize(random(10,20));
    strokeWeight(random(3,6));
    fill(colorAtMouse);
    text(initials[InitialsIndex], mouseX, mouseY);
  }
}

I used a picture of my friends and I that I took last winter. I used my friends and my initials to draw the image. The locations and who’s initials were drawn were randomized.