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

https://processing.org/examples/simpleparticlesystem.html

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日星期五

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

3. simple particle system

https://processing.org/examples/simpleparticlesystem.html

EXercise:
draw 'array-like' object with OOP

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();

}

2020年11月27日星期五

week 11. drawing mandala

Basic sample 1:

float resolution;
float radius = 100;
float circleX;
float circleY;
float offset;

void setup() {
size(700, 700);
circleX = 0;
circleY = 0;
}

void draw() {
fill(0,0,0,25);
rect(0,0,width,height);
translate(width/2, height/2);
fill(255);
noStroke();
offset++;

resolution = map(sin(offset*0.005), -1, 1, 2, 20);
// resolution = 20;

for (int i = 0; i < resolution; i++) {
float angle = map(i, 0, resolution, 0, TWO_PI);
// float waveOffset = sin(angle*circles) * 200;

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

float x = circleX + circleOffsetX;
float y = circleY + circleOffsetY;

ellipse(x, y, 10, 10);

}
}

Sample 2:

float resolution;
float radius = 100;
float circleX;
float circleY;
float circles;
float circleW;
float circleH;
float offset;

void setup() {
size(700, 700);
circleX = 0;
circleY = 0;
}

void draw() {
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, 11, 13);
//resolution = 50;
circles = 400;

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

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; //scale the -1 to 1 up

float angle = map(i, 0, resolution, 0, TWO_PI * 156); //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;

ellipse(x, y, circleW, circleH);

}

}

example 3:

float resolution;
float radius = 100;
float circleX;
float circleY;
float circles;
float offset;

void setup() {
size(700, 700);
circleX = 0;
circleY = 0;
}

void draw() {
fill(0,0,0,25);
rect(0,0,width,height);
translate(width/2, height/2);
fill(255, 255, 0);
noStroke();
offset++;

resolution = map(cos(offset*0.0002), -1, 1, 2, 200);
circles = 100;

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

float scale = 400;

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

float angle = map(i, 0, resolution, 0, TWO_PI * 156); //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;

stroke(255);
//line(x, y, 0, 0);
vertex(x,y);

}
endShape(CLOSE);

}

reference:
search "mandala" on
https://www.openprocessing.org/

2020年11月19日星期四

week 10. using recursion for Sacred Geometry

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;

void setup(){
size(600,600);
background(0);
stroke(255);
centerX = height/2;
centerY = width/2;
}

void draw(){
background(0);
radius = dist(centerX, centerY, mouseX, mouseY);
spiral(centerX,centerY,radius,segment, recursionLevel);
}
void spiral(float x_c,float y_c, float r, int seg,int level){
level -= 1;
noFill();
ellipse(x_c,y_c,2*r,2*r);
for(int i =0;i < seg; i++){
float x = x_c+cos(i*2*PI/seg)*r;
float y = y_c+sin(i*2*PI/seg)*r;
point(x,y);
ellipse(x,y,2*r,2*r);

if(level > 0){
spiral(x,y,r,seg, level);
}
}
}

example 2:

float radius; int segment = 6; float centerX; float centerY;
int recursionLevel = 3;

void setup(){
size(600,600);
background(0);
stroke(255);
centerX = height/2;
centerY = width/2;
}

void draw(){
background(0);
// radius = dist(centerX, centerY, mouseX, mouseY);
radius = 50;

pushMatrix();
translate(centerX-100, centerY);
rotate(frameCount / 50.0);
spiral(0,0,radius,segment, recursionLevel);
popMatrix();

}
void spiral(float x_c,float y_c, float r, int seg,int level){
level -= 1;
noFill();
ellipse(x_c,y_c,2*r,2*r);
for(int i =0;i < seg;i++)
{
float x = x_c+cos(i*2*PI/seg)*r;
float y = y_c+sin(i*2*PI/seg)*r;
point(x,y);
ellipse(x,y,2*r,2*r);

if(level>0){
spiral(x,y,r,seg, level);
}
}
}

example 3:

float radius;

int segment = 6;

float centerX;

float centerY;

int recursionLevel = 3;

void setup(){

size(600,600);

background(0);

stroke(255);

centerX = height/2;

centerY = width/2;

}

void draw(){

background(0);

// radius = dist(centerX, centerY, mouseX, mouseY);

radius = 50;

pushMatrix();

translate(centerX, centerY);

rotate(frameCount / 50.0);

spiral(0,0,radius,segment, recursionLevel);

popMatrix();

}

void spiral(float x_c,float y_c, float r, int seg,int level){

level -= 1;

noFill();

//ellipse(x_c,y_c,r*2,r*2);

for(int i =0;i < seg;i++)

{

float x = x_c+cos(i*2*PI/seg)*r;

float y = y_c+sin(i*2*PI/seg)*r;

//point(x,y);

float r1= 2*r*map(sin(frameCount/50.0+i*PI/6.0), -1.0, 1.0, 0.01, 4.0);

ellipse(x,y,r1,r1);

if(level>0){

spiral(x,y,r,seg, level);

}

References:

The Illusions of Reality & The Basics of Sacred Geometry (The Patterns of Consciousness)

https://www.youtube.com/watch?v=zoqTNpok6zw

project 2:

draw mandala or Sacred Geometry (tree of life)

4 compositions representing earth, water, fire, wind, (4 elements)
deadline 12/11, 2020

2020年11月13日星期五

week 9. using sine

(時間往復變化)

practice:

用sine 控制一個物件之

(1) 大小 scale (https://processing.org/examples/sine.html)

(2) 位置 translation (https://processing.org/examples/sinecosine.html)

(3) 旋轉(自轉與他轉) rotation

(空間切割) sample codes:

float radius;
int segment = 10;
float centerX;
float centerY;

void setup(){
size(600,600);
background(0);
stroke(255);
centerX = height/2;
centerY = width/2;
}

void draw(){
background(0);
radius = dist(centerX, centerY, mouseX, mouseY);
spiral(centerX,centerY,radius,segment);
}
void spiral(float x_c,float y_c, float r, int seg){
for(int i =0;i<=seg;i++){
float x = x_c+cos(i*2*PI/seg)*r; //算出x的位置
float y = y_c+sin(i*2*PI/seg)*r; //算出y的位置
point(x,y); // 畫出點，也能用其他形狀
}
}

( 空間切割範例)
https://processing.org/examples/star.html

using map

https://processing.org/examples/map.html

example :

void setup() {

size(800, 600);

noFill();

stroke(255, 255, 255);

}

void draw() {

float d;

background(0);

for (int i= 0; i<width; i+=50) {

pushMatrix();

translate(i, 0);

rotate(map(sin((i/40.0+frameCount)/30.0), -1.0, 1.0, -PI/4, PI/4));

line(0, 0, 0, 350);

translate(0, 350);

ellipse(0, 0, 50, 50);

popMatrix();

}

EX:
1. 每次點擊滑鼠，劃一個隨機半徑大小的圓。
2. draw flower of life (生命之花)

reference:

https://processing.org/examples/sine.html

https://processing.org/examples/sinecosine.html

John Whitney
https://www.youtube.com/watch?v=kzniaKxMr2g

Processing Tutorial Sin & Cos

https://www.youtube.com/watch?v=s_KIrIJkLoE

2020年10月29日星期四

week 7. 3D primitives and array

size(640, 360, P3D); 
background(0);
lights();

noStroke();
pushMatrix();
translate(130, height/2, 0);
rotateY(1.25);
rotateX(-0.4);
box(100);
popMatrix();

noFill();
stroke(255);
pushMatrix();
translate(500, height*0.35, -200);
sphere(280);
popMatrix();

example2:

int gridSize = 50;
void setup(){
  size(640,360,P3D);
  
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, 0);
 //   rotateY(frameCount/5);
    rotateX(frameCount/7);
    noStroke();
    box(20);
    popMatrix();
  }
}

Example3, cube rotation + 2D array

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(2.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, 0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

Examples 4:

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, sin(frameCount/20.0)*20.0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

example 5: using sin

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, sin((frameCount/10.0)%width+i)*50.0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

References:

https://processing.org/tutorials/p3d/

訂閱：文章 (Atom)

aesthetic computing 美學運算

2020年12月25日星期五

week 15. self portrait

2020年12月18日星期五

week 14. image

2020年12月11日星期五

week 13. Project 2 demo & Object-Oriented Programming

2020年12月3日星期四

week 12, mandala drawing II

2020年11月27日星期五

week 11. drawing mandala

2020年11月19日星期四

week 10. using recursion for Sacred Geometry

The Illusions of Reality & The Basics of Sacred Geometry (The Patterns of Consciousness)

2020年11月13日星期五

week 9. using sine

Processing Tutorial Sin & Cos

2020年10月29日星期四

week 7. 3D primitives and array

NTUST aesthetic computing

2020年12月25日 星期五

2020年12月18日 星期五

2020年12月11日 星期五

2020年12月3日 星期四

2020年11月27日 星期五

2020年11月19日 星期四

The Illusions of Reality & The Basics of Sacred Geometry (The Patterns of Consciousness)

2020年11月13日 星期五

Processing Tutorial Sin & Cos

2020年10月29日 星期四

2020年12月25日星期五

2020年12月18日星期五

2020年12月11日星期五

2020年12月3日星期四

2020年11月27日星期五

2020年11月19日星期四

2020年11月13日星期五

2020年10月29日星期四