p5.js로 이미지 다루기

1. 이미지 불러오기

// 이미지 객체를 생성 후 출력

let img;

function preload() {
  img = loadImage("sample.jpg");
}

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(0);
  image(img, 0, 0);
}

2. 이미지 생성 후 여러 개 출력

// 이미지 객체를 생성 후 복수 개 출력

let img;	
let x = 0, y = 0;

function preload() {
  img = loadImage("sample.jpg");
}

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(0);
  image(img, x, y);
  image(img, x+100, y+100);
  image(img, x+200, y+200);
}

 

 

 

3. 서로 다른 이미지 객체 출력

// 서로 다른 이미지 객체 두 개를 출력

let img1, img2;

function preload() {
  img1 = loadImage("sample1.jpg");
  img2 = loadImage("sample2.jpg");
}

function setup(){
  createCanvas(500, 500);
}

function draw(){
  background(0);
  image(img1, 100, 30);
  image(img2, 100, 250);
}

 

4. 이미지 객체 생성 후 회전

// 이미지 객체를 생성 후 회전 운동

let img;
let theta = 0;

function preload() {
  img = loadImage("sample.jpg");
}

function setup() {
  createCanvas(500, 500);
  background(0);
}

function draw() {
  let x = width/2 + 100 * cos(theta);
  let y = height/2 + 100 * sin(theta);
  imageMode(CENTER);
  image(img, x, y);
  theta += 0.01;
}

 

5. 화면 전체에 작은 이미지로 전체 출력

// 화면 전체에 작은 이미지 객체를 반복 출력

let img;

function preload() {
  img = loadImage("sample.jpg");
}

function setup() {
  createCanvas(500, 500);
  background(0);
}

function draw() {
  for (let y = 0; y < height; y += 100) {
    for (let x = 0; x < width; x += 100) {
      image(img, x, y, 90, 90);
    }
  }
}

 

 

6. 배열에 저장된 이미지 객체가 1초마다 순서대로 출력

// 배열에 저장된 이미지 객체가 1초마다 순서대로 출력

let imgs = [];
let num = 0;

function preload() {
  // 배열에 이미지 객체를 일괄 저장
  let filenames = ["sample01.jpg", "sample02.jpg", "sample03.jpg"];
  for (let i = 0; i < filenames.length; i++) {
    imgs[i] = loadImage(filenames[i]);
  }
}

function setup() {
  createCanvas(500, 300);
  frameRate(1);
}

function draw() {
  num %= imgs.length;
  image(imgs[num], 0, 0, width, height);
  num++;
}

 

 

7. 마우스를 누르면 이미지 객체 배열에 저장된 이미지가 랜덤한 순서로 출력

// 마우스를 누르면 이미지 객체 배열에 저장된 이미지가 랜덤한 순서로 출력

let imgs = [];
let num = 0;

function preload() {
  // 배열에 이미지 객체를 일괄 저장
  let filenames = ["sample01.jpg", "sample02.jpg", "sample03.jpg"];
  for (let i = 0; i < filenames.length; i++) {
    imgs[i] = loadImage(filenames[i]);
  }
}

function setup() {
  createCanvas(500, 300);
}

function draw() {
  image(imgs[num], 0, 0, width, height);
  fill(255);
  textSize(30);
  text("Press the mouse!", mouseX, mouseY);
}

function mousePressed() {
  num = int(random(0, imgs.length));
  print(num);
}

8. 마우스를 누르면 구름이 하나씩 생성되어 랜덤 이동-1

// 하늘배경에 구름이 하나씩 생성되어 랜덤하게 이동

let img, bg_img;
let clouds = [];

function preload() {
  img = loadImage("cloud1.png");
  bg_img = loadImage("sky.jpg");
}

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

function draw() {
  background(bg_img);
  for (let i = 0; i < clouds.length; i++) {
    let b = clouds[i];
    b.display();
    b.move();
    b.bounce();
  }
  if (clouds.length > 5) {
    clouds.splice(0, 1);
  }
}

function mousePressed() {
  let b = new Cloud(mouseX, mouseY)
  clouds.push(b);
}

// Cloud 클래스 코드

class Cloud {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-2, 2), random(-2, 2));
    this.d = 50;
  }

  display() {
    image(img, this.position.x, this.position.y, this.d, this.d);
  }

  move() {
    this.position.add(this.velocity);
  }

  bounce() {
    // 경계에 부딪힐 때 반사 적용
    if (this.position.x < 0) {
      this.position.x = 0;
      this.velocity.x *= -1;
    }
    if (this.position.x > width) {
      this.position.x = width;
      this.velocity.x *= -1;
    }
    if (this.position.y < 0) {
      this.position.y = 0;
      this.velocity.y *= -1;
    }
    if (this.position.y > height) {
      this.position.y = height;
      this.velocity.y *= -1;
    }
  }
}

9. 마우스를 누르면 구름이 하나씩 생성되어 랜덤 이동-2

// 마우스를 누르면 꽃이 하나씩 생성되어 랜덤 이동2

let img, bg_img;
let clouds = [];

function preload() {
  img = loadImage("cloud1.png");
  bg_img = loadImage("sky.jpg");
}

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

function draw() {
  background(bg_img);
  for (let i = 0; i < clouds.length; i++) {
    let b = clouds[i];
    b.display();
    b.move();
  }
  if (clouds.length > 5) {
    clouds.splice(0, 1);
  }
}

function mousePressed() {
  let b = new Cloud(mouseX, mouseY)
  clouds.push(b);
}

// Cloud 클래스 코드

class Cloud {
  constructor() {
    this.position = createVector(0.0, 0.0);
    this.t = createVector(0.0, 0.5);
    this.d = 50;
  }

  display() {
    image(img, this.position.x, this.position.y, this.d, this.d);
  }

  move() {
    this.position.x = noise(this.t.x) * width;
    this.position.y = noise(this.t.y) * height;
    this.t.x += 0.01;
    this.t.y += 0.01;
  }
}