Author: Mikołaj Dębicki

https://youtu.be/lKP8C1pRbiw

In this work I wanted to display how networks of people are created. The program starts off by creating several dots (people), and then randomly joins them together (relations). That is supposed to symbolize how humans form relations. Note that some of the lines change their color with time, as the relationship status changes as well. Even though people are connected randomly, they are capable of creating dense networks. I used the for loop to create the animation of two dots “coming” to each other.

var points = [];
var lines = [];

function setup() {
  createCanvas(800, 800);
  background(220);
  strokeWeight(5);
}

function draw() {
  if(frameCount%100==0){
    addPoint(floor(random(width)), floor(random(height)));
  }
  if(frameCount%50==0){
    addLine();
  }  
  drawLines();
}

function drawLines(){
  for(i=0;i<lines.length;i++){
    l=lines[i];
    initA=l.p1;
    initB=l.p2;
    vx=abs(initA.x-initB.x)/400;
    vy=abs(initA.y-initB.y)/400;
    tmpA=l.tmpA;
    tmpB=l.tmpB;
    
    if(((abs(initA.x-initB.x)/2)-(abs(initA.x-tmpA.x)))>0){
      if(initA.x>initB.x){
        tmpA.x-=vx;
        tmpB.x+=vx;
      }
      else {
        tmpA.x+=vx;
        tmpB.x-=vx;
      }
      if(initA.y>initB.y){
        tmpA.y-=vy;
        tmpB.y+=vy;
      }
      else {
        tmpA.y+=vy;
        tmpB.y-=vy;
      }
      
    stroke(l.c);
    point(tmpA.x, tmpA.y);
    point(tmpB.x, tmpB.y);
    }  
  }
}

function addPoint(x, y){
  p=new Point(x, y);
  points.push(p);
  stroke(p.c);
  point(p.x, p.y);
}

function addLine(){
  if(points.length>2){
    r1=floor(random(points.length-1));
    r2=floor(random(points.length-1));
    while(r1==r2){
      r2=floor(random(points.length-1));
    }
    p1=points[r1];
    p2=points[r2];
    
    l=new Line(p1, p2);
    lines.push(l);
  }
}

function Point(x, y) {
  this.x=x;
  this.y=y;
  this.c="#".concat((floor(random()*16777215)).toString(16));
}

function Line(p1, p2){
  this.p1=p1;
  this.p2=p2;
  this.tmpA= new Point(p1.x, p1.y);
  this.tmpB= new Point(p2.x, p2.y);
  this.c="#".concat((floor(random()*16777215)).toString(16));
}

 

Miko

In my first assignment I really wanted to incorporate some form of animation. I decided to focus on blinking eyes. I used arc() function to draw arcs and changed their start points as well as the endpoints with respect to other parts of the eye. I decided to split the animation into 3 parts: the eyelid, the iris and the pupil. The eyelid and the iris animate at the same intervals, but the iris needed a small adjustment, as the arc length of a circle did not correspond directly to that of an ellipse of the eyelid. The last part, the pupil, comes into play only when the eyelid is almost closed.

float eyelidPosition = 40;
float irisPosition = 40;
float pupilPosition = 5;
float speed = 0.3;
int skinColor = #FEB186;
int mouthColor = #C18E74;

void setup() {
size(640, 360);
background(255);
}

void draw() {
background(255);
drawFace(200, 200);
}

void drawEye(int x, int y) {
//EyeShape
ellipse(x, y, 60, 40);

//Eyelid
fill(skinColor);
arc(x, y, 60, 40, PI, 2*PI);
fill(255);

//Eyelid animation
arc(x, y, 60, eyelidPosition, PI, TWO_PI);
arc(x, y, 40, 40, -irisPosition*PI/80, PI+irisPosition*PI/80);

//Pupil
fill(0);
arc(x, y, 5, 5, -pupilPosition*PI/5, PI+pupilPosition*PI/5);
fill(255);

eyelidPosition = eyelidPosition+speed;
irisPosition = eyelidPosition-3*PI;

if (eyelidPosition < 5) {
pupilPosition = pupilPosition+speed;
}
if (eyelidPosition < 0) {
delay(int(random(7)*100));
eyelidPosition=0;
speed=random(0.1,0.5);
} else if (eyelidPosition > 40) {
delay(int(random(5)*1000));
eyelidPosition=40;
speed=-random(0.1,0.5);
}
if (irisPosition < 0) {
irisPosition=0;
}
if (pupilPosition < 0) {
pupilPosition=0;
}
}

void drawSmile(int x, int y) {
fill(mouthColor);
arc(x, y, 150, 60, 0, PI);
arc(x, y, 150, 20, 0, PI);
fill(255);
}

void drawFace(int x, int y) {
fill(skinColor);
ellipse(x, y, 200, 250);
fill(255);
drawSmile(x, y+50);
drawEye(x-50, y-30);
drawEye(x+50, y-30);
}