week 13. Project 2 demo & Image

1. Mandala Project Demo

2. Image

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

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

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

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

EX:

load your own portrait (在"程式素描本"/Sketch下使用"新增檔案"/Add file，將照片加入程式)

do image process

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

Dec.  19, 2025

week 12. Object-Oriented Programming

1.  Mandala 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

Challenge:

  draw Mandala with OOP 

   (define your own object class for mandala object) 

reference:

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

mandala OOP example:

Mandala myMandala;

void setup() {

  size(600, 600);

  myMandala = new Mandala();

}

void draw() {

background(0);

 fill(0,0,0);

  rect(0,0,width,height);

myMandala.drawMandala();

myMandala.updateMandala();

}

class Mandala{

float radius;

int segment = 12;

float centerX;

float centerY;

int[] pattern;

Mandala(){

 stroke(255);

 centerX = height/2;

 centerY = width/2;

 pattern = new int[8];

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

   pattern[i]=(int) random(4);

}

void drawMandala()

{

  background(0);

   fill(0,0,0);

  rect(0,0,width,height);

  radius = 30.0;

  segment = 12;

  noFill();

  pushMatrix(); 

    translate(centerX, centerY);

     rotate(frameCount/40.0);

     translate(-centerX, -centerY);

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

   radius=radius+25.0;  

   segment=segment+ 6;

    

   

    spiral(centerX,centerY,radius,segment, pattern[i]);

    

  }

  popMatrix();

}

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

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

    float theta = i*2*PI/seg;  

     float x = x_c+cos(theta)*r;  //算出x的位置

     float y = y_c+sin(theta)*r;  //算出y的位置

//      point(x,y);  // 畫出點，也能用其他形狀

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

    if (pattern == 0) ellipse(x_c, y_c, 2*r+8, 2*r+8);

   if (pattern == 1) drawPattern1(x,y,theta);

   if (pattern == 2) drawPattern2(x,y,theta);  

   if (pattern == 3) drawPattern3(x,y,theta);     

   //pattern  

    

    }

}

void drawPattern1(float x, float y, float theta){

    pushMatrix();

      translate(x,y);

      rotate(theta);

    point(5, 0);

    line(0,10, 20,0);

    line(0,-10, 20, 0);

     popMatrix();

}

void drawPattern2(float x, float y, float theta){

    pushMatrix();

      translate(x,y);

      rotate(theta);

    ellipse(5, 0, 5, 5);

    arc(0, 0, 30, 20, PI*1.5, PI*2.5);

     arc(0, 0, 25, 15, PI*1.5, PI*2.5);

     popMatrix();

}

void drawPattern3(float x, float y, float theta){

    pushMatrix();

      translate(x,y);

      rotate(theta);

     beginShape();

       curveVertex(0,  8);

       curveVertex(0,  8);

       curveVertex(16,  6);

       curveVertex(16,  -6);

       curveVertex(0, -8);

       curveVertex(0, -8);

      endShape();

    beginShape();

       curveVertex(0,  10);

       curveVertex(0,  10);

       curveVertex(20,  8);

       curveVertex(20,  -8);

       curveVertex(0, -10);

       curveVertex(0, -10);

      endShape();

//    bezier(0,-10, 15, -9, 0, 0, 18,0);

//    bezier(0,10, 15, 9,0, 0, 18,0);

     popMatrix();

}

void updateMandala()

{

}  

}

week 11. drawing mandala

 

float radius;

int segment = 12;

float centerX;

float centerY;

void setup(){

 size(600,600);

 background(0);

 stroke(255);

 centerX = height/2;

 centerY = width/2;

 noLoop();

}

void draw(){

  background(0);

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

int pattern;

radius = 30.0;

noFill();

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

radius=radius+25.0;

segment=segment+ 6;

pattern = (int) random(4);

    spiral(centerX,centerY,radius,segment, pattern);

}

  

}

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

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

  float theta = i*2*PI/seg;

     float x = x_c+cos(theta)*r;  //算出x的位置

     float y = y_c+sin(theta)*r;  //算出y的位置

//      point(x,y);  // 畫出點，也能用其他形狀

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

    if (pattern == 0) ellipse(x_c, y_c, 2*r+8, 2*r+8);

if (pattern == 1) drawPattern1(x,y,theta);

if (pattern == 2) drawPattern2(x,y,theta);

if (pattern == 3) drawPattern3(x,y,theta);

//pattern

    }

}

void drawPattern1(float x, float y, float theta){

pushMatrix();

      translate(x,y);

      rotate(theta);

point(5, 0);

line(0,10, 20,0);

line(0,-10, 20, 0);

     popMatrix();

}

void drawPattern2(float x, float y, float theta){

pushMatrix();

      translate(x,y);

      rotate(theta);

ellipse(5, 0, 5, 5);

arc(0, 0, 30, 20, PI*1.5, PI*2.5);

   arc(0, 0, 25, 15, PI*1.5, PI*2.5);

     popMatrix();

}

void drawPattern3(float x, float y, float theta){

pushMatrix();

      translate(x,y);

      rotate(theta);

   beginShape();

       curveVertex(0,  8);

       curveVertex(0,  8);

       curveVertex(16,  6);

       curveVertex(16,  -6);

       curveVertex(0, -8);

       curveVertex(0, -8);

      endShape();

beginShape();

       curveVertex(0,  10);

       curveVertex(0,  10);

       curveVertex(20,  8);

       curveVertex(20,  -8);

       curveVertex(0, -10);

       curveVertex(0, -10);

      endShape();

//    bezier(0,-10, 15, -9, 0, 0, 18,0);

//    bezier(0,10, 15, 9,0, 0, 18,0);

     popMatrix();

}

 
 

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/

also 

https://aestheticcomputing2010.blogspot.com/2020/12/week-12-mandala-drawing-ii.html

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

The Story of Creation Through Sacred Geometry

https://youtu.be/utMx48aGndI?si=Al7d7bfxDIZP_Ugb

project 2:

draw mandala or Sacred Geometry (tree of life)

4 compositions representing earth, water, fire, wind, (4 elements)
deadline  11/28, 2025