Project-09-Portrait – Page 2 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 09: Portrait

I really enjoyed this project and think this turned out cute. I especially like how the icons reinforce what the image is communicating (I really love fruit).

sketch

/*
    Joan Lee
    Section D

    This program draws a portrait of me GRIPPING my fruit with symbols that represent me loving fruit.
*/

function preload() {
    joan = loadImage("https://i.imgur.com/eMJulaO.png");
}

function setup() {
    createCanvas(385, 480);
    joan.resize(width, height);
    background(255);
    joan.loadPixels();
}

function draw() {
    //want the image to be revealed where the mouse is
    var pixColor = joan.get(mouseX, mouseY);
    
    //revealing image of me GRIPPING fruit with icons that resemble fruit and my love for it
    noStroke();
    iLoveFruit = ["♥", "⊛", "❂"];

    for(var i = 0; i < 3; i ++) {
        fill(pixColor);
        textSize(random(1, 10));
        text(iLoveFruit[floor(random(iLoveFruit.length))], mouseX, mouseY);
    }
}

Project 09

sketch

//Paul
//kengpul
//Section A

var img;
var newImg;

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

function setup() {
  createCanvas(300, 400);
    image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = red(ogCol);
      var g = 210 - green(ogCol);
      var b = 255 - 90 - blue(ogCol);

      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
  
    image(img, 0, 0, width, height);
}

function draw() {
    noStroke();
    if(mouseIsPressed){
        randomPixels();
    }
  
}



function randomPixels(){ // creates random sized magnification 
  //of wherever the mouse is on while pressed scattered across the screen
    
    var newImg = img.get(mouseX,mouseY,random(30,70),random(30,70));
    img.updatePixels();

    image(newImg, random(-10,width), random(-10,height), random(10,20),random(10,20));
}

function keyPressed(){
    //when key pressed reset
    //when key pressed reset the small square samples created wit mouse click
  if(key == "r" || key == "R"){
      image(img,0,0,300,400);
      var r = 255 - 90 - red(ogCol);
      var g = 210 - green(ogCol);
      var b = blue(ogCol);
  }



///!!! the program takes a whille to load between each filters so it might take a few sec.





//filter a
    if(key == "A" || key == "a"){

    image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = 255 - 90 - red(ogCol);
      var g = 210 - green(ogCol);
      var b = blue(ogCol);
      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
    image(img, 0, 0, width, height);
  //filter b
  }else if(key == "B" || key == "b"){
    //when key pressed reset
    //background(100);
    image(img,0,0,300,400);

     image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = 255 - 90 - (ogCol);
      var g = 210 - green(ogCol);
      var b = blue(ogCol);
      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
    image(img, 0, 0, width, height);
  //filter C
  }else if(key == "C" || key == "c"){
    //when key pressed reset
    //background(100);
    image(img,0,0,300,400);

     image(img,0,0,300,400);

    for (var y = 0; y < img.height; y++) {
    for (var x = 0; x < img.width; x++) {
      // Read the pixel's color
      var ogCol = img.get(x, y);

      //creates interesting effects with the color with inversion and similar ieffects
      var r = 255 - red(ogCol);
      var g = 0- green(ogCol);
      var b = 50- blue(ogCol);
      var newCol = color(r, g, b);

      // Set the new pixel's color
      img.set(x, y, newCol);
    }
  }
  img.updatePixels();
  
    image(img, 0, 0, width, height);
  }


}

Project 9 – Computational Portrait- Fish and Man

It was pretty challenging to come up with original ideas on what
can be creative for me , while we just using the color of pixels to
create a blurry version of original picture. After all, I decided
fishes are fun to draw, and if I can make them moving, I can generate
the picture very quickly as shown in the canvas.

It’s very laggy to view all the posts, so here is a picture:

sketch Download

/* Jiayi Chen
   jiayiche    Section A */
var head;
var fish = [] //array for fish
function preload(){//load the image
    head = loadImage('https://i.imgur.com/VAEIjHv.jpeg');
}

function setup() {
    createCanvas(480, 480); 
    imageMode(CENTER); //exist because I don't know if it's important
    head.loadPixels(); //load pixels
    background(220);
    head.resize(480,480); //resize head size to canvas size
}

