Month: October 2018

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-09

var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/U0XImSh.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    //translate the origin a little to make the canvas filled
    translate(-20, -20);
    background(187, 230, 235);
    underlyingImage.loadPixels();
}

function drawStar(sx,sy){
    push()
    translate(sx - 20, sy - 20)
    var nPoints = x.length;

    //draw stars based on the two arrays stated at the beginning
    //also use random function to let the stars have slightly different shapes
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var ssx = x[i] + random(-3, 3);
        var ssy = y[i] + random(-3, 3);
        scale(0.85)
        vertex(ssx,ssy);
    }
    endShape(CLOSE);
    pop()
}


function draw() {
    //create random points width the size of (500, 500) 
    //to make sure the stars can reach the edge
    var px = random(width + 20);
    var py = random(height + 20);
    var ix = constrain(floor(px), 0, width + 20);
    var iy = constrain(floor(py), 0, height + 20);
    //get color from the underlying image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //draw stars based on px, py
    drawStar(px, py);
}

This is a very interesting project which reminds me of the first portrait project we did for the course. It is amazing how much I learned along the way.

For this project specifically, I decided to use the star shape we learned how to do earlier as my pixel. The result turns out very good in the end.

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-09-Portrait
*/

var img;

// preoloads photo of my friend Shirley!
function preload() {
    var myImgURL = "https://i.imgur.com/n0vEZ2z.png?2";
    img = loadImage(myImgURL);
}


function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    background(89, 10, 201);
    imageMode(CENTER);
    img.loadPixels();
}

function draw() {
    // chooses a random x value located near the cursor
    var randomX = floor(random(mouseX - 15, mouseX + 15));
    // chooses a random y value located near the cursor
    var randomY = floor(random(mouseY - 15, mouseY + 15));
    // selects the color from a pixel at a random point near the cursor
    fill(img.get(randomX, randomY));
    // draws a flower at that point
    flower(randomX, randomY);
}

// creates flower shape
function flower(x, y) {
    push();
    noStroke();
    translate(x, y);
    ellipse(0, 2, 2, 6);
    rotate(45);
    ellipse(5, 0, 2, 6);
    rotate(90);
    ellipse(5, 0, 2, 6);
    rotate(135);
    ellipse(-8, 5, 2, 6);
    rotate(180);
    ellipse(8, 4, 2, 6);
    rotate(225);
    ellipse(-6, 11, 2, 6);
    rotate(270);
    ellipse(-6, -11, 2, 6);
    rotate(-45);
    ellipse(0, -13, 2, 6);
    pop();
}

这个周末我决定了创造我的朋友Shirley的画像。因为她很艺术的，所以我觉得可能是最好的题材。她很优雅的，所以我决定了创造花来代表这个她的性格的方面。她是我在上海留学的时候的语伴，现在在墨尔本，澳大利亚上大学。你好Shirley！！

This week I decided to make a portrait of my friend Shirley. She is very artistic, so I thought she would be the perfect subject for the project. She is very pretty and elegant, so I decided to create flowers to represent this aspect of her personality. She was my language partner when I studied abroad in Shanghai, and now she attends school in Melbourne, Australia. Hi Shirley!!

I added an aspect where you use the mouse to “paint” the flowers on the screen, and thus be able to control how the portrait is revealed. I think this is interesting, because it allows you to decide how you explore the portrait, and makes the process feel a little more intimate. You can also draw with the mouse in the earlier frames and create swirls and shapes on the screen by revealing the colors of the portrait below.

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-09
*/

var img;

function preload() {

    var imgur = "https://i.imgur.com/tbSmZ90.jpg";
    img = loadImage(imgur);
}

function setup() {

    createCanvas(360, 479); //resize image in photoshop
    background(255, 225, 225);
    imageMode(CENTER);
    frameRate(500); //speed that pixels are drawn 
    img.loadPixels();
    noStroke();

}

function draw() {

    var x = constrain(floor(random(width)), 0, width); //constrains random x values of pixels
    var y = constrain(floor(random(height)), 0, height); //constrains random y values of pixels

    var rgb = img.get(x, y); //extracts colors from image pixels

    fill(rgb);
    ellipse(x, y, 7); //circles drawing the image

}

For this project, I used an image of my best friend from home, Mina! It was a lot easier than I expected! From just a few lines of code, you can produce such a cool animated image! I am excited to try this out with different images and shapes in the future.