Category: Project-09-Portrait

Project : 09

For this project I decided to create a clearer perception of the image of my aunt for the portrait and the background would start to fade away. Therefore I used smaller rectangles for the main portrait and bigger ones for the background. I also wanted to add a few interactive features so when the mouse is pressed the rectangles become bigger and rotate and when the mouse is moved around the canvas words that describe my aunt start to show up on the screen.

sketch
A couple minutes into the animation
Image almost complete without mouse being pressed or on canvas
Image with words being displayed as the mouse is moved around screen
Image with mouse pressed 

//Aadya Bhartia
//Section A 
//abhartia@andrew.cmu.edu

/*The program begins to create more details with smaller rectangles for the main portrait and bigger 
rectnagles for the background. When the mouse is pressed the rectnagles rotated and scaled and when the mouse 
is moved around the screen words that describe my aunt in the portrait show up */

var port = 20; //global avriable to help determine size of portraitwhich is in focus
var img;
var word = ['artist','ritika','mom','loving','fasion']; //words displayed when mouse is on canvas
function preload(){
	var imgURL = "https://i.imgur.com/vhfzHA1.jpg" ;
	img = loadImage(imgURL);
}

function setup() {
    createCanvas(400, 340);
    background(0);
    img.loadPixels(); //loading pixels from image
    frameRate(1000);
    rectMode(CENTER);
}
function draw() {
	var px = random(width); //x position of rectangles 
	var py = random(height); //y position of rectangles
	var cx = constrain(floor(px), 0, width-1);
	var cy = constrain(floor(py), 0, height-1);
	//colour at current pixel 
	var positionColour = img.get(cx, cy);
	//colour at mouse position 
	var mouseColour = img.get(mouseX, mouseY);
	//varying width of rectangle based on brightness at current pixel 
	var rectL = map(brightness(positionColour),0,200,0,20);
	if(mouseIsPressed){ //when mouse is pressed rectangles becomes twice the size at rotate at 90 degrees 
		push();
		translate(px,py); 
		scale(2);
		rotate(PI/4);
		noStroke();
		fill(positionColour); //setting fill to colour at that pixel
		rect(0,0,rectL,8);
		pop();
	}
	//for the main portrait the rectangles are smaller while for the background they ae bigger
	else{
		if(px > port*4 & px < port*15 && py> port && py < (height- port*2)){ //setting position of the portrait 
			strokeWeight(0.1);//very thin stroke to emphasizse the portrait 
			stroke(220); //setting stroke as a light grey to distinguish between pixels 
			fill(positionColour);
			rect(px,py,rectL/2,4); //making rectnagles smaller 
		}
		//for the background 
		else{
			strokeWeight(0.5);
			stroke(220); //setting stroke as a light grey to distinguish between pixels 
			fill(positionColour); //fill based on colour at curent pixel location
			rect(px,py,rectL,8);
		}
	}
	//text is displayed based on mouse position and colour
	fill(mouseColour); //text colour based on pixel colour at current location
	textSize(random(5,15));
	text(random(word), mouseX, mouseY); //sectiong random text from arrray and displayiong at mouse position
}

Project 9: Portrait

For this assignment, I used circles that size in size in correspondence to clicking the up or down arrow. It was inspired by the concept of paint splash art where it can create a very interesting portrait when you mix different brush sizes.

sketch

//Helen Cheng
//helenc1@andrew.cmu.edu
//Section C
//Project-09

var selfie;
var pixelSize = 5;

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

function setup() {
  createCanvas(480, 320);
  selfie.resize(480, 320);
  selfie.loadPixels();
}

function draw() {
  //random pixel drawer
  var picX = floor(random(selfie.width));
  var picY = floor(random(selfie.height));
  fill(selfie.get(picX, picY)); 
  drawPixel(picX, picY);

  //mouse brush
  fill(selfie.get(mouseX, mouseY));
  drawPixel(mouseX, mouseY);

}

 function drawPixel(x, y) {
    //circlular brush strokes
    strokeWeight(0);
    circle(x, y, pixelSize);
  }

//increase or decreases brush stroke using up and down arrows
function keyPressed() {
  if (keyCode === UP_ARROW) {
    pixelSize += 1;
  }
  else if (keyCode === DOWN_ARROW);
    pixelSize = pixelSize - 1;
  }

different stages of the portrait