function draw(){
    var x =floor(random(0,480));//a random x value
    var y =floor(random(0,480));//a random y value

    fish.push(makeFish(x,y)); //create more fishes

    for (var i = 0; i < fish.length; i++) { //draw all the fishes 
        fish[i].stepFunction();
        fish[i].drawFunction();
    }
    if(fish.length==1000){
        noLoop();
    }
}

function makeFish(fx,fy){
    var f = {x: fx, y: fy,
             stepFunction: stepFishes,
             drawFunction: drawFishes
         }
    return f;
}

//draw fishes according to pixel color
function drawFishes(){ 
    var o=this.x
    var p=this.y    
    push();
    noStroke();
    c= head.get(o,p)
    fill(c);
    ellipse(o,p,20,10);//body
    line(o-2,p-5,o-2,p+5);
    triangle(o+10,p,o+13,p+2,o+13,p-2)//tail
    eyeball(o,p);
    pop();

}


//fishes eye
 function eyeball(x,y){
    stroke('white')
    circle(x-5,y,1)
    ellipse(x-5,y,3,3)
 }

function stepFishes(){ //fishes moving
    this.x = this.x + random(-3,3)
    this.y = this.y + random(-3,3)
}

Project 09

I wanted to create a portrait with my fav words and cute text faces! When the mouse is pressed, the pixel colors are in black and white.

Here is how it looks after some time.

sketch

// Sowang Kundeling Project 09 Section C

var img;
var imgbw;
var texts = ["( ͡° ͜ʖ ͡°)", "(づ｡◕‿‿◕｡)づ", "(◕‿◕✿)", "(ᵔᴥᵔ)", "♥‿♥", "~(˘▾˘~)", "ᕦ(ò_óˇ)ᕤ", "(｡◕‿◕｡)", "ʕ•ᴥ•ʔ", "corn", "taco", "cat"];

function preload(){
  //load image
  img = loadImage("https://i.imgur.com/1V17iyS.png");
  imgbw = loadImage("https://i.imgur.com/qedFJ3f.jpg")
  frameRate(10000);
}


function setup() {
    createCanvas(350, 350);
    //img.resize(450, 450);
    //imageMode(CENTER);
    //textMode(CENTER);
}


function draw() {
    //image(img, 0, 0, 400, 400);
    var x = random(img.width); // random coordinate for the pixel
    var y = random(img.height);

    var pixelColor = img.get(x*5, y*5); // pixel color
    var pixelColorbw = imgbw.get(x*5, y*5) // black and white pixel color
  
    if(mouseIsPressed) { // creates black and white pixels when mouse is pressed
      fill(pixelColorbw);
    }else {
      fill(pixelColor);
    }

    strokeWeight(random(5,20));
    textSize(random(5, 20));
    text(random(texts), x, y);
}

Project 09: Computational Portrait

My process: I chose a picture of me on my 3rd birthday. I wanted to incorporate the number 3 into my custom pixel portrait. So I started there. My first custom pixels are made of 3s. Then I started to play with the other ways I could deconstruct, rebuild, and recolor play with the other ways I could deconstruct, rebuild, and recolor my portrait. I have created a 5 Portrait Series.

Portrait 1 – Made of Threes, Portrait 2 – Made of Ovals – inspired by thumbprint art, Portrait 3 – Made of Squares, Portrait 4 – Made of Legos – inspired by Legos, Portrait 5 – Made of Warhol – inspired by Andy Warhol

Press the space bar to see the various portraits I created. Click the mouse to freeze the creation of a portrait. Click again to resume.

sketch

/* Evan Stuhlfire
 * estuhlfi@andrew.cmu.edu section B
 * Project-09: Computational Portrait */

/* My process: I chose a picture of me on my 3rd 
 * birthday. I wanted to incorporate the number 3 into
 * my custom pixel portrait. So I started there. My first custom pixels
 * are made of 3s. Then I started to 
 * play with the other ways I could deconstruct, rebuild, and recolor
 * my portrait. I have created a 5 Portrait Series. */

 /* Portrait 1 - Made of Threes
  * Portrait 2 - Made of Ovals - inspired by thumbprint art
  * Portrait 3 - Made of Squares
  * Portrait 4 - Made of Legos - inspired by Legos
  * Portrait 5 - Made of Warhol - inspired by Andy Warhol */

