이 보도는 이미 시대에 뒤떨어졌다.

오랜만에 Electron에서 자신의 기사를 보면서 전진해 보면 이미 안 되는 일을 깨닫게 된다.오래전부터 못했던 것 같아서 미안해요.
이 기사를 쓴 것은 2020년 10월 말 일렉트론 V11이었지만 V12부터 대폭 변경된 것 같다. 주로 안전에 대해 엄격하고 안전하지만 이 기사와 같은 방법을 쓰면 안 된다.
이 댓글을 쓴 것은 2021년 11월 1일, 현재 최신 Electron V15로 만든 내용으로 이미 별도로 올렸으니 참고하세요.

개시하다

저는 항상 MacOS Processing을 즐겨 사용합니다.주로 작품 제작 도중에 사용하는 도구로'이미지를 RGB의 수치로 변환해 쉼표로 구분된 텍스트의 도구(=작품의 LED의 색상 변화)','기기와 통신해 그 정보를 OSC의 도구로 변환(=터치 연주 소리)'등이 있다.
이 기사는 Processing에 애플리케이션에 쓰면 무거울 수 있기 때문에 가능한 한 줄일 수 있다는 것이 내가 고려한 노트다.

Processing의 장점과 단점

Processing이 좋아하는 점은 맥OS로 개발해도 Windows와 RaspberryPi로 조작할 수 있다는 것이다.그런데 애플리케이션으로 쓰면 사이즈가 커진다는 게 궁금하다.간단한 기능 도구도 수백조 이상이 있는데 특히 프로그램 설계의 세미나에서 사용하는 도구를 나누어 줄 때 좀 줄이고 싶어요.

p5js+electron의 장단점

이번에 우리는 Processing에서 파생된 자바스크립트의'p5js'와 네트워크 기술로 데스크톱 응용 프로그램을 제작할 수 있는'Electron'으로 응용 프로그램에서 간단한 p5js 프로그램을 써 보았다.그래서 190조 정도 됐어요.보통 p5js는 브라우저에서 실행되지만, Electron은 Chromium (오픈 소스 웹 브라우저) 과 함께 쓸 수 있기 때문에 맥OS든 윈도든 모두 사용할 수 있습니다.대단하다
하지만 일렉트론도 신경 쓰는 부분이 있다.Electron을 사용하면 일반적으로 터미널 등에 지령선을 입력하는데 처음 프로그래밍을 하는 학자에게는 문턱이 높다.응용 프로그램에만 쓰면 되지만 도구가 블랙박스로 변하기 쉬우므로 프로그래밍을 시작하는 사람일수록 내용을 잘 볼 수 있고 이해하기 쉽다고 생각합니다.가까스로 p5js에서 프로그래밍이 재미있어지기 시작했지만 다음 단계는 반드시 지령선이 있어야 한다.그래서 조사해 보니 Electron을 간단하게 사용하는'Electron Fiddle'개발 환경이 마련돼 있었다.

느낌이 좋다

Electron Fiddle을 사용하면 GUI의 "RUN"단추를 사용하여 자신의 프로그램을 실행하고 원본적인 편집 영역도 있어 동작을 확인하면서 개발하기 쉽다.그리고 응용 프로그램으로 쓰기 시작하여 Electron 버전을 선택하거나 GUI를 기반으로 할 수 있습니다.
여기서 궁금한 게 하나 더 있어.p5js의 쓰기 방법에 따라 Electron을 사용하는 예를 찾았습니다. 명령줄의 동작입니다.나는 줄곧 p5js의 쓰기 방법에 따라 Electron Fiddle을 사용할 수 있는지 시험해 보았지만 (index.heml,main.js,package.json,render.js 이 네 개의 파일만 처리할 수 있습니까?).하지만 p5js의 쓰기 방법을 조금만 바꾸면 Electron Fiddle을 사용할 수 있습니다.
따라서 p5js를 조금 업데이트하는 시간이 길지만 데스크톱 프로그램을 만들어 보겠습니다.

응용 프로그램 만들기

Electron Fiddle 다운로드

https://www.electronjs.org/fiddle
이 사이트의 아래에는 최신 버전의 Giithub 링크가 있다.다운로드하여 설치합니다.

Helloworld

설치가 완료되면 Electron Fiddle을 시작합니다.먼저'헬로월드'의 소스를 오픈한다.GUI의 "RUN"버튼을 직접 누르면 Helloworld 애플리케이션이 시작됩니다.이 원본 파일을 다시 쓰면서 자신의 프로그램을 적용합니다.

기본 p5js 준비

Electron Fiddle로 직접 프로그래밍할 수 있지만, p5js에서 문제 없이 실행되는 프로그램이 있는 것이 가장 좋다고 생각합니다.순조롭게 돌아가지 못할 경우'p5js측은 정상적으로 돌아가며 문제가 없음'으로 판단할 수 있습니다.Open Processing 등을 사용하면 간단하다고 생각합니다.

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

좀 고쳐쓰세요, 렌더.js에 쓰다

const p5 = require('p5');

const sketch = function (p) {
  // setup
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.background(100);
  }

  // draw
  p.draw = () => {
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  }
}

const app = new p5(sketch);

Electron Fiddle에서 p5js 프로그램을 "render.js"에 씁니다.그대로 있는 것이 아니라 자바스크립트로 변하는 맞춤법이다.
항상 기억해야 할 것 같으면'const sketch=function(p)'의 내용을 주의하고 p5js에서 사용하는 함수 앞에'p.'의 느낌을 더해라.'setup'함수와'draw'함수의 쓰기 방법도 주의해야 한다.

RUN 버튼으로 실행

RUN 버튼을 사용하여 프로그램을 실행하면 창이 열립니다.기본적으로 소스 파일을 편집한 후 RUN으로 확인한 왕복 작업입니다.MacOS의 경우 이 창을 닫고 앱이 끝난 줄 알더라도 뒷면에서 시작하는 상태가 된다는 점에 유의해야 한다.MacOS의 표준이라고 하는데, 창을 닫으면 앱이 숨겨지고, Dock 아이콘을 클릭하면 이 앱의 창이 부활하는 것은 자연스럽다.따라서'STOP'버튼(아까까지 RUN 버튼이었던 곳)과'명령+Q'단축키 등으로 끝내는 게 좋다.

index.버전 편집

이렇게 되면'Helloworld'라는 문자가 나온다.이것은 "index.}"에 표시되며 삭제됩니다.

p5js 응용 프로그램 완성

이렇게 하면 p5js 프로그램을 조금만 고치면 데스크톱 프로그램을 완성할 수 있다.

프로그램 작성 완료

Electron에서 응용 프로그램에 패키지를 씁니다.메뉴에서 "Tasks"> "Package Fiddles..."응용 프로그램을 내보냅니다.

사이트 축소판 그림

electron과, p5js osc 통신 프로그램의 해설 애니메이션
https://www.youtube.com/watch?v=XDbUcfOO5eY
electron과 p5js의 쓰기 방법에 따라 명령행을 통해 개발한 템플릿을 입력합니다
https://github.com/garciadelcastillo/p5js-electron-templates