Project_09_Portrait

My portraitDownload
//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

var imgFace;

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


}

function setup(){
    createCanvas(480,480);
   // imageMode(CENTER);
    imgFace.loadPixels();
    imgFace.resize(480,480);
    noStroke();
    frameRate(200);


}

function draw(){

    //image(imgFace,0,0,width,height);

    var xp = floor(random(imgFace.width));
    var yp = floor(random(imgFace.height));
    var pix = imgFace.get(xp,yp);
    fill(pix);
    print(pix);
    push();
    translate(xp,yp);
    Orthotomic();
    pop();

    
    

}

function Orthotomic(ex,ey){ // Here is the code I reused from my previous work and I made some changes to it so that it fit this painting better.


        var nPoints = 100;

        var x,y;

        beginShape(); // the shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = constrain(mouseX,0,150)/30*cos(t); //the shape size is affected by mouseX
        y = sin(t);
        var x1 =x*cos(2*t)-y*sin(2*t)+2*sin(t);
        var y1 =-x * sin(2*t) - y*cos(2*t) + 2*cos(t);
        vertex(x1+random(5), y1+random(5)); //make the edge a bit random lines
    }


    endShape(CLOSE);

}

In this project, I customized the shape of the “Brush” a bit by reusing previous and made it a bit randomized. The edge of the brush is changing every frame. The size of the brush is controlled by MouseX so that painter can do big stroke at the very beginning and small stroke at the very end to put more details.

Project 09 – Computational Portrait

sketch
//Stefanie Suk
//15-104 Section D

var selfPic;
var starSize = 10; //initial star size 10
let stefanie = ['s', 't', 'e', 'f', 'a', 'n', 'i', 'e']; //letters of my name
let stars = ['✦', '★', '✷', '✸']; //shapes of stars

function preload() {
  selfPic = loadImage("https://i.imgur.com/iSI6MtQ.jpg"); //preloading image
} 

function setup() {
  createCanvas(400, 400);
  noStroke();
  background(0); //initial background color set to black
  imageMode(CENTER);
  selfPic.loadPixels(); 
  frameRate(30);
  
}

function draw() {
  //get random x, y coordinates 
  var x = random(selfPic.width);
  var y = random(selfPic.height);
  var p = selfPic.get(x, y); //color to image at location

  //draw letters s,t,e,f,a,n,i,e
  fill(p);
  textSize(15);
  textFont("Helvetica");
  textStyle(BOLD);
  text(random(stefanie), x, y); //draw random letters from my name 

  //draw stars
  var mouseColor = selfPic.get(mouseX, mouseY); //color star to image at mouse location
  fill(mouseColor);
  textSize(starSize);
  text(random(stars), mouseX, mouseY); //draw random stars
}

function mousePressed() {
  background(255); //resets with the color of white
}

function keyPressed() {
  starSize += 1; //star size increases when any key is pressed
}

I chose a photo of me during quarantine taking pictures of myself because I was really bored. This portrait draws random letters of my name, as well as random shapes of stars based on the mouse position. The star increases in size when any key is pressed, and the portrait resets to a color of white when the mouse is clicked. 

Image of portrait
Portrait with only letters
Portrait with letters and stars with different sizes

Project 09 – Portrait

For my portrait, I wanted to replicate my experience of using this program, which was one that was filled with awe. I tried inserting many different phraseI used the text “oooh” and “ahhhh” to paint the face depending on if the mouse is clicked or not. I wanted to use variation of text size, spread, and density in order to give the user some variability in how they paint the face. I am using a portrait of myself for this assignment.

sketchDownload
//JSTEINWE - 09 - PROJECT (October 31st, 2020)
//JUBBIES STEINWEH-ADLER
//SECTION D
//FACE GENERATION

var tSize; // size of words
var tSpread; //spread of words from one another
var tWord; //word written 
var tn; // number of words in one cluster


function preload() {
    var faceLink = "https://i.imgur.com/Q0Fw6fr.png"; 
    faceImage = loadImage(faceLink);
}

function setup() {
    createCanvas(480, 500);
    background(120, 180, 255); //background
    textSize(20);
    fill('green');
    textAlign(CENTER);
    text("[click and hover mouse to paint]", width/2, 400); //click instructions
}

