p5.js && ecmascript6 notation

Question

p5.js 함수를 ECMAScript 표기법을 사용하여 클래스 내부에서 사용하고자합니다.

이 코드를 수정하는 방법은 무엇입니까?

class Sketch { 
    constructor(p, params) { 
     // generate vars use in class with object 
     if (typeof params !== 'undefined') { 
      for (let key in params) this[key] = params[key]; 
     } 
     // p5.js object 
     this.p = p; 
    } 
    // p5.js setup method 
    setup() { 
     this.p.createCanvas(); 
    } 
    // p5.js draw method 
    draw() { 
    } 
} 
sketch = new Sketch(p5,{}); 

오류 : 또한

const myp5 = new p5(p => { 
    p.setup =() => { 
     p.createCanvas(); 
    }; 
    … 
}); 

참조 Global and instance mode 튜토리얼 :

this.p.createCanvas is not a function

Answer 1

The docs는 p5를 인스턴스화하고 p에 방법을 생성하여 initialiser 기능을 통과해야한다고 말한다.

그러나 이것은 정말로 이상한 구성입니다. 이 문서화 아니에요 있지만, ES6에는 p5를 서브 클래 싱 할 수 있어야한다 :

class Sketch extends p5 { 
    constructor(params) { 
     super(p => { 
      // do any setup in here that needs to happen before the sketch starts 
      // (e.g. create event handlers) 
      // `p` refers to the instance that becomes `this` after the super() call 
      // so for example 
      if (typeof params == 'object' && params != null) 
       for (let key in params) 
        p[key] = params[key]; 
     }); 

     // `this` itself is the p5.js object 
    } 
    // p5.js setup method 
    setup() { 
     this.createCanvas(); 
    } 
    // p5.js draw method 
    draw() { 
    } 
} 
const myp5 = new Sketch({}); 

을 주목 p5 생성자이 메소드를 호출 할 것이다; myp5.setup() 자신을 할 필요가 없습니다.

Answer 2

이 문제로 고생하고 있습니다.

import p5 from 'p5'; 

const MIN_RAD = 150; 
const MAX_RAD = 250; 
const ITEM_COLOR = 'red'; 
const BG = 'rgba(50,50,50,.05)'; 
const VELOCITY = 1; 

export default class Sketch extends p5 { 

    constructor(sketch =()=>{}, node = false, sync = false) { 
     super(sketch, node, sync); 
     console.log('Sketch [this:%o]', this); 

     this.setup = this.setup.bind(this); 
     this.draw = this.draw.bind(this); 
     this.render = this.render.bind(this); 
     this.increment = this.increment.bind(this); 
     this.windowResized = this.windowResized.bind(this); 
    } 

    setup() { 
     console.log('setup', this.windowWidth, this.windowHeight); 
     this.createCanvas(this.windowWidth, this.windowHeight, p5.WEBGL); 

     this.bg = this.color(BG); 
     this.itemColor = this.color(ITEM_COLOR); 
     this.rad = MIN_RAD; 
     this.grow = true; 
     this.frame = 0; 
    } 

    draw() { 
     this.increment(); 
     this.render(); 
    } 

    render() { 
     let x = this.windowWidth/2; 
     let y = this.windowHeight/2; 

     this.background(this.bg); 
     this.fill(this.itemColor); 
     this.stroke(this.itemColor); 
     this.ellipse(x, y, this.rad, this.rad); 
    } 

    increment() { 
     this.rad = this.grow ? this.rad + VELOCITY : this.rad - VELOCITY; 

     if (this.rad > MAX_RAD) { 
      this.grow = false; 
     }; 

     if (this.rad < MIN_RAD) { 
      this.grow = true; 
     } 

     this.frame++; 
    } 

    // EVENTS 

    windowResized() { 
     console.log('windowResized', this.windowWidth, this.windowHeight); 
     this.resizeCanvas(this.windowWidth, this.windowHeight); 
    } 
} 

이 클래스는 일반적으로 수입, 생성자를 호출하여 인스턴스화 할 수 있습니다 내가 좀 너무 좋아 P5의 상속을 구현할 수 있었다. 소스 코드 약간을 파고

import Sketch from './sketch'; 
... 
const sketch = new Sketch(); 

, P5는 window에의 용기를 덤프 위치를 자동 마술, 소위 '글로벌'모드를 활성화 두 가지 중요한 상태가 (피해야합니다). sketch 인수

p5/Core는 내부 _isGlobal 소품을 설정하는 이러한 조건을 사용 falsey 경우 init.js#L21에서

• 1) draw 및 setup 경우 모두, core.js#L496에 window
• 2)에 존재 문맥을 window 또는 this으로 정의하는 데 사용되며 조건에 따라 전체적으로이 기능을 수행합니다. 예 : core.js#L271

  선택한 대답으로 확장하면됩니다 (빈 개체를 전달할 때 오류가 발생하는 경우를 제외하고).

  솔직히, 문서화 된 구성 방법 모두 만족스럽지 않습니다. 이것은 개선되었지만 범위를 관리하기 위해 추가 작업을해야합니다.