/* Press the space bar to see the various portraits I created.
 * Click the mouse to freeze the creation of a portrait. Click again
 * to resume. This way portraits can be saved in different states. */

var img; // image variable
var scaleCanvas = 1.4; // factor to make canvas bigger than image

// booleans to determin which portrait to draw
var dThrees = true;
var dEllipses = false;
var dSquares = false;
var dLines = false;
var dOutline = false;

// used with a mouse click to freeze and resume dynamic portraits
var freeze = false; 

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

function setup() {
    // create canvas 1.4 times the size of the original image
    createCanvas(img.width * scaleCanvas, img.height * scaleCanvas);
    background(230);

    textAlign(CENTER);
}
    
function draw() {
    // randomly generate x and y to get color from

    // use randomGaussian so image appears in center first
    var xPos = Math.floor(randomGaussian(img.width/2, 100));
    var yPos = Math.floor(randomGaussian(img.height/2, 100));

    // remap coordinates of image to the canvas size
    var xMap = map(xPos, 0, img.width, 0, width);
    var yMap = map(yPos, 0, img.height, 0, height);

    // get pixel color
    var pixCol = img.get(xPos, yPos);

    // test which syle to draw
    if(dThrees & !freeze) {
        drawThrees(xMap, yMap, pixCol);
    } else if(dEllipses & !freeze) {
        drawEllipses(xMap, yMap, pixCol);
    } else if(dSquares & !freeze) {
        rectMode(CENTER);
        drawSquares(xMap, yMap, pixCol);
    } else if(dLines & !freeze) {
        drawLines();
    } else if(dOutline & !freeze) {
        rectMode(CORNER);
        drawOutline();
    }
}

function keyPressed() {
    // switch between portait drawings when
    // the space bar is pressed
    if(key != " ") {
        // key was not space bar, return
        return;
    }

    if(dThrees){
        dThrees = false;
        dEllipses = true;
        dSquares = false;
        dLines = false;
        dOutline = false;
    } else if(dEllipses) {
        dThrees = false;
        dEllipses = false;
        dSquares = true;
        dLines = false;
        dOutline = false;
    } else if(dSquares) {
        dThrees = false;
        dEllipses = false;
        dSquares = false;
        dLines = true;
        dOutline = false;
    } else if(dLines) {
        dThrees = false;
        dEllipses = false;
        dSquares = false;
        dLines = false;
        dOutline = true;
    } else if(dOutline) {
        dThrees = true;
        dEllipses = false;
        dSquares = false;
        dLines = false; 
        dOutline = false; 
    }
    // reset background, unfreeze if frozen
    background(230);
    freeze = false;
}

function mousePressed() {
    // toggle the freeze boolean to freeze drawing
    freeze = !freeze;
}

function colorShift(pc, shiftType) {
    // read the pixel color variable and shift the color
    // based on shiftType specified
    var r, g, b, t;

    // read colors
    r = pc[0];
    g = pc[1];
    b = pc[2];
    t = pc[3];

    if(shiftType == "green") {
        // shift colors towards green
        r = constrain(r - 10, 5, 200);
        g = constrain(g + 50, 50, 230);
        b = constrain(b + 10, 10, 200);  
    } else if(shiftType == "blue") {
        // shift colors towards blue
        r = constrain(r - 10, 5, 200);
        g = constrain(g + 10, 10, 200);
        b = constrain(b + 50, 50, 230);        
    }

    // map mouse to change trasparancy as it moves vertical
    var my = map(mouseY, 0, height, 50, 180);
    t = my;

    return color(r, g, b, t);
}

function drawThrees(xMap, yMap, pixCol) {
    // draw portrait out of 3s
    var maxSize = 40;

    // green shift colors from original image
    pixCol = colorShift(pixCol, "green");
    stroke(pixCol);
    strokeWeight(1);
    fill(pixCol);
    // map mouse x to new range to control text size
    var mx = map(mouseX, 0, width, 10, maxSize);
    textSize(min(mx, maxSize));

    // draw 3s on canvas
    text("3", xMap, yMap);
}