function draw() {
        if (mouseIsPressed) {
            tn = 5;
            tSpread = 30;
            tSize = random(30, 50);
            tWord = "ooh";
        } else {
            tn = 3;
            tSpread = 10;  
            tSize = random(1, 20);
            tWord = "ahh";
        }
    typing(mouseX, mouseY); // words written at X and Y coords
}

function typing(x, y) {
    //COLOR OF MOUSE ON CANVAS
    var xColor = constrain(mouseX, 0, width); // coords of mouse X on canvas
    var yColor = constrain(mouseY, 0, height); // coords of mouse Y on canvas
    var mouseColor = faceImage.get(xColor, yColor); // gets color
    
    fill(mouseColor); //fills the type with specified color   
   
    //TYPE PROPERTIES
    for (i = 0; i < tn; i += 1) { // determines spacing and density for each cluster
        var t = random(0, 30); //random angle to create natural cluster
        var typingX = x + cos(t)*(i*(tSpread));
        var typingY = y + sin(t)*(i*(tSpread)); 
        textSize(tSize);
        text(tWord, typingX, typingY); //click instructions
  }
}
In process shots

Project 9: Computational Portrait

For this project, I decided to draw a picture of me when I was a child. I created random shapes similar to snowflakes to represent a time of innocence and delicacy. I created the portrait with an emoticon that reflects my feeling toward that time of my life.

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var img;
var transparent = 0;

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

function setup() {
    createCanvas(400, 567);
    imageMode(CENTER);
    noStroke();
    img.loadPixels();
    background(255);
}

function draw() {
// random x & y positions for where to draw
  var x = floor(random(img.width));
  var y = floor(random(img.height));
// selecting color from the actual picture
  var pix = img.get(x, y);
  snowFlake(x, y, pix);
  cuteEmojicon(x, y, pix);
}

function snowFlake(x, y, pix) {
  fill(pix, 50);
  beginShape();
    for (var i = 0; i < 20; i++) {
       vertex(x + random(-5, 5), y + random(-5, 5));
    }
    endShape(CLOSE);
}

function cuteEmojicon(x, y, pix) {
  fill(pix, 50);
  textSize(random(5, 15));
  text('♡´･ᴗ･`♡', x, y);
}
Image rendering as time goes by

Project 09: Computational Portrait

Screenshot 1 of the Computational Portrait

Inspired by the fact that this project was due on Halloween and by the string of words Ryan Alexander uses to draw his portraits, I decided to use the words of Edgar Allan Poe’s poem “The Raven” as the elements to draw the portrait. Additionally, the photograph that the portrait is based off of has an eerie quality due to it being generated by the AI program of thispersondoesnotexist.com. My process began with me inputting each word of “The Raven” into an array that the code could access. Next, inspired by the code we used to generate particles during last week’s lab session, I created objects out of the words that could move around the canvas. Lastly, using the image.get() function, I was able to have the words change color as they move around the canvas.

sketchDownload
//Anishwar Tirupathur
//atirupat
//Section B
//Computational Portrait (Custom Pixel)

var face;

