Skip to content

Latest commit

 

History

History
262 lines (208 loc) · 4.15 KB

p19.md

File metadata and controls

262 lines (208 loc) · 4.15 KB

Arrays of Objects

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

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

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

let bubbles = [];

function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < 6; i++) {
        let x = 20 + 100 * i;
        bubbles[i] = new Bubble(x, 200, 20);
    }
    
}

function draw() {
    background(0);
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].show();
    }
}
  • sketch.js
class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
    }

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

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

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, 40)
        bubbles[i] = new Bubble(x, y, r);
    }
    
}

function draw() {
    background(0);
    
    // for (let i = 0; i < bubbles.length; i++) {
    //     bubbles[i].move();
    //     bubbles[i].show();
    // }

    for (let bubble of bubbles) {
        bubble.move();
        bubble.show();
    }
}
  • sketch.js
class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
    }

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

    show() {
        noStroke();
        fill(255, 10);
        circle(this.x, this.y, this.r*2);
    }
}

let bubbles = [];

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

function draw() {
    background(0);
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].show();
    }
}
  • sketch.js
class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
    }

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

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

let bubbles = [];

function setup() {
    createCanvas(600, 400);
}

function mousePressed() {
    let r = random(10, 50);
    let b = new Bubble(mouseX, mouseY, r);
    bubbles[0] = b;
    // bubbles.push(b);
}

function draw() {
    background(0);
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].show();
    }
}
  • sketch.js
class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
    }

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

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

let bubbles = [];

function setup() {
    createCanvas(600, 400);
}

function mouseDragged() {
    let r = random(10, 50);
    let b = new Bubble(mouseX, mouseY, r);
    bubbles.push(b);
}

function draw() {
    background(0);
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].show();
    }
}