Uncategorized – Page 6 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-09 Portrait

I made this interactive work which allows the user to move their mouse around to fill out the image with the brush feature. The brush has the shape of leaves. The user can change the brush shape with key press. I want to create a painting like atmosphere. The elements at each pixel consists of text “she, 20, art” and patterns such as flowers, stars, hearts, etc.

//Heying Wang
//section B
let img;
//key words abut me
let words=['20','she','art','✿','*','♥︎','❀','♛']
var leafShape='serrate'

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

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  img.resize(480,480);
  background(map(mouseX,0,width,0,255),70,90);
  frameRate(10000);
  
}

//find the pixel color 
function draw() {
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pc = img.get(x, y);
  fill(pc);
  //smaller founts for important parts of the image
  //so that there will be more details
  if(x>150 & x<350 && y>0 && y<220){
      textSize(8);
  }
  else if(x>120 & x<400 && y>300 && y<400){
      textSize(12);

}else{
    textSize(15)
}
    /* brush Feature: the player can move 
    the mouse around to fill out the image faster
    the brush stroke has the shape of leaves */

    text(random(words),x,y);

    if(leafShape=='serrate'){
        fill(img.get(mouseX,mouseY));
        beginShape()
        curveVertex(mouseX,mouseY);
        curveVertex(mouseX,mouseY-8);
        curveVertex(mouseX-4,mouseY-15);
        curveVertex(mouseX,mouseY-20);
        curveVertex(mouseX+4,mouseY-15);
        curveVertex(mouseX,mouseY-8);
        endShape(CLOSE);
    }
    //change brushes
    else if (leafShape=='digitate'){
        fill(img.get(mouseX,mouseY));
        line(mouseX,mouseY,mouseX,mouseY-6);
        beginShape();
        vertex(mouseX,mouseY);
        vertex(mouseX,mouseY-5);
        vertex(mouseX+8,mouseY-8);
        vertex(mouseX,mouseY-11);
        vertex(mouseX-8,mouseY-8);
        endShape(CLOSE);
    }
    console.log(leafShape);



    

   


}

function keyTyped(){
    
    if(key==='d'){
        leafShape='digitate'
    }
    else if(key==='s'){
        leafShape='serrate'
    }
}

Project 09 – Computational Portrait (Custom Pixel)

I chose to use a selfie of me for this project. I resized the image so that my face would fit in the canvas, and then had words appearing to reveal the selfie. I used the following words : “annie”, “jean”, “flag”, “blue”, “brown”, “tan”, “red”, etc. I used these words because it described images in the actual picture, such as the background, me, and colors within the picture.

I had a little difficulty at first about trying to figure out another creative way to reveal the picture. However, from a previous LO post that I had made, I was inspired by an artist who used common words associated with each other on Google to graphically display data, therefore I chose the words that would be related to/associated with my selfie to appear as it seemed most reasonable.

sketch

//Annie Kim
//anniekim@andrew.cmu.edu
//Section B
//anniekim-09-Project

var img;
//words describing pic
var words = ["annie", "jean", "flag", "selfie", "snapchat", "blue", "red", "tan", "brown"]


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

function setup() {
	createCanvas(480, 480);
	background(0);
	img.loadPixels();
	frameRate(1000);

}

function draw() {
	//resizing selfie
	img.resize(480, 480);
	var x = random(width);
	var y = random(height);
	//getting exact pixel color to fill in words later
	var pixelx = constrain(floor(x), 0, width);
	var pixely = constrain(floor(y), 0, height);
	var pixelcolor = img.get(pixelx, pixely);

	noStroke();
	fill(pixelcolor);
	textSize(random(8, 18));
	textFont('Helvetica');
	text(words[Math.floor(random(0, 9))], x, y);
	
}

This is as the words are starting to appear..

This is when the picture is almost entirely resolved..

This is the selfie that shows when the words are done appearing.

Project 9 – Computational Portrait (Custom Pixel)

Following the original image’s brick theme, I kept the project simple while trying to mimic the aesthetic of bricks/tiles.

sketch

var portrait;

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

function setup() {
    createCanvas(480, 320);
    background(255);
    portrait.loadPixels();
    portrait.resize(width, height);
    frameRate(30);
}

function draw() {
    //image(portrait, 0, 0, width, height);
    var x = random(width);
    var y = random(height);
    var porX = constrain(floor(x), 0, width);
    var porY = constrain(floor(y), 0, height);
    var colr = portrait.get(porX, porY);
    stroke(255);
    fill(colr);
    rect(x, y, random(10, 25), random(10, 25));
}

