JavaScript에서 Processing의 loadImage 사용

Question

Processing API을 사용하여 이미지를 HTML 캔버스에 그립니다.이 코드는 나중에 코드에서 사용할 수 있습니다. 내가 가지고있는 JavaScript 코드는 다음과 같습니다.

var sketchProc = function(processingInstance) { 
    with (processingInstance) { 

    /* @pjs preload="images/hot-air.png" */ 

    size(innerWidth, innerHeight); 
    var testImage = loadImage("images/hot-air.png"); 

    draw = function() { 
     image(testImage, 0, 0, 500, 500); 
    } 
    } 
} 

var canvas = document.getElementById("canvas"); 
var processingInstance = new Processing(canvas, sketchProc); 

콘솔에 이미지의 크기가 0x0 인 것으로 표시됩니다. Processing's directives으로로드를 시도했지만 여전히 이미지 크기 0x0을 얻고 있습니다. 그러나 draw 루프 안에 loadImage()을 호출하면 프로그램이 이미지의 크기를 512x512로 인식합니다.

무승부 루프 내에서 loadImage()을 계속 호출하고 싶지 않습니다. 이미지가 드로 루프 외부로 올바르게로드되는지 확인하려면 어떻게해야합니까?

최소한의 작동 예제 here을 찾을 수 있습니다.

Answer 1

먼저, MCVE을 보내 주셔서 감사합니다.

어떤 이유에서든 JavaScript-only Processing.js code을 쓸 때 사전로드 지시문과 loadImage() 함수 자체가 작동하지 않는다고 생각합니다. Processing.js의 다양한 에디터와 버전에서 이것을 테스트 해 보았습니다.

따라서 loadImage() 함수를 사용하는 경우 pure Processing code을 사용해야합니다. Here은 당신이 할 거라고 방법을 보여줍니다하는 CodePen입니다 :

이

<script type="application/processing"> 
    /* @pjs preload="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; */ 
    PImage testImage; 

    void setup(){ 
     size(500, 500); 
     testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"); 
     println(testImage.height); 
    } 

    void draw() { 
     background(100); 
     image(testImage, 0, 0, 250, 250); 
    } 
</script> 
<canvas> </canvas> 

그냥 비교를 위해, here 자바 스크립트 전용 구문을 사용하여 동일한 코드입니다. 이것은 작동하지 않습니다.

한 걸음 뒤로 물러나십시오. 자바 스크립트 사용에 익숙하다면 왜 Processing.js를 사용하고 있습니까? Processing.js는 자동으로 JavaScript로 변환 된 Java 구문을 작성하려는 Processing (Java) 개발자를 위해 설계되었습니다. 이 시점에서 Processing.js는 꽤 오래되었고 더 이상 유지 관리되지 않습니다.

대신 P5.js을 사용하는 것이 좋습니다. P5.js를 사용하면 JavaScript 구문을 작성하여 웹 우선 처리 스케치를 만들 수 있습니다. P5.js는 훨씬 더 새롭고 여전히 활발하게 개발 중입니다.

var testImage; 

function preload(){ 
    testImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"); 
} 

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

function draw() { 
    background(100); 
    image(testImage, 0, 0, 250, 250); 
} 

뻔뻔 자기 홍보 :

여기 P5.js에서 동일한 코드 내가 처리, Processing.js 및 here 사용할 수 P5.js의 차이점에 대한 자습서를 썼다.