2020年12月25日 星期五

week 15. self portrait

Typoportraits on IG

Typo Portraits

pointillism portraits

cubist portrait

Question:
 How to generate "typo portraits"?





Example 1:

PImage img;
int smallPoint, largePoint;
PFont f;
float threshold = 80;

void setup() {
size(736, 736);
img = loadImage("portrait.jpg");
smallPoint = 2;
largePoint = 30;
imageMode(CENTER);
noStroke();
background(255);

// Create the font
printArray(PFont.list());
f = createFont("Georgia", 9);
textFont(f);
textAlign(CENTER, CENTER);

}

void draw() {
float value;
color pix;
// if (mousePressed == true) {
background(80);
int counter = 0;
char letter;

float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
float threshold = map(mouseY, 0, height, 0, 255);
for (int x = 0; x < img.width; x+=pointillize) {
for (int y = 0; y < img.height; y+=pointillize){
pix = img.get(x, y);
value = brightness(pix);
if (value > threshold)
fill(0, 255, 0);
else fill(0);
//ellipse(x, y, 5, 5);
counter = int(random(66, 123));
letter = char (counter);
text(letter, x, y);


}
}
// }

}



Example 2:

/**
* Pointillism
* by Daniel Shiffman.
*
* Mouse horizontal location controls size of dots.
* Creates a simple pointillist effect using ellipses colored
* according to pixels in an image.
*/

// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="moonwalk.jpg"; */

PImage img;
int smallPoint, largePoint;

void setup() {
size(736, 736);
img = loadImage("portrait.jpg");
smallPoint = 4;
largePoint = 40;
imageMode(CENTER);
noStroke();
background(255);
}

void draw() {
float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
int x = int(random(img.width));
int y = int(random(img.height));
int xWidth = int(random(10, 200));
int yHeight = int(random(10, 200));
int xShift = int(random(-20, +20));
int yShift = int(random(-20, +20));
for (int i = 0; i< xWidth; i++) {
for (int j = 0; j< yHeight; j++) {
color pix = img.get(x+i, y+j);
stroke(pix);
 //ellipse(xShift+x+i, yShift+y+j, pointillize, pointillize);
point(xShift+x+i, yShift+y+j);
}
}
}


Example 3:

float resolution;
float radius = 100;
float circles;
float circleW;
float circleH;
float offset;
PImage img;


void setup() {
  size(736, 736);
  background(0);
  img = loadImage("portrait.jpg");
}

void draw() {
  float value;
  color pix;
  fill(255);
  noStroke();
  offset++;

  resolution = map(sin(offset*0.00025), -1, 1, 5, 50);
  //resolution = 50;
  circles = 200;

  circleW = map(sin(offset*0.05), -1, 1, 1, 10);
  circleH = map(sin(offset*0.05), -1, 1, 1, 10);

  for (int i = 0; i < resolution; i++) {

    float scale = 200;

    float waveAngle = map(i, 0, resolution, 0, TWO_PI * circles);
    float waveOffset = sin(waveAngle) * scale*1.2;  //scale the -1 to 1 up

    float angle = map(i, 0, resolution, 0, TWO_PI * 331); //multiply for weirdness

    float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
    float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition

    float x = width/2 + circleOffsetX;
    float y = height/2 + circleOffsetY;
    pix = img.get(int(x), int(y));
    value = brightness(pix);
    fill(0, green(pix), blue(pix));
    ellipse(x, y, circleW, circleH);

  }

}

Final Project:
Self Portrait Demo:
最少三種
例如,Andy Warhol 風格,字型風格,拼貼風格,動態曼陀羅風格,...

Jan. 8, 2021

2020年12月18日 星期五

week 14. image

the previous week:  particle system


Exercise :
  modify the sample code to simulate "wind" vector

sample:

ParticleSystem ps;
ParticleSystem ps2;
Wind w;
void setup() {
size(640, 360);
ps = new ParticleSystem(new PVector(width/2, 50));
ps2 = new ParticleSystem(new PVector(width/3, 200));
w = new Wind();
}
void draw() {
background(0);
ps.addParticle();
ps.run();
ps2.addParticle();
ps2.run();
w.update();
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}
void addParticle() {
particles.add(new Particle(origin));
}
void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}
}
}
// A simple Particle class
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
float lifespan;
Particle(PVector l) {
acceleration = new PVector(0, 0.05);
velocity = new PVector(random(-1, 1), random(-2, 0));
position = l.copy();
lifespan = 255.0;
}
void run() {
update();
display();
}
// Method to update position
void update() {
velocity.add(acceleration);
if (!w.isDead()) velocity.add(w.acceleration);
position.add(velocity);
lifespan -= 1.0;
}
// Method to display
void display() {
stroke(255, lifespan);
fill(255, lifespan);
ellipse(position.x, position.y, 8, 8);
}
// Is the particle still useful?
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}
class Wind {
PVector acceleration;
float lifespan = 200;
Wind() {
acceleration = new PVector(0.05, 0);
}
void update(){
lifespan -= 1.0;
}
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}

additional sample :

ParticleSystem ps;
ParticleSystem ps2;
Wind w;
void setup() {
size(640, 360);
ps = new ParticleSystem(new PVector(width/2, 50));
ps2 = new ParticleSystem(new PVector(width/3, 200));
w = new Wind();
}
void draw() {
background(0);
ps.addParticle();
ps.run();
ps2.addParticle();
ps2.run();
w.update();
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}
void addParticle() {
particles.add(new Particle(origin));
}
void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}
}
}
// A simple Particle class
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
float lifespan;
Particle(PVector l) {
acceleration = new PVector(0, 0.05);
velocity = new PVector(random(-1, 1), random(-2, 0));
position = l.copy();
lifespan = 255.0;
}
void run() {
update();
display();
}
// Method to update position
void update() {
velocity.add(acceleration);
if (!w.isDead()) velocity.add(w.acceleration);
position.add(velocity);
lifespan -= 1.0;
}
// Method to display
void display() {
stroke(255, lifespan);
fill(255, lifespan);
ellipse(position.x, position.y, 8, 8);
}
// Is the particle still useful?
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}
class Wind {
PVector acceleration;
float lifespan = 200;
Wind() {
acceleration = new PVector(0.05, 0);
}
void update(){
lifespan -= 1.0;
}
boolean isDead() {
if (lifespan < 0.0) {
return true;
} else {
return false;
}
}
}

----------------------------------------------------------

https://www.processing.org/examples/pointillism.html
https://www.processing.org/reference/PImage.html

https://processing.org/tutorials/pixels/

Exercise:
Create a particle system with an image's color

2020年12月11日 星期五

2020年12月3日 星期四

week 12, mandala drawing II

example 1:

float cX;
float cY;
int nSegment = 24;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;
stroke(200);
noFill();

}

void draw() {
float x;
float y;
float angle;
float r = 200.0;

background(0);

for (int i= 0; i < nSegment; i++) {
angle = i*(PI*2.0)/nSegment;
x = cX+ r*cos(angle);
y = cY+ r*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, 40, 20);
popMatrix();

}

}


example 2:

structured :

float cX;

float cY;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;
stroke(200);
noFill();
noLoop();

}

void draw() {

background(0);
for (int i= 0; i< 4; i++)
drawLayer();

}

void drawLayer() {
float x;
float y;
float angle;
float r = 200.0;
int nSegment = 24;

r = random (60, 260);
nSegment = (int) random (8, 36);

for (int i= 0; i < nSegment; i++) {
angle = i*(PI*2.0)/nSegment;
x = cX+ r*cos(angle);
y = cY+ r*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, 60, 30);
popMatrix();

}

}


example 3:
 array:

float cX;
float cY;


int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;

r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];

for (int i = 0; i< nLayer; i++) {
r[i] = random(60, 260);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);

}

stroke(200);
noFill();
// noLoop();

}

void draw() {

background(0);
for (int i= 0; i< nLayer; i++)
drawLayer(i);

}

void drawLayer(int nth) {
float x;
float y;
float angle;

stroke(brightness[nth], brightness[nth], 100);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = cX+ r[nth]*cos(angle);
y = cY+ r[nth]*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
popMatrix();

}

}


example 4:
centered rotate:

float cX;
float cY;


int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;

r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];

for (int i = 0; i< nLayer; i++) {
r[i] = random(20, 260);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);

}

stroke(200);
noFill();
// noLoop();

}

void draw() {

background(0);
translate(cX, cY);
rotate(frameCount/150.0);
for (int i= 0; i< nLayer; i++)
drawLayer(i);

}

void drawLayer(int nth) {
float x;
float y;
float angle;

stroke(brightness[nth], brightness[nth], 100);
fill(0, brightness[nth], brightness[nth], 25);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = r[nth]*cos(angle);
y = r[nth]*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
popMatrix();

}
}

example 5:

float cX;
float cY;


int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;

void setup() {

size(600, 600);
cX = width/2.0;
cY = height/2.0;

r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];

for (int i = 0; i< nLayer; i++) {
r[i] = random(10, 300);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);

}

stroke(200);
noFill();
// noLoop();

}

void draw() {

background(0);
translate(cX, cY);
rotate(frameCount/map(sin(frameCount/60.0), -1.0, 1.0, -100.0, 100.0));
for (int i= 0; i< nLayer; i++)
drawLayer(i);

}

void drawLayer(int nth) {
float x;
float y;
float angle;

stroke(brightness[nth], brightness[nth], 100);
fill(0, brightness[nth], brightness[nth], 25);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = r[nth]*cos(angle);
y = r[nth]*sin(angle);

pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
//rect(-10, -10, 20, 20);

popMatrix();

}
} 

example 6:

float cX;
float cY;
int nSegment = 60;
void setup() {
size(600, 600);
cX = width/2.0;
cY = height/2.0;
stroke(200);
noFill();
background(0);
}
void draw() {
fill(0, 10);
rect(0, 0, width, height);
for (int i= 0; i< 4; i++) {
drawLeaves(18*(i+1), 80*i+sin(frameCount/40.0)*30.0);
}
}
void drawLeaves(int n, float r)
{
float angle;
float x;
float y;
for (int i= 0; i < n; i++) {
angle = i*(PI*2.0)/n;
x = cX+ r*cos(angle);
y = cY+ r*sin(angle);
pushMatrix();
translate(x, y);
rotate(angle);
ellipse(0, 0, 40, 20);
popMatrix();
}
}

example 7:
float cX;
float cY;
int nLayer = 30;
float[] r;
int[] nSegment;
int[] brightness;
float[] rotateRate;
void setup() {
size(600, 600);
cX = width/2.0;
cY = height/2.0;
r = new float[nLayer];
nSegment = new int[nLayer];
brightness = new int[nLayer];
rotateRate = new float[nLayer];
for (int i = 0; i< nLayer; i++) {
r[i] = random(60, 260);
nSegment[i] = (int) random(6, 60);
brightness[i] = (int) random(10, 255);
rotateRate[i] = random(-100.0, 100.0);
}
stroke(200);
noFill();
// noLoop();
}
void draw() {
background(0);
pushMatrix();
translate(width/2, height/2);
rotate(frameCount/50.0);
translate(-width/2, -height/2);
for (int i= 0; i< nLayer; i++)
drawLayer(i);
popMatrix();
}
void drawLayer(int nth) {
float x;
float y;
float angle;
stroke(brightness[nth], brightness[nth], 100);
for (int i= 0; i < nSegment[nth]; i++) {
angle = i*(PI*2.0)/nSegment[nth];
x = cX+ r[nth]*cos(angle);
y = cY+ r[nth]*sin(angle);
pushMatrix();
translate(x, y);
rotate(angle +frameCount/rotateRate[nth]);
ellipse(0, 0, 60, 30);
popMatrix();
}
}