Sihand – Project Week 09 – Spiral

Finish View

sihand – pixel portrait

//Sihan Dong
//Section B
//Project Week 09: pixel portrait

var sAngle = 5;
var sRadius = 1;
var sFrameCount = 0;
var ellipseW = 5;
var portraitW;
var portraitH;

function preload() {
	var myImageURL = "";
	portrait = loadImage(myImageURL);

function setup() {
    portraitW = portrait.width;
    portraitH = portrait.height;
    //canvas size is identical to that of the portrait
    createCanvas(portraitW, portraitH);

function drawSpiral() {
    //spiral starts at the middle of the canvas
    translate(width/2, height/2);
    var centerX = 0;
    var centerY = 0;
    var x = cos(radians(sAngle)) * sRadius;
    var y = sin(radians(sAngle)) * sRadius;

    //capture the color of the pixels
    var theColorAtLocationXY = portrait.get(width/2 - x, height/2 + y);
    ellipse(centerX - x, centerY + y, ellipseW, ellipseW);
    //pixel dimensions
    sAngle = sAngle + 3; //the angle between rays of pixels
    sRadius = sRadius + 0.05; //the density of the spiral
    sFrameCount = sFrameCount + 1; //count of number of pixels
    ellipseW = ellipseW + .0003; //the increase in pixel size

    //when there are more than a certain number of pixels, start over
    if (sFrameCount > 10000) {
        sAngle = 5;
        sFrameCount = 0;
        sRadius = 1;
        ellipseW = 5;



function draw() {

I experimented with a few images on pixel sizes, pixel distance, and spiral “density”. Overall, portraits with a focus in the middle work best for two reasons 1) when the distance between pixels is small,  more details are “smudged” towards the periphery; 2) when the distance is larger, the pixels are further apart towards the periphery, therefore depicting fewer details. Below are some screenshots.

Since it’s almost Halloween….I ran Mortica Addams with my code. It is portrayed with smaller pixel sizes that increase more over frames, and closer pixel distance.
Another variance contains multiple spirals. For this one, I did not reset the spiral every time it reaches a count. Instead, I let it run over and over with modified dimensions each time.

Project 09 – Computational Portrait – sehenry

For this project I wanted to use a photo that looked really clear and artistic. So as I was scrolling through photos on my phone, I found a photo that my girlfriend took of herself and edited. I thought that the green background of the building would look really good split apart by many pixels. As I looked at the example on the deliverable page, I wanted to include a different shape and background to present itself as the picture comes together. So I decided to use small triangles while allowing the user to use their mouse to drag even smaller circles to reveal more detail in the face or clothing.

I enjoyed this project.






//Seth Henry

//Tuesdays at 10:30


//Project 09 Computational Portrait 

//Global Variable 

var rachelImg;

function preload() {
    var rachelUrl = "" //Upload Picture
    rachelImg = loadImage(rachelUrl);

function setup() {
    createCanvas(600, 500);
    background(255); //white background
    rachelImg.loadPixels(); //Grab pixels
    frameRate(1500);//Pixels Appear Fast

function draw() {
    var rW = random(width); //Random x Loc
    var rH = random(height); //Random y Loc
    var posX = constrain(floor(rW), 0, width-25); //Will not appear past boundaries
    var posY = constrain(floor(rH), 0, height-25);
    var rachelColor = rachelImg.get(posX,posY) //Retrieve color pixels of image
    triangle(rW,rH, rW+4,rH-4, rW+8,rH); //draw triangles

function mouseDragged(){
    var rachelColor = rachelImg.get(mouseX,mouseY) //Retrieve color of pixel where mouse is
    ellipse(mouseX,mouseY,1,1) //Drags smaller, more defined pixels in shape of circle

Project 9: Computational Portrait

For this portrait project, I chose to feature a picture I took of my youngest sister eating a donut.

The original image.
The original image.

I wanted to play with varying shape and size of pixels, so I created a program that starts out with drawing large rings of the image, and then with each click of the mouse, the rings incrementally decrease in size (until a certain point). Additionally, in order to play with shape, rectangles instead of rings are drawn when the user moves the mouse across the canvas (and the rectangles also decrease in size as the mouse is clicked).

Below are two renditions of what the image could ultimately look like. Of course, there are many more possible images that could be generated, since the presence of rings or rectangles and their respective sizes are controlled by the user’s command of the mouse.




/*Emma Shi
Section B
Project 9

var img;
var outlineWH = 30;

function preload(){
    var imgURL = ""
    img = loadImage(imgURL);

function setup() {
    createCanvas(400, 533);

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var ColorXY = img.get(ix, iy);

    ellipse(ix, iy, outlineWH, outlineWH);//draws circles that appear to make the image complete
    rect(mouseX, mouseY, outlineWH, outlineWH);//draws squares according to mouse movement

function mousePressed() {
    if (outlineWH == 30) {
        outlineWH = 25;
    } else if (outlineWH == 25) {
        outlineWH = 20;
    } else if (outlineWH == 20) {
        outlineWH = 15;
    } else if (outlineWH == 15) {
        outlineWH = 10;
    } else if (outlineWH == 10) {
        outlineWH = 5;
    //the size of the circles and squares decreases by 5 with each click