Month: October 2021

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: