[프로세싱(Processing) : 고급] 프로세싱과 웹 통합

5. 프로세싱과 웹 통합

5.1 p5.js 소개

p5.js는 프로세싱(Processing)의 웹 버전으로, JavaScript를 기반으로 한 오픈소스 라이브러리입니다. p5.js를 사용하면 웹에서 그래픽, 애니메이션, 인터랙션 등 다양한 작업을 쉽게 구현할 수 있습니다. 또한 웹의 특성을 활용하여 실시간 상호작용, 데이터 시각화, 웹 API 사용 등 다양한 프로젝트를 구축할 수 있습니다.

5.2 웹 기반 프로세싱 프로젝트 구축

p5.js를 사용하여 웹 기반 프로세싱 프로젝트를 구축하려면 HTML, CSS, JavaScript 기본 지식이 필요합니다. p5.js 스케치를 HTML 페이지에 삽입하고, CSS를 사용하여 스타일을 적용할 수 있습니다. 또한 JavaScript를 사용하여 기존 웹 요소와 상호작용하거나 동적으로 콘텐츠를 생성할 수 있습니다.

예제: p5.js를 사용한 웹 페이지에 기본 그래픽 그리기

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
  <script>
    function setup() {
      createCanvas(400, 400);
    }

    function draw() {
      background(220);
      fill(255, 0, 0);
      ellipse(200, 200, 100, 100);
    }
  </script>
</body>
</html>

5.3 웹 API 및 데이터 시각화

웹 API는 서로 다른 소프트웨어 애플리케이션이 정보를 교환할 수 있도록 설계된 인터페이스입니다. p5.js에서는 fetch() 함수를 사용하여 웹 API와 통신할 수 있습니다. 받아온 데이터를 다양한 방법으로 시각화하여 사용자에게 제공할 수 있습니다.

5.4 소켓 통신 및 실시간 상호작용

소켓 통신을 사용하면 웹에서 실시간으로 데이터를 주고받을 수 있습니다. p5.js와 함께 소켓 통신 라이브러리인 Socket.IO를 사용하여 멀티플레이어 게임, 채팅 애플리케이션 등 실시간 상호작용이 필요한 프로젝트를 구축할 수 있습니다.

예제: p5.js와 Socket.IO를 사용한 실시간 채팅 애플리케이션

client.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <script>
    let socket;
    let input;
    let messages = [];

    function setup() {
      createCanvas(400, 400);
      socket = io.connect('http://localhost:3000');
      input = createInput();
      input.position(10, 370);

      socket.on('message', (data) => {
        messages.push(data);
      });
    }

    function keyPressed() {
      if (keyCode === ENTER) {
        const message = input.value();
        socket.emit('message', message);
        input.value('');
      }
    }

    function draw() {
      background(220);
      for (let i = 0; i < messages.length; i++) {
        fill(0);
        text(messages[i], 10, 20 * (i + 1));
      }
    }

  </script>
</body>
</html>

server.js

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('User connected:', socket.id);

  socket.on('message', (data) => {
    console.log('Received:', data);
    io.emit('message', data);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

위 예제는 p5.js와 Socket.IO를 사용하여 실시간 채팅 애플리케이션을 구현한 것입니다. 클라이언트는 HTML 파일에 p5.js 스케치를 작성하여 채팅 메시지를 입력받고 화면에 출력합니다. 서버는 Node.js와 Express, Socket.IO를 사용하여 웹 소켓 서버를 구축하고, 클라이언트와 실시간으로 메시지를 주고받습니다.

프로세싱과 웹 통합에서는 웹 기술을 활용하여 다양한 프로젝트를 구축할 수 있습니다. 웹 기반 프로세싱 프로젝트 구축, 웹 API와 데이터 시각화, 소켓 통신을 사용한 실시간 상호작용 등 다양한 주제를 학습하고, p5.js와 같은 라이브러리를 활용하여 창의적인 웹 프로젝트를 구현할 수 있습니다.

'GD's IT Lectures : 기초부터 시리즈 > 프로세싱(Processing) 기초부터 ~' 카테고리의 다른 글

[프로세싱(Processing) : 고급] 프로젝트 관리 및 협업 (0)	2023.05.01
[프로세싱(Processing) : 고급] 크리에이티브 코딩 심화 (0)	2023.05.01
[프로세싱(Processing) : 고급] 기계 학습 및 인공지능 (0)	2023.05.01
[프로세싱(Processing) : 고급] GPGPU 프로그래밍 (0)	2023.05.01
[프로세싱(Processing) : 고급] 컴퓨터 비전 (0)	2023.05.01