function drawEllipses(xMap, yMap, pixCol) {
    // draw portrait out of random ellipses

    // blue shift colors from original image
    pixCol = colorShift(pixCol, "blue");
    // use color for fill
    fill(pixCol);
    stroke(pixCol);
    strokeWeight(1);
    ellipse(xMap, yMap, random(5, 35), random(5, 15));
}

function drawSquares(xMap, yMap, pixCol) {
    // create portrait from squares
    // square size is based on the darkness of the pixel color
    var maxColor = 140;
    var midColor = 100;
    var midColor2 = 70;

    // make color more or less transparent with movement of mouseY
    var transColor = colorShift(pixCol, "");
    // set colors
    stroke(transColor);
    fill(transColor);

    // Check pixel color and adjust square size based on how dark color is
    if(pixCol[0] > maxColor & pixCol[1] > maxColor && pixCol[3] > maxColor) {
        square(xMap, yMap, 30);
        fill(pixCol);
        circle(xMap, yMap, 5);
    } else if(pixCol[0] > midColor & pixCol[1] > midColor && pixCol[3] >
        midColor) {
        square(xMap, yMap, 20);
        fill(pixCol);
        circle(xMap, yMap, 5);
    } else if(pixCol[0] > midColor2 & pixCol[1] > midColor2 && pixCol[3] >
        midColor2) {
        square(xMap, yMap, 15);
        fill(pixCol);
        circle(xMap, yMap, 5);
    }else {
        square(xMap, yMap, 20);
        fill(pixCol);
        circle(xMap, yMap, 5);
    }
}

function drawLines() {
    // lego like circles and square in rows and columns
    for(var y = 5; y < img.height; y += 5) {

        for(var x = 5; x < img.width; x += 5) {
            var c = img.get(x, y);

            // map x from img to x from canvas
            var mx = map(x, 0, img.width, 0, width);
            // map y from img to y from canvas
            var my = map(y, 0, img.height, 0, height);

            // fill and draw 
            // shift to lego colors   
            if(c[0] > 180) {
                c = color(255, 255, 0);
            } else if(c[0] > 80) {
                c = color(0, 255, 0);
            } else if(c[0] > 50) {
                c = color(255, 0, 0);
            } else {
                c = color(0, 0, 255);
            }
            fill(c);
            noStroke();
            rect(mx, my, 10, 10);
            stroke(50);
            circle(mx, my, 5);
        }
    }
}

function drawOutline() {
    // draw an Andy Warhol style grid of pixel faces
    // draw four color quadrants
    fill(0, 255, 0); // green
    rect(0, 0, width/2, height/2);
    fill(255, 255, 77); // yellow
    rect(width/2, 0, width, height/2);
    fill(77, 255, 255); // blue
    rect(0, height/2, width/2, height);
    fill(255, 148, 77); // orange
    rect(width/2, height/2, width, height);

    // draw monochrome points at points of color change
    for(var y = 0; y < img.height; y += 3) {
        // get color from image
        var c = img.get(0, y);

        // look ahead to see when to change line color
        for(var x = 0; x < img.width; x += 2) {
            var dc = img.get(x, y);

            // color is different, draw this point
            if(dc[0] - c[0] > 10 || c[0] - dc[0] > 10 || 
                x == img.width - 1) {
                // map x from img to x from canvas
                var mx = map(x, 0, img.width, 0, width);
                // map y from img to y from canvas
                var my = map(y, 0, img.height, 0, height);

                if(c[0] > 60) {
                    drawPointImg(mx, my, color(0, 0, 230), 1);
                    drawPointImg(mx, my, color(230, 0, 230), 2);
                    drawPointImg(mx, my, color(255, 0, 0), 3);
                    drawPointImg(mx, my, color(255, 216, 204), 4);
                }

                // set color variable to new color
                c = dc;
            }
        }
    }
}

function drawPointImg(mx, my, pc, quad) {
    // draw set of points for specified quadrant 
    // map to specified quad
    if(quad == 1) {
        // map points to first quadrant
        qmx = map(mx, 0, width, 0, width/2);
        qmy = map(my, 0, height, 0, height/2);
    } else if (quad == 2) {
        // map points to second quadrant
        qmx = map(mx, 0, width, width/2, width);
        qmy = map(my, 0, height, 0, height/2);
    } else if (quad == 3) {
        // map points to third quadrant
        qmx = map(mx, 0, width, 0, width/2);
        qmy = map(my, 0, height, height/2, height);
    } else if (quad == 4) {
        // map points to fourth quadrant
        qmx = map(mx, 0, width, width/2, width);
        qmy = map(my, 0, height, height/2, height);
    }

    // set color of point
    stroke(pc);
    strokeWeight(.25);

    // draw point
    point(qmx, qmy);
}