//Words of The Raven by Edgar Allan Poe
//Source:  https://www.poetryfoundation.org/poems/48860/the-raven
var theRaven = ["Once","upon","a","midnight","dreary,","while","I","pondered,","weak", "and","weary,",
  				"Over","many","a","quaint","and","curious","volume","of","forgotten", "lore—",
      			"While","I", "nodded,", "nearly", "napping,", "suddenly ","there", "came", "a", "tapping,",
  				"As", "of", "some", "one", "gently", "rapping,", "rapping", "at", "my", "chamber", "door.",
  				"“’Tis", "some", "visitor,”", "I", "muttered,", "“tapping", "at", "my", "chamber", "door—",
              	"Only", "this", "and", "nothing", "more.”",
     			 "Ah,", "distinctly", "I", "remember", "it", "was", "in", "the", "bleak", "December;",
 				 "And", "each", "separate", "dying", "ember", "wrought", "its", "ghost", "upon", "the", "floor.",
     			 "Eagerly", "I", "wished", "the", "morrow;","—vainly", "I", "had", "sought", "to", "borrow",
     			 "From", "my", "books", "surcease", "of", "sorrow—","sorrow", "for", "the", "lost", "Lenore—",
  				 "For", "the", "rare", "and", "radiant", "maiden", "whom", "the", "angels", "name", "Lenore—",
                 "Nameless", "here", "for", "evermore.",
     			 "And", "the", "silken,", "sad,", "uncertain", "rustling", "of", "each", "purple", "curtain",
  				 "Thrilled", "me—","filled", "me", "with", "fantastic", "terrors", "never", "felt", "before;",				 
     			 "So", "that", "now,", "to", "still", "the", "beating", "of", "my", "heart,", "I", "stood", "repeating",
      			 "“’Tis", "some", "visitor", "entreating", "entrance", "at", "my", "chamber", "door—",
  				 "Some", "late", "visitor", "entreating", "entrance", "at", "my", "chamber", "door;—",
              	 "This", "it", "is", "and", "nothing", "more.”",
      			 "Presently", "my", "soul", "grew", "stronger;", "hesitating", "then", "no", "longer,",
  				 "“Sir,”", "said", "I,", "“or", "Madam,", "truly", "your", "forgiveness", "I", "implore;",
      			 "But", "the", "fact", "is", "I", "was", "napping,", "and", "so", "gently", "you", "came", "rapping,",
      			 "And", "so", "faintly", "you", "came", "tapping,", "tapping", "at", "my", "chamber", "door,",
 				 "That", "I", "scarce", "was", "sure", "I", "heard", "you”—","here", "I", "opened", "wide", "the", "door;—",
              	 "Darkness", "there", "and", "nothing", "more.",
      			 "Deep", "into", "that", "darkness", "peering,", "long", "I", "stood", "there", "wondering,", "fearing,",
 				 "Doubting,", "dreaming", "dreams", "no", "mortal", "ever", "dared", "to", "dream", "before;",
      			 "But", "the", "silence", "was", "unbroken,", "and", "the", "stillness", "gave", "no", "token,",
      			 "And", "the", "only", "word", "there", "spoken", "was", "the", "whispered", "word,", "“Lenore?”",
  				 "This", "I", "whispered,", "and", "an", "echo", "murmured", "back", "the", "word,", "“Lenore!”—",
              	 "Merely", "this", "and", "nothing", "more.",
              	 "Back", "into", "the", "chamber", "turning,", "all", "my", "soul", "within", "me", "burning,",
  				 "Soon", "again", "I", "heard", "a", "tapping", "somewhat", "louder", "than", "before.",
       			 "“Surely,”", "said", "I,", "“surely", "that", "is", "something", "at", "my", "window,", "lattice;",
        		 "Let", "me", "see,", "then,", "what", "thereat", "is,", "and", "this", "mystery", "explore—",
  				 "Let", "my", "heart", "be", "still", "a", "moment", "and", "this", "mystery", "explore;—",
              	 "’Tis", "the", "wind", "and", "nothing", "more!”",
				"Open", "here", "I", "flung", "the", "shutter,", "when,", "with", "many", "a", 
				"flirt", "and", "flutter,", "In", "there", "stepped", "a", "stately", "Raven", 
				"of", "the", "saintly", "days", "of", "yore;","Not", "the", "least",
				 "obeisance", "made", "he;", "not", "a", "minute", "stopped", "or", "stayed", "he;",  
				 "But,", "with", "mien", "of", "lord", "or", "lady,", 
				 "perched","above","my","chamber","door—","Perched","upon","a","bust","of","Pallas",
				 "just","above","my","chamber","door—","Perched,","and","sat,","and","nothing","more.",
				 "Then","this","ebony","bird","beguiling","my","sad","fancy","into","smiling,","By",
				 "the","grave","and","stern","decorum","of","the","countenance","it","wore,",
				 "“Though","thy","crest","be","shorn","and","shaven,","thou,”","I","said,",
				 "“art","sure","no","craven,","Ghastly","grim","and","ancient","Raven","wandering","from",
				 "the","Nightly","shore—","Tell","me","what","thy","lordly","name","is","on","the","Night’s",
				 "Plutonian","shore!”","Quoth","the","Raven","“Nevermore.”","Much","I","marvelled","this",
				 "ungainly","fowl","to","hear","discourse","so","plainly,","Though","its","answer","little",
				 "meaning—little","relevancy","bore;","For","we","cannot","help","agreeing","that","no",
				 "living","human","being","Ever","yet","was","blessed","with","seeing","bird","above","his",
				 "chamber","door—","Bird","or","beast","upon","the","sculptured","bust","above","his","chamber",
				 "door,","With","such","name","as","“Nevermore.”","But","the","Raven,","sitting","lonely","on",
				 "the","placid","bust,","spoke","only","That","one","word,","as","if","his","soul","in","that",
				 "one","word","he","did","outpour.","Nothing","farther","then","he","uttered—not","a","feather",
				 "then","he","fluttered—","Till","I","scarcely","more","than","muttered","“Other","friends","have",
				 "flown","before—","On","the","morrow","he","will","leave","me,","as","my","Hopes","have","flown",
				 "before.”","Then","the","bird","said","“Nevermore.”","Startled","at","the","stillness","broken","by",
				 "reply","so","aptly","spoken,","“Doubtless,”","said","I,","“what","it","utters","is","its","only",
				 "stock","and","store","Caught","from","some","unhappy","master","whom","unmerciful","Disaster",
				 "Followed","fast","and","followed","faster","till","his","songs","one","burden","bore—","Till","the",
				 "dirges","of","his","Hope","that","melancholy","burden","bore","Of","‘Never—nevermore’.”","But","the",
				 "Raven","still","beguiling","all","my","fancy","into","smiling,","Straight","I","wheeled",
				 "a","cushioned","seat","in","front","of","bird,","and","bust","and","door;","Then,","upon",
				 "the","velvet","sinking,","I","betook","myself","to","linking","Fancy","unto","fancy,",
				 "thinking","what","this","ominous","bird","of","yore—","What","this","grim,","ungainly,",
				 "ghastly,","gaunt,","and","ominous","bird","of","yore","Meant","in","croaking",
				 "“Nevermore.”","This","I","sat","engaged","in","guessing,","but","no","syllable",
				 "expressing","To","the","fowl","whose","fiery","eyes","now","burned","into","my",
				 "bosom’s","core;","This","and","more","I","sat","divining,","with","my","head","at","ease",
				 "reclining","On","the","cushion’s","velvet","lining","that","the","lamp-light","gloated",
				 "o’er,","But","whose","velvet-violet","lining","with","the","lamp-light","gloating","o’er,",
				 "She","shall","press,","ah,","nevermore!","Then,","methought,","the","air","grew","denser,",
				 "perfumed","from","an","unseen","censer","Swung","by","Seraphim","whose","foot-falls","tinkled",
				 "on","the","tufted","floor.","“Wretch,”","I","cried,","“thy","God","hath","lent","thee—by","these",
				 "angels","he","hath","sent","thee","Respite—respite","and","nepenthe","from","thy","memories","of",
				 "Lenore;","Quaff,","oh","quaff","this","kind","nepenthe","and","forget","this","lost","Lenore!”",
				 "Quoth","the","Raven","“Nevermore.”","“Prophet!”","said","I,","“thing","of","evil!—prophet","still,",
				 "if","bird","or","devil!—","Whether","Tempter","sent,","or","whether","tempest","tossed","thee","here",
				 "ashore,","Desolate","yet","all","undaunted,","on","this","desert","land","enchanted—","On","this","home",
				 "by","Horror","haunted—tell","me","truly,","I","implore—","Is","there—is","there","balm","in","Gilead?—tell",
				 "me—tell","me,","I","implore!”","Quoth","the","Raven","“Nevermore.”","“Prophet!”","said","I,","“thing","of",
				 "evil!—prophet","still,","if","bird","or","devil!","By","that","Heaven","that","bends","above","us—by","that",
				 "God","we","both","adore—","Tell","this","soul","with","sorrow","laden","if,","within","the","distant",
				 "Aidenn,","It","shall","clasp","a","sainted","maiden","whom","the","angels","name","Lenore—","Clasp","a",
				 "rare","and","radiant","maiden","whom","the","angels","name","Lenore.”","Quoth","the","Raven","“Nevermore.”",
				 "“Be","that","word","our","sign","of","parting,","bird","or","fiend!”","I","shrieked,","upstarting—","“Get",
				 "thee","back","into","the","tempest","and","the","Night’s","Plutonian","shore!","Leave","no","black","plume",
				 "as","a","token","of","that","lie","thy","soul","hath","spoken!","Leave","my","loneliness","unbroken!—quit",
				 "the","bust","above","my","door!","Take","thy","beak","from","out","my","heart,","and","take","thy","form",
				 "from","off","my","door!”","Quoth","the","Raven","“Nevermore.”","And","the","Raven,","never","flitting,",
				 "still","is","sitting,","still","is","sitting","On","the","pallid","bust","of","Pallas","just","above","my",
				 "chamber","door;","And","his","eyes","have","all","the","seeming","of","a","demon’s","that","is","dreaming,",
				 "And","the","lamp-light","o’er","him","streaming","throws","his","shadow","on","the","floor;","And","my","soul",
				 "from","out","that","shadow","that","lies","floating","on","the","floor","Shall","be","lifted—nevermore!",
      		];

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

function stepPoem(){
	this.x += this.dx; //moves the word horizontally based on the dx velocity
	this.y += this.dy; //moves the word vertically based on the dy velocity
	if (this.x > imageScale*width){ //makes sure words bounce off right edge of scaled canvas
		this.x = imageScale*width - (this.x - imageScale*width);
		this.dx = -this.dx;
	} else if (this.x < 0){ //makes sure words bounce off left edge of scaled canvas
		this.x = - this.x;
		this.dx = -this.dx;
	}
	if (this.y > imageScale*height){ //makes sure words bounce off bottom edge of scaled canvas
		this.y = imageScale*height - (this.y -imageScale*height);
		this.dy = -this.dy;
	} else if (this.y < 0){ //makes sure words bounce off top edge of scaled canvas
		this.y = -this.y;
		this.dy = -this.dy;
	}
}

function drawPoem(){
	//chooses a random word from "The Raven" and draws it on the canvas at wx and wy
	text(theRaven[floor(random(0,theRaven.length))],this.x,this.y); 
}

function makePoem(wx,wy,wdx,wdy){ //inspired by particle code
	w = {x: wx, y: wy,
		 dx: wdx, dy: wdy,
		 stepFunction: stepPoem,
		 drawFunction: drawPoem
		};
	return w;
}

var poetry = [];
var imageScale = 2; //increases range that words can appear so that the entire photo can be referenced
var drawScale = 1/imageScale; //scales canvas so that all the words can appear on the canvas
var particleScale = 11; //extends for loop so that more words are generated creating a denser clearer image

function setup() {
    createCanvas(450, 450);
    background(220);
    for (var i = 0; i < theRaven.length*particleScale; i++){ 
    	var p = makePoem(random(0,imageScale*width),random(0,imageScale*height),random(-5,5),random(-2,5));
    	poetry.push(p);
    }
    face.loadPixels();
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0);
	push();
	scale(drawScale,drawScale); //canvas is scaled in order for the entire face to be displayed
	for (var i = 0; i < theRaven.length*particleScale; i++){
		var w = poetry[i];
		//word changes color depending on wx and wy and the image color at that point
		stroke(face.get(w.x,w.y)); 
		w.stepFunction();
		w.drawFunction();
	}
	pop();
}
Screenshot 2 of Computational Portrait

Project-09-Portrait

sketch

var img;
var x = [42,25,73,15,72,43,65]
var y = [42,63,43,83,87,47,17]
var move = 15

function preload(){
    img = loadImage("https://i.imgur.com/EwNcUnYm.jpg")
}
function setup() {
    createCanvas(480, 480);
    background(255);
    noStroke();
    img.resize(480,480)
    imageMode(CENTER)
    x = img.width/2 // middle of image
    y = img.height/2
}

function draw() {
    imgpixel = img.get(x,y) // retrieve pixel color
    fill(imgpixel); // fill shape with color of pixel
    square(x,y,15)
    x+=random(-move,move) // random walk
    y+=random(-move,move)
    constrain(x,0,img.width);// left and right constrain
    constrain(y,0,img.height);// top and bottom constrain
}

Instead of creating the portrait from random pixels, it is created by using the random walk where the portrait is drawn by a wandering object. If someone wants a more precise and accurate image they can adjust the size of the object.

After the object has wandered for a while

Project-09-Portrait

For this project, I want to convey the feeling of the breeze with the moving waves made of pixels.

sketch
//jiaqiwa2; Jiaqi Wang; Section C
var portrait;
//I learned & referenced how to make a moving sin wave from this example:
//https://p5js.org/examples/math-sine-wave.html
let xspacing = 5; // Distance between each horizontal location
let w; // Width of entire wave
let theta = 0.0; // Start angle at 0
let amplitude = 20.0; // Height of wave
let period = 700.0; // How many pixels before the wave repeats
let dx; // Value for incrementing x
let yvalues; // Using an array to store height values for the wave
var num=8;

function preload(){

	portrait=loadImage("https://i.imgur.com/J6Im42B.jpg");
}


function setup() {
  createCanvas(460,400);   
  w = width + 16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new Array(floor(w / xspacing));
  frameRate(10);
    
}



function draw() {
  //image(portrait,0,0,460,400);
  background(250);
 //gradually "open" the portrait
 if(num<40){
   num+=0.5;
  }

 for(var i=0;i<num;i++){
 	var yUpper;
  var yLower;
  
  yUpper=height/2-i*5;
  yLower=height/2+i*5;
  amplitude+=1;
  if(amplitude>40){
    amplitude-=1;
  }  

  calcWave();
  renderWave(yUpper);
  renderWave(yLower);


  
  
    }
  
}

function calcWave() {
  // Increment theta (try different values for
  // 'angular velocity' here)
  theta += 0.02;

  // For every x value, calculate a y value with sine function
  let x = theta;
  for (let i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x) * amplitude;
    x += dx;
  }
  
}


function renderWave(Start) {
  noStroke();
  
  // draw the wave with an ellipse at each location
  for (let x = 0; x < yvalues.length; x++) {
  	//y postition of the ellipse
  	var y=Start + yvalues[x];
  	//x position of the ellipse
  	var X=x * xspacing;
  	//find the corresponding pixel's location on my portriat
  	var Px=map(X,0,460,0,portrait.width);
    var Py=map(y,0,400,0,portrait.height);
    //check if this pixel is within the canvas.
    if(y>0 & y<400){
    	let pix = portrait.get(Px, Py);
        fill(pix);
        ellipse(X, y, 7, 7);

    }
    
  }
}
my original portrait
screenshot
screenshot 2

Project 09: Portrait

sketchDownload
//Nicholas Wong
//Section A
//nwong1@andrew.cmu.edu
//Assignment 09


var size = 10 //Default size of stroke

function preload()
{
	//A profile picture
	img = loadImage("https://i.imgur.com/1XXSpjL.png")
}

function setup()
{
	createCanvas(480,480);
	img.loadPixels(); //Load pixels

	//Set modes
	imageMode(CENTER);
	rectMode(CENTER);
	textAlign(CENTER);
	angleMode(RADIANS);

	//Set custom framerate
	frameRate(120)

}

function draw()
{
	//Offset canvas to fit my face in the middle
	translate(-100,10)

	//Get random x and y coordinates
	let x = floor(random(width));
	let y = floor(random(height));

	//Get color of coordinates
	let pix = img.get(x,y);

	//Create strokes
	drawStrokes(x,y,pix);

	drawInstructions();
}

function drawStrokes(x,y,pix)
{
	push();
	translate(100,0) //Recenter canvas
	translate(x,y);
	rotate(revolveMouse(x,y));//Rotate strokes around mouse

	//Draw stroke
	stroke(pix, 128);
	strokeWeight(0.25*size + random(0,2)); //Stroke size influenced by mouse scroll
	line(0,-size + random(0,2),0,size+ random(0,2)); //Stroke length based on mouse scroll
	pop();
}

function revolveMouse(x,y)
{
	//Generates angle from mouse position and (x,y) coordinate
	let dx = mouseX - x;
	let dy = mouseY - y;
	let angle = atan2(dy,dx)
	return angle; //Returns angle
}

function mouseWheel(event)
{
	//Check if scrolling up
	if (event.deltaY < 0)
	{
		size++; //Increase size
	}
	else //Scrolling down
	{
		size -= 1; //Decrease size
	}
}

function drawInstructions()
{
	//Text box at bottom of canvas
	push();
	translate(100,10);
	noStroke();
	fill(0)
	rect(width/2,height-50,285,35)
	fill(255)
	textSize(10)
	text('SCROLL MOUSEWHEEL TO CHANGE STROKE SIZE',width/2,height-47)
	pop();
}

Strokes radiate and rotate around mouse pointer, mouse scrolling changes the stroke size; scroll up to increase size, scroll down to decrease size. Here are some examples with varying mouse positions, stroke sizes, and durations.