Skip to content

Latest commit

 

History

History
199 lines (159 loc) · 3.87 KB

p24.md

File metadata and controls

199 lines (159 loc) · 3.87 KB

Objects and Images

  • 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>Objects and Images</h1>
  
</body>
</html>
  • sketch.js
class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.brightness = 0;
    }

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

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

    clicked(x, y) {
        let d = dist(x, y, this.x, this.y);
        if (d < this.r) {
            // console.log("CLICKED ON BUBBLE!");
            this.brightness = 255;
        }
    }

    changeColor() {
        this.brightness = 255;
    }

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


let bubbles = [];
let flower;

function preload() {
    flower = loadImage("flower.png");
}


function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(20, 60);
        let b = new Bubble(x, y, r);
        bubbles.push(b);
    }
}

function mousePressed() {
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].clicked(mouseX, mouseY);
    }
}

function draw() {
    background(0);

    for (let bubble of bubbles) {
        if (bubble.contains(mouseX, mouseY)) {
            bubble.changeColor();
        }
        
        bubble.move();
        bubble.show();
    }

}
  • sketch.js
let bubbles = [];
let flower;
let kittens = [];

class Bubble {
    constructor(x, y, r, img) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.kitten = img;
    }

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

    show() {
        image(this.kitten, this.x, this.y, this.r, this.r);
    }

    clicked(x, y) {
        if (x > this.x && x < this.x + this.r && y > this.y && y < this.y + this.r) {
            this.kitten = random(kittens);
            // this.kitten = flower;
        }
    }

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


function preload() {
    flower = loadImage("flower.png");
    for (let i = 0; i < 5; i++) {
        // kittens[i] = loadImage("kitten" + i + ".jpg");
        kittens[i] = loadImage(`kitten${i}.jpg`);
    }   
}


function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 10; i++) {
        let x = random(width);
        let y = random(height);
        let r = random(50, 100);
        let kitten = random(kittens);
        let b = new Bubble(x, y, r, kitten);
        bubbles.push(b);
    }
}

function mousePressed() {
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].clicked(mouseX, mouseY);
    }
}

function draw() {
    background(0);

    for (let bubble of bubbles) {        
        bubble.move();
        bubble.show();
    }
}