Project-09-Portait

Project-09

sketch

//Brody Ploeger
//jploeger
//Project-09
//Section C

var img;

function preload() {
    img=loadImage("https://i.imgur.com/nWRD4t6.jpg");


}

function setup() {
    createCanvas(318, 480);
    background(200);
    img.resize(318,480)


}

function draw() {

//light sections of picture
    for(var i = 0; i<=width; i+=5){
        for(var j = 0; j<=height; j+=5){
            var pixel = img.get(i,j)
            if(pixel[1]>80){
                strokeWeight(5);
                stroke(color(pixel));
                point(i,j)
            }   
        }      
    }


//dark sections of picture
    var x = random(width);
    var y = random(height); 
    var pixel2 = img.get(x,y);
    if(pixel2[1]<120){
        noStroke();
        fill(pixel2);
        square(x,y,10);
    }
   

}

//The project uses two strategies to break up the image. 
//For the light parts, it uses dots that generate immediately. 
//For the dark parts, it uses squares that generate over time.

Project 09: Computational Portrait (Custom Pixel)

This process took me a while to figure out and understand. I wanted it to be interactive in some way and thought, what if you get to “paint” it?”. To my surprise, I was able to figure out the painting portion quite easily. I also wanted the pixels to be more than just squares or circles so I decided to use a phrase that I constantly need to be reminded of: “Believe in yourself”.

sketch my portrait Download

/*
Sandy Youssef; 
section D; 
syoussef@andrew.cmu.edu;
Project-09;
*/

// loads portrait of my face
function preload () {
    face = loadImage ("https://i.imgur.com/47iZQND.jpeg");

}


function setup() {
    createCanvas(480, 480);
    background(220);
    face.resize(480,480); // resizes image proportionally to the canvas
    face.loadPixels(); // loads pixels data
}

function draw() {
        
    // pixels appear at the position of the mouse
    var ColorPixel = face.get(mouseX,mouseY);  // returns text that corresponds to the color of the image at the location of the mouse
    noStroke();
        
    // Array that contains words of a phrase. This allows the individual words to 
    //be displayed on the canvas as opposed to the phrase as a whole to 
    //create shorter sized "pixels"
    word = ["Believe", "In", "Yourself"];
    // loop that continues to iterate over the words 
    for(var i = 0; i < 3; i ++) {
        //draws text random size wherever your mouse is on the canvas
        // allows you to paint the portrait!
        fill(ColorPixel);
        textSize(random(1,10));
        text(word[floor(random(word.length))], mouseX,mouseY);
            

    }


    
}

// This process took me a while to figure out and understand. 
// I wanted it to be interactive in some way and I thought "what if you get to "paint" it?"
//  To my surprise, I was able to figure out the painting portion quite easily. I also wanted the 
//  pixels to be more than just squares or circles so I decided to use a phrase that I constantly need to be reminded of: "Believe in yourself"

What it will look like once fully painted

project 9: computational portrait

i made a computational portrait using perlin noise to randomly draw lines until an image emerges. source image below

isisproject9

// isis berymon section D
//using perlin noise to randomly generate lines
//that over time create an image of my face

var isis; // portrait
var xstep = 0.0; //noise step vars
var ystep = 0.0;
var x1 = 200; //line vars
var y1 = 200;
var x2;
var y2;

//preload image
function preload(){
   isis = loadImage("https://i.imgur.com/gspKB1I.jpg");
}


function drawLine(){ //draws continuous line over canvas
    //randomly generate line path
    x2 = map(noise(xstep), 0, 1, -200, 600);
    y2 = map(noise(ystep), 0, 1, -200, 600);
    xstep += .08;
    ystep += .06;

    //use colors from portrait
    strokeWeight(2);
    stroke(isis.get(x2,y2));
    line(x1, y1, x2, y2);
    //make 2nd point 1st point and repeat
    x1 = x2;
    y1 = y2;
}

