Skip to content

Latest commit

 

History

History
671 lines (520 loc) · 11.4 KB

p22.md

File metadata and controls

671 lines (520 loc) · 11.4 KB

Object Communication

  • index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
  <script src="sketch.js"></script>
  <title>P5.js 연습</title>
</head>
<body>
  <h1>Object Communication</h1>
  
</body>
</html>
  • sketch.js
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        if (d < this.r) {
            return true;
        } else {
            return false;
        }
    }
}


let bubble1;
let bubble2;


function setup() {
    createCanvas(600, 400);
    bubble1 = new Bubble(200, 200);
    bubble2 = new Bubble(400, 200, 100);
}


function draw() {
    background(0);
    bubble1.show();
    bubble1.move();
    bubble2.show();
    bubble2.move();
}
  • sketch.js
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        if (d < this.r) {
            return true;
        } else {
            return false;
        }
    }
}


let bubble1;
let bubble2;


function setup() {
    createCanvas(600, 400);
    bubble1 = new Bubble(200, 200);
    bubble2 = new Bubble(400, 200, 120);
}


function draw() {
    background(0);
    
    let d = dist(bubble1.x, bubble1.y, bubble2.x, bubble2.y);
    if (d < bubble1.r + bubble2.r) {
        background(200, 0, 100);
    }

    bubble1.show();
    bubble1.move();
    bubble2.show();
    bubble2.move();

}
  • sketch.js
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

   contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        // if (d < this.r) {
        //     return true;
        // } else {
        //     return false;
        // }

        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        // if (d < this.r + other.r) {
        //     return true;
        // } else {
        //     return false;
        // }   

        return (d < this.r + other.r);
    }
}


let bubble1;
let bubble2;


function setup() {
    createCanvas(600, 400);
    bubble1 = new Bubble(200, 200);
    bubble2 = new Bubble(400, 200, 100);
}


function draw() {
    background(0);
    
    if (bubble1.intersects(bubble2)) {
        background(200, 0, 100);
    }

    bubble1.show();
    bubble1.move();
    bubble2.show();
    // bubble2.move(); 
    bubble2.x = mouseX;
    bubble2.y = mouseY;

}
  • sketch.js
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        return (d < this.r + other.r);
    }
}


let bubbles = [];


function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(10, 50);
        bubbles[i] = new Bubble(x, y, r);
    }
    
}


function draw() {
    background(0);
    
    for (b of bubbles) {
        b.show();
        b.move();
    }
}
  • sketch.js
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        return (d < this.r + other.r);
    }
}


let bubbles = [];
let mybubble;


function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(10, 50);
        bubbles[i] = new Bubble(x, y, r);
    }
    mybubble = new Bubble(400, 200, 10);
}


function draw() {
    background(0);
    
    mybubble.x = mouseX;
    mybubble.y = mouseY;
    mybubble.show();
    mybubble.move();
     
    for (b of bubbles) {
        b.show();
        b.move();
    }
}
  • sketch.js
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        return (d < this.r + other.r);
    }
}


let bubbles = [];
let mybubble;


function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(10, 50);
        bubbles[i] = new Bubble(x, y, r);
    }
    mybubble = new Bubble(400, 200, 10);
}


function draw() {
    background(0);
    
    mybubble.x = mouseX;
    mybubble.y = mouseY;
    mybubble.show();
    mybubble.move();
     
    for (b of bubbles) {
        b.show();
        b.move();
        if (b.intersects(mybubble)) {
            b.changeColor(255);
        } else {
            b.changeColor(0);
        }
    }
}
  • 😠 sketch.js (I don't know why it dosen't work!)
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-3, 3);
        this.y = this.y + random(-3, 3);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        return (d < this.r + other.r);
    }
}


let bubbles = [];

function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(10, 100);
        bubbles[i] = new Bubble(x, y, r);
    }
}


function draw() {
    background(0);
         
    for (let b of bubbles) {
        b.show();
        b.move();
        
        for (let other of bubbles) {
            if (b !== other && b.intersects(other)) {
                b.changeColor(255);
            } 
            else {  // Else part cause problem!!!
                b.changeColor(0);
            }
        }
        
    }
}
  • 😕 sketch.js (It works!!!)
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        return (d < this.r + other.r);
    }
}


let bubbles = [];

function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(10, 50);
        bubbles[i] = new Bubble(x, y, r);
    }
}


function draw() {
    background(0);
         
    for (let b of bubbles) {
        b.show();
        b.move();
        b.changeColor(0);
        for (let other of bubbles) {
            if (b !== other && b.intersects(other)) {
                b.changeColor(255);
            } 
        }
    }
}
  • 😛 sketch.js (Safer way!!!)
class Bubble {
    constructor(x, y, r=50) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

    move() {
        this.x = this.x + random(-2, 2);
        this.y = this.y + random(-2, 2);
    }

    show() {
        stroke(255);
        strokeWeight(4);
        fill(this.brightness, 125);
        circle(this.x, this.y, this.r*2);
    }

    changeColor(bright) {
        this.brightness = bright;
    }

    contains(x, y) {
        let d = dist(x, y, this.x, this.y);
        return (d < this.r);
    }

    intersects(other) {
        let d = dist(this.x, this.y, other.x, other.y);
        return (d < this.r + other.r);
    }
}


let bubbles = [];

function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(10, 50);
        bubbles[i] = new Bubble(x, y, r);
    }
}


function draw() {
    background(0);
         
    for (let b of bubbles) {
        b.show();
        b.move();
        let overlapping = false;
        for (let other of bubbles) {
            if (b !== other && b.intersects(other)) {
                overlapping = true;
            } 
        }
        if (overlapping) {
            b.changeColor(255);
        } else {
            b.changeColor(0);
        }
    }
}