Bleeding - OpenProcessing

mySketch
xxxxxxxxxx
 
//2020.12.12 創作者: 蕭柔 p36084051
//創作理念: 這是一個血跡fall、falling和fallen的創作 
//畫面的第一印象，你會感覺到是流血(fall)；接著慢慢地，你會可以看見這在下流的血，一點一滴的向下流動(falling)；最後，血不再流動而停止了(fallen)，剩下的是一片血泊
/*參考資料: 
1. "a class of interacting circles 2" by Sheng-Fen Nik Chien -----https://www.openprocessing.org/sketch/1025584 
2. "Fall" by adeu ----https://www.openprocessing.org/sketch/921179 */
​
let _num = 10;
let _circleSet = []; 
let count=0;
​
function setup() {
  createCanvas(500, 500);
  background(30);
  strokeWeight(1);
  fill(150, 50);
}
​
function draw() {
  //background(255);
  for(let i=0; i<_circleSet.length; i++) {  
    _circleSet[i].updateMe();
  }
  
  //控制噴血的次數，到一定值後，變成falling
  count+=3;
  
  if(count < 100)
  {
    drawCircles();
  }
}
​
function mouseReleased() {
  drawCircles();
}
​
function Circle() {  
  
  //properties
  this.x = random(width);  
  this.y = random(height);  
  this.radius = random(10) + 10;  
  this.linecol = color(random(255), random(255), random(255));  
  this.fillcol = color(random(255), random(255), random(255));  
  this.alph = random(180);  
  this.xmove = random(10) - 5;   
  this.ymove = random(5);
  this.y4 = random(30, 80);
  this.red = mouseX + random(10);
  this.rectH = height;
  
  
  
  //function
  Circle.prototype.drawMe = function() {   
    
    
    noStroke();   
    push();
    
    fill(red(this.linecol), 0, 0, this.alph);
​
    translate(this.x, (this.y + cos(this.y * 0.03) * 20));
    //rotate(sin(this.y*0.02));
    ellipse(this.x, this.y, this.radius);
    //quad(this.x + this.radius, this.y, this.x, this.y+this.radius*2, this.x-this.radius, this.y, this.x, this.y-this.radius*2);
    pop();
        
    
  } 
  
  //讓血跡往下流
  Circle.prototype.updateMe = function() {         
  this.y += this.ymove;     
  
  if (this.y > height - this.radius*2) {
  this.y = height - this.radius*2;
  }
  
  let touching = false;  
  
    for (let i=0; i<_circleSet.length; i++) {
            
      let otherCirc = _circleSet[i];   
      if (otherCirc != this) {    
        let dis = dist(this.x, this.y, otherCirc.x, otherCirc.y);    
        if ((dis-this.radius-otherCirc.radius) < 0) {
          touching = true; 
          break;
        }   
      }  
    }
    
    
    if (touching) {   
      if (this.alph > 0) { 
        this.radius--;  //改變血跡大小
        this.alph++;    //改變血跡的清晰度
    
      }  
    } else {   
      if (this.alph < 255) { 
        this.radius +=3; 
        this.alph++;
        
      }  
    }
    
    if (this.radius >=20){
     this.radius = 20;  
    }
    
    if (this.alph <=30){
     this.alph =30; 
    }
    
    this.drawMe();
  }
} 
​
//一次生成20條血跡
function drawCircles() {  
  for (let i=0; i<_num; i++) {   
    let a_circle = new Circle();   
    a_circle.drawMe();  
    _circleSet.push(a_circle); 
  } 
} 
​
​