function setup(){
    createCanvas(400, 400);
    background(50);
    frameRate(60);
}

function draw(){
    drawLine();
}

Project 09 – Portrait

With this project, I mainly wanted to create different color modes from the pixels. The background is black and white, the 1st set of selected pixels are the original colors, and when clicked the pixels become inverted.

sketch

// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Assignment-09

var sqr = [];
var sqrArrayLen = 150;

//true = original colors false = inverted
var colorStyle = true;

var count = 0; 
function preload(){
    face = loadImage("https://i.imgur.com/bu90lcN.jpg");
}

//constructor for square objects
function makeSquare(cx, cy, wdth){
    var c = {x:cx, y:cy, w:wdth}
    return c;
}

function setup(){
    createCanvas(480,480); 
    background("white");
    
    face.loadPixels(); 
    face.resize(480,600);
    greyscale(); 

    //define objects in sqr array 
	for(var i=0;i<=sqrArrayLen-1;i++){
	    var side1 = random(10,100);
	    var x = random(width);
	    var y = random(height);

	    var square = makeSquare(x,y,side1);
        sqr.push(square);
     }    
}

function draw() {   
    noFill();
    stroke("white");

    //draw 1st image only once
    if(count<=0){
    	drawAlterations()
    }
	
    count++;
	noLoop();
}

//draw changed made to image
function drawAlterations(){
	var opacity;
	var shift; 
	var c; 
	for(var i=0; i<=sqr.length-1;i++){
		noStroke();
		if(colorStyle){
			showColor(i);
		}else{
			invertColors(i);
		}
		print(colorStyle);
		
	}
}
//make image greyscale
function greyscale(){ 
	for (var i=0;i<=face.width;i++){
		for(var j=0;j<=face.height;j++){
			c = face.get(i,j);
			var grey = c[0]; 
			push();
			noStroke();
			fill(grey,150);
			square(i,j,1);
			pop();
		}
	} 
}

//change pixel color back to original only in boxed area
function showColor(index){
	var maxX = sqr[index].x + sqr[index].w;
	var maxY = sqr[index].y + sqr[index].w;

	for (var i=sqr[index].x;i<=maxX;i++){
		for(var j=sqr[index].y;j<=maxY;j++){
			c = face.get(i,j);
			opacity = random(50,150); 
			shift = random(-10,10);

			fill(c[0],c[1],c[2],opacity);
			square(i+shift,j+shift,1); 
		}
	} 
}

function invertColors(index){
	var maxX = sqr[index].x + sqr[index].w;
	var maxY = sqr[index].y + sqr[index].w;

	for (var i=sqr[index].x;i<=maxX;i++){
		for(var j=sqr[index].y;j<=maxY;j++){
			c = face.get(i,j);
			
			var r = 255-c[0];
			var g = 255-c[1];
			var b = 255-c[2];

			opacity = random(50,150);
			shift = random(-10,10);

			fill(r,g,b,opacity);
			square(i+shift,j+shift,1); 
		}
	} 
}
function mousePressed(){
	colorStyle = !colorStyle;
	drawAlterations();
}

Project 9

This project is fun to create. I decided to use little hearts to paint a portrait. To paint: press the mouse and drag. You can change to a smaller brush size by holding any key.

sketch

it will take you a few minutes to paint. This is a combination of smaller hearts and bigger hearts.

//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project 09

var img;

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

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    noStroke();
    background("orange");
    frameRate(50);
}

function heart(x, y, size) {
  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);
}

function draw() {
    
    //area radius for random pixels
    var xPosition = random(-5,5);
    var yPosition = random(-5,5);

    //set area for mouse
    var x = map(mouseX,0,width,0,1200); 
    var y = map(mouseY,0,height,0,1500); 

    //get the size of the pixel
    var pixelSize;

    //get the color of the pixel
    var pixC = img.get(x,y);
    

    //set to paint with mouse
    if(mouseIsPressed){
        push();
        translate(mouseX,mouseY);
        fill(pixC);

        //set heart shaped brush with different sizes
        if(keyIsPressed){
            pixelSize = random(4,8);
        }
        else{
            pixelSize = random(10,22);
        }
        heart(xPosition,yPosition,pixelSize);
        pop();
    }
}