http://shanear.com/artworks/typoportrait
Typo Portraits
pointillism portraits
cubist portrait
Question:
How to generate "typo portraits"?
self portrait in particles
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 circleX;
float circleY;
float circles;
float circleW;
float circleH;
float offset;
PImage img;
void setup() {
size(736, 736);
circleX = 0;
circleY = 0;
background(0);
img = loadImage("portrait.jpg");
}
void draw() {
float value;
color pix;
fill(0,0,0,25);
// rect(0,0,width,height);
translate(width/2, height/2);
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 = circleX + circleOffsetX;
float y = circleY + circleOffsetY;
pix = img.get(int(x+width/2), int(y+height/2));
value = brightness(pix);
fill(0, green(pix), blue(pix));
ellipse(x, y, circleW, circleH);
}
}
Final Project:
Self Portrait Demo:
最少三種
例如,Andy Warhol 風格,字型風格,拼貼風格,動態曼陀羅風格,...
Jan. 3, 2019
2018年12月20日 星期四
2018年12月13日 星期四
2018年12月6日 星期四
week 13. Project 2 demo & Object-Oriented Programming
1. Mandala Project Demo
Project reference:
http://sciencefictioninterfaces.tumblr.com/
2. object oriented programming:
https://processing.org/tutorials/objects/
https://www.youtube.com/watch?v=YcbcfkLzgvs
EXercise:
draw 'array-like' object with OOP
Project reference:
http://sciencefictioninterfaces.tumblr.com/
2. object oriented programming:
https://processing.org/tutorials/objects/
https://www.youtube.com/watch?v=YcbcfkLzgvs
EXercise:
draw 'array-like' object with OOP
訂閱:
文章 (Atom)