Category: SectionB

My process for this project was to design a way for each created image to be unique. The double clicked function allows one to create and vibrant background that can then be drawn over with the original image. My face in the original is a surprised face so I used that text to allow one to create funny moments where certain parts of the image can be filled in more than other parts. I was unable to embed the code as the embeding instructions do not work.

let img;
let min, max;

function preload() {
  img = loadImage('https://i.imgur.com/Wup8Ien.jpeg');
}

function setup() {
  createCanvas(480, 480);
  min = 4;
  max = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  let randomVal = map(random()*300, 0, width, min, max);
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pix = img.get(x, y);
  fill(pix, 128);
  triangle(x, y, x+randomVal, y, x+randomVal/2, y+randomVal);
}

My art creates randomly sized triangles that match the colors of pixels in an image. They are continuously drawn, and you can eventually see the face that is being created. I chose a picture of a redhead on imgur because I thought it would be fun to see his bright hair.

My Project

//Chuong Truong;
//Section B;

//global variable that holds a picture of my face;
var myFace;

//the preload function loads in my face from imgur;
function preload(){
    myFace = loadImage("https://i.imgur.com/Dd41LFT.jpg");
}

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    rectMode(CENTER);
}

function draw() {
    //makes the background from pixels of the upper left part of my picture;
    for (var i = 0; i < 240; i+= 10){
        for (var j = 0; j < 240; j+= 10){
            var sectionPiece = myFace.get(i, j, 20, 20);
            image(sectionPiece, i*2, j*2, 20, 20);
        }
    }

    //lines that connect to make a grid;
    noFill();
    strokeWeight(2);
    ellipse(240, 240, 360, 360);
    stroke(random(256), random(256), random(256));
    line(0, 240, 480, 240);
    line(240, 0, 240, 480);
    for (var m = 60; m < 400; m += 20){
        stroke(random(256), random(256), random(256));
        line(m, 120, m, 360);
    }
    for (var o = 60; o < 480; o += 30){
        stroke(random(256), random(256), random(256));
        line(60, o, 420, o);
    }
    //random outlines of rectangles and circles;
    for (var h = 0; h < 100; h ++){
        stroke(random(256), random(256), random(256));
        rect(random(20, 460), random(20, 460), 20, 20);
        ellipse(random(20, 460), random(20, 460), random(5, 25), random(5, 25));
    }
    //creates the left to right diaganol sections of my picture;
    for (var l = 0; l < 1680; l += 240) {
        push();
            scale(0.25);
            var sectionPiece2 = myFace.get(l, l, 240, 240);
            image(sectionPiece2, l, l, 240, 240);
        pop();
    }
    //creates the right to left diaganol sections of my picture;
    for (var n = 1680; n > 0; n -= 240){
        push();
            scale(0.25);
            var sectionPiece3 = myFace.get(0 + n, 1680 - n, 240, 240);
            image(sectionPiece3, 0 + n, 1680 - n, 240, 240);
        pop();
    }
    noLoop();
}

For this project, I went with something simple (and hopefully acceptable). I am not that creative.

sketchDownload

 //Yanina Shavialena
 //Section B

//My portrait
var image;
//Places I've been/Want to go to
var words = ['Belarus','USA','Bulgaria','Poland','Spain','France','South Korea'];
//The state of mouse pressed
let pressedState = false;

//This function loads the image
function preload() {
    var imagelink= "https://i.imgur.com/CQ38vbw.jpg";
    image = loadImage(imagelink);
}
 
//This function created canvas and makes sure the picture is in dimensions of the canvas
function setup() {
    createCanvas(480, 480);
    image.resize(480, 480); 
    background(0);
    image.loadPixels();
    frameRate(10000000);
}
 
function draw() {
    //random x and y positions and get the color from that x and y from my portrait
    var x = random(width);
    var y = random(height);
    var c = image.get(x, y);

    if( pressedState == false){
        //random start controlling point
        var x1 = x + random(-25,25);
        var y1 = y + random(-25,25);
        //random final point
        var x3 = x + random(-15,15);
        var y3 = y + random(-15,15);
        //random final controlling point
        var x4 = x3 + random(-25,25);
        var y4 = y3 + random(-25,25);

        stroke(color(c));
        curve(x1, y1, x, y, x3, y3, x4, y4);

        //hearts at the beginning and final point
        heart(x,y,5,c);
        heart(x3,y3,5,c);
    }

    //puts words at random points
    else{
        noStroke();
        fill(c);
        textSize(random(10));
        text(random(words),x,y)
    }
}

//when mouse is pressed, mouseState is updated and the background is reset
function mousePressed(){
    if(pressedState == false) {
        pressedState = true;
    }
    else {
        pressedState = false;
    }
    background(0);
}

//creates hearts to use for the ends of the lines
function heart(x, y, size, color) {
    fill(color);
    beginShape();
    vertex(x, y);
    bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
    bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
    endShape(CLOSE);
}

I really enjoyed this project because I could finally implement the idea of pixels and creativity. It was hard to come up with something at first but then I thought about what could describe me in my portrait so I decided to use an emoji of a heart because I think love is one of the strongest feelings on Earth and after the click of a mouse multiple countries would pop up randomly to make up an image: one of the countries is where I was born, one of the countries is where I live right now, then the remaining countries are where I visited or where I want to visit.

var img;

function preload() {
    img = loadImage("https://i.imgur.com/TWN7sA6.jpeg");
}

function setup() {
    createCanvas(300, 300);
    frameRate(60);
    noStroke();
    img.resize(width, height);
    img.loadPixels();
}

function draw() {
    fill(0);
    text("keep mouse pressed for different effect", 50, 10);

    if(mouseIsPressed) { // while mouse is pressed, generate random squares 
        let pix_x = floor(random(img.width));
        let pix_y = floor(random(img.height));
        let pix = img.get(pix_x, pix_y);
        fill(pix);
        var square_x = random(width);
        var square_y = random(height);
        let mapX = map(mouseX, 0, width, 0, 20);
        square(square_x, square_y, mapX);
    } else { // otherwise, use circles 
        let x = floor(random(img.width));
        let y = floor(random(img.height));
        let pix = img.get(x, y);
        fill(pix);
        circle(x, y, random(15)); //diameter random 
    }
}

I used an image that I found on imgur by Mihaela Noroc, a Romanian photographer. I chose this particular image because it involved a lot of vibrant colors, which I thought would be fun to work with. Here are some screenshots of my portrait: