Computational self-portrait

This is my self-portrait. I try to use parabola lines instead of points to draw my image. The shape of lines is varied by adding an acceleration variable to change dx and dy. The portrait is looped and redrawn every 500 lines.

//Jason Jiang
//Section E
//Setting up variables
var np = 0;
var particleSetup = [];
var myProtrait
function preload(){
    myProtrait = loadImage("https://i.imgur.com/huB83xd.jpg");
}

//Updating properties of particles each step
function particleStep(){
    //Getting pixel color of the location of each particle on the image
    this.c = myProtrait.get(this.x, this.y);
    
    //Adding acceleration to create parabola curve
    this.dx += this.ax;
    this.dy += this.ay;
    
    //Updating x,y locations of particles
    this.x += this.dx;
    this.y += this.dy;
    
    //Updating x,y locations of particles in next step
    this.x1 = this.x + this.dx;
    this.y1 = this.y + this.dy;
    
}

//Drawing lines between two particles
function particleDraw(){
    stroke(this.c);
    strokeWeight(this.s);
    line(this.x, this.y, this.x1, this.y1);
    
}

//Creating particles
function particle(px, py, pdx, pdy, pax, pay, pc, px1, py1, ps){
    var p = {
        x: px, 
        y: py, 
        dx: pdx, 
        dy: pdy, 
        ax: pax, 
        ay: pay, 
        c: pc, 
        x1: px1, 
        y1: py1, 
        s: ps,
        stepfunction: particleStep, 
        drawfunction: particleDraw
        }
    return p; 
}

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


function draw(){
    //Constraining number of particles
    if (np < 500){
        //Creating objects and adding them into array
        c = color(random(255), random(255), random(255))
        var p = particle(random(width), random(height), random(5), random(10), random(0.5, -0.5), random(0.5, -0.5), c, 0, 0, random(1,8));
        particleSetup.push(p);
        np+=1
    }

    //Resetting canvas if num of particles exceeds 500
    if (np == 500){
        background(255);
        np = 0;
        particleSetup = [];
    }

    //Running particles
    for(i = 0; i < np; i++){
        var p = particleSetup[i];
        p.stepfunction();
        p.drawfunction();
    }
   
    }

Leave a Reply