Project – 09

sketch

var img;

function preload () {
	img = loadImage("https://i.imgur.com/iVbKAY2.png");    //preloading image
}

function setup() {
    
    background(220);

    img.loadPixels();

    img.resize(img.width/6, img.height/6);
	
	createCanvas(300, 300);

    
}

function draw() {   //the program draws a line between two random points in the color that is the average of the two points
	var dist = map(mouseY, 0, height, 0, 250);
	


	var point1X = random(-50,350); //making the boundaries slightly larger than the canvas so the edges are filled in evenly
	var point1Y = random(-50, 350);

	var point2X = random(point1X-dist, point1X+dist);
	var point2Y = random(point1Y-dist, point1Y+dist);




	var point1col = img.get(point1X, point1Y);  //retrieving color from both points
	var point2col = img.get(point2X, point2Y);

	var linecol = img.get((point1X+point2X)/2, (point1Y+point2Y)/2); //getting the line color by using the point between the ends

	stroke(linecol);

	strokeWeight(3);

	line(point1X, point1Y, point2X, point2Y);

}

My program uses lines varying in length to draw my face. The length of the line drawn is semi-randomize, getting larger as mouseY increases. I wanted to use lines because I thought it would be a little more visually interesting then a simple pixel. I like the fact that the image can be more or less abstract depending on what you want.

Project 09: Computational Portrait

This whole portrait is a picture of me sitting on a ledge outside of CFA, comprised of tinted covers of some of my favorite albums of music. It really took some experimentation to get the number of blocks correct, since with too many it would crash the program and with too few you couldn’t really notice the image. Tint() also wasn’t very happy with the original covers, so I had to edit them to make sure the colors would appear correctly. Finally, I added a random component to their generation just to add something interesting as they loaded in.

portrait

var pic;
var pixel = []
var covers = []



function preload(){ ///loads the album covers from the imgur posts
  var coverFile = []
  pic = loadImage("https://i.imgur.com/9if5OBK.jpg") ////some of my favorite albums to play on guitar and listen to
  coverFile[0] = "https://i.imgur.com/vh9pN9D.png"
  coverFile[1] = "https://i.imgur.com/ojxUjeG.png"
  coverFile[2] = "https://i.imgur.com/udq9ixk.png"
  coverFile[3] = "https://i.imgur.com/CgaJ3WV.png"
  coverFile[4] = "https://i.imgur.com/JjaAoNi.png"
  coverFile[5] = "https://i.imgur.com/BBocb2g.jpg"
  coverFile[6] = "https://i.imgur.com/qx4C4pJ.jpg"
  coverFile[7] = "https://i.imgur.com/hrqxmIj.jpg"
  for (var e = 0; e < coverFile.length; e++) {
        covers[e] = loadImage(coverFile[e]);
    }
}


function drawPixel(){ ///draws and colors each album cover
  tint(pic.get(this.x, this.y))
  image(covers[this.selection], this.x, this.y, 20, 20)
}




function makePixel(pixSelect, pixX, pixY){ ///creates the individual pieces of the portrait
  p = {x: pixX, y: pixY, selection: pixSelect,
    drawFunction: drawPixel
  } 
  return p
}



function setup(){ ///loads each pixel of the image, creates a square, and sends it to an array
  createCanvas(480, 480)
  frameRate(100)
  pic.loadPixels()
  noStroke()
  for (i = 0; i <= 24; i++){
      for (k = 0; k <= 24; k++){
          var p = makePixel(round(random(0, 7)), i * 20, k * 20, )
          pixel.push(p)
          }
      }
}

function draw(){  ///draws in squares randomly, up to 448, total number of the image
  var p = pixel[round(random(0, 448))]
  p.drawFunction() 
}

Project 09: Custom Pixels

sketch

//Jessie Chen
//D
//Project 09
//Computational Portrait
//Custom Pixel

var img;
let flowers = ['✽', '✾', '✿', '❀', '❁']

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

function setup() {
    createCanvas(480, 480);
    //image in the center
    imageMode(CENTER);
    img.loadPixels();
    //resize image to canvas
    img.resize(480, 480);
    frameRate(10000);
    //pink background
    background(200, 170, 170);
}

function draw() {
    //pick random x and y
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    
    //pull pixel color from that x and y
    var pix = img.get(x, y);
    
    //fill using the pixel color
    fill(pix);
    
    //keeps the pixels where the face is 
    //smaller so it can have more detail
    if (x > 90 & x < 270 && y > 80 && y < 350) {
        textSize(random(5, 15));
    } else {
        textSize(random(10, 20));
    }

    //draws flower in place of the pixels
    text(random(flowers), x, y);
}

//when the mouse is clicked the blobs enlarge 
//until it no longer becomes a face
function mousePressed() {
        filter(ERODE);
}

I took a selfie with a filter that drew flowers on my face. From that, I wanted to create this project using flower symbols as my custom pixel. I chose to make the pixels where the face is smaller than the background so the face would have more detail. I also added an effect where every time you click on it, the symbols would enlarge into blobs to make it seem a little bit more creepy (yay for Halloween!).

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.

Portrait with letters and stars with different sizes

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.

sketch Download

//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();
}

Project – 09

Here is my self portrait done with circles and words when the mouse is moved. Because the image is filled with color it is hard to see the full image through the code but I like it that way because it adds to the ambiguity of the picture

portrait 09 Download

var flora;
var words =['flora' , 'xia' , 'FX' , 'fleur']

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

function setup() {
    createCanvas(480, 480);
    background(255);
    flora.loadPixels();
    frameRate(2000);
}

function draw() { 
	//set up variables
    var x = random(width);
    var y = random(height);
    var ix = constrain(floor(x), 0, width-1);
    var iy = constrain(floor(y), 0, height-1); 
    //creating the text at mouse
    var colorAtMouse = flora.get(mouseX, mouseY); //color at pixel
    fill(colorAtMouse);
    textSize(random(2, 15));
    text(random(words), mouseX, mouseY);
    //creating the shape that appears randomly
    var colorAtXY = flora.get(ix, iy);
    fill(colorAtXY);
    noStroke();
    circle(x, y, random(1, 8));
}

Project – 09 – Portrait

For this project, I used a picture that I took of my mom while we were at Epcot, Walt Disney World. We were in the Power of Color theater, which shone different hues of colors while we stood in the room. Because of that, I tried to add colors that shoot out towards the top of the canvas when the mouse is clicked.

sketch

/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var myPicture; 
var x = 0; 
var y = 0; 
var star; 

function preload(){
	var picLink = "https://i.imgur.com/sTUlPXx.png"; 
	myPicture = loadImage(picLink); 
}

function setup() {
    createCanvas(335,409);
    background(200,226,206);
    myPicture.loadPixels(); 
    frameRate(500); 
    // setting up star parameters 
    star = {
    		sX: mouseX,
    		sY: mouseY, 
    		size: random(5,15)
    }
}

function draw() {
	// pick random x and y coordinates of picture
    var picX = random(width);
    var picY = random(height);

    // Pixel position to retrieve color from - constrain within canvas 
    var imX = constrain(floor(picX), 0, width);
    var imY = constrain(floor(picY), 0, height);

    // Get color of image at pixels
    var pixelColor = myPicture.get(imX,imY);
    fill(pixelColor); 
    mouse(picX,picY); 

    // Wavy red borders around picture 
 	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.8); 
 		strokeWeight(22); 
 		point(x, 35-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.8); 
 		strokeWeight(22); 
 		point(x, 376-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.6); 
 		strokeWeight(22); 
 		point(x, 65-20*sin(radians(x))); 
    }

  	for (var x = 0; x < width; x = x + 1){
 		stroke(167,37,42,.6); 
 		strokeWeight(22); 
 		point(x, 346-20*sin(radians(x))); 
    }

    // Shooting star of random colors 
    fill(random(255),random(255),random(255)); 
	noStroke();  
    ellipse(star.sX,star.sY,star.size,star.size);
    // make the star move to the left 
    star.sX = star.sX - 1; 
    // make the star move upwards
    star.sY = star.sY - 1; 
    // make the star smaller 
    star.size = star.size - 0.2;
}

// Creating Mickey Mouse head shape 
function mouse(x,y){
	noStroke(); 
	ellipse(x,y,20,20);  
	ellipse(x-10,y-10,15,15); 
	ellipse(x+10,y-10,15,15);  
}

// when mouse is pressed, a new star is formed at the mouse (x,y) position
function mousePressed(){
	star = {
		sX: mouseX,
		sY: mouseY, 
		size: random(5,15)
	}
}