p5.js 인스턴스 모드 사용하여 일부 setup/draw function만 실행이 안 되는 경우가 있을 수 있나요?

Question

안녕하세요디자인 전공생으로 이번에 처음으로 자바 스크립트를 이용해 웹페이지를 꾸미고 있습니다때문에 다른 분들에 비해 부족한 실력과 질문을 드릴 거라 생각하지만 그럼에도 너무 간절하여 지푸라기 잡는 심정으로 질문 드립니다저희 조가 만드려고 하는 웹사이트는 단일 p5.js 위에 인스턴스 모드로 여러 개의 스케치를 생성하여스케치를 드래그하여 위치를 옮길 수 있고스케치 내에서는 다양한 인터랙션 아트를 즐길 수 있는 단일 페이지입니다팝업창 모양을 생각하시면 좋을 것 같아요때문에 그렇게 여러 스케치를 생성하던 중,유독 한 스케치의 function setup/draw가 전혀 실행되지 않아(이쪽에 써 놓은 확인용 콘솔 로그가 전혀 출력되지 않습니다)어떤 이유인지 여쭙고자 질문 글을 씁니다스케치 전체가 틀린 게 아니냐고 묻기엔 소스를 불러오기 위해 적어 놓은 function preload는 또 실행이 잘 되구요너무 코드가 많고 복잡해서 그런 것이 아니냐 라고 하기엔 그 뒤에 코드로 적힌 다른 스케치는 정상적으로 작동합니다 아래는 작동 안 되는 부분을 포함 코드 일부입니다많이 설명이 어리숙하고 부족하다고 생각하지만 죄송한 마음 무릅쓰고 글 올립니다감사합니다 :-) new p5(iHeart_sk); //**하트 팝업 스케치 //****이 부분은 draw와 setup 부분이 실행이 안되는데 let pHeart_sk = function (sketch) { let pHeart_canvas; let paperX = 50; let paperY = 50; //아이콘 하트의 컬러 코드 //let heart_color; let pHeart_paper; sketch.preload = function () { console.log("ok3"); pHeart_paper = sketch.loadImage("assets/Img03_V2coloringCanvas.png"); sketch.soundFormats("mp3"); sHeart = sketch.loadSound("music/Kung_1.mp3"); }; sketch.setup = function () { console.log("ok4"); pHeart_canvas = sketch.createCanvas(322, 372); pHeart_canvas.position(paperX, paperY); pHeart_canvas.style("z-index", 4); pHeart_canvas.background(20); sketch.image(pHeart_paper, 0, 0, 322, 272); //pHeart_canvas.hide(); }; sketch.draw = function () { sketch.pHeart_pressed(); console.log("ok"); }; sketch.pHeart_pressed = function () { if (iHeart_pressed) { pHeart_canvas.show(); sHeart.play(); console.log("pHeart_canvas show, sHeart play"); } } sketch.mousePressed = function () { if ( sketch.mouseX > 0 && sketch.mouseX < pHeart_paper.width && sketch.mouseY > 0 && sketch.mouseY < pHeart_paper.height ) { pHeart_pressed = true; console.log("pHeart pressed"); } }; }; new p5(pHeart_sk); //**문자 아이콘 스케치 //****이 부분은 됩니다! let iMunja_sk = function (sketch) { let pMunja_canvas; let imgIMunja = []; let munja_bg; sketch.preload = function () { imgIMunja[0] = sketch.loadImage("assets/Img04_offMunja.png"); imgIMunja[1] = sketch.loadImage("assets/Img04_onMunja.png"); sketch.soundFormats("mp3"); sMunja = sketch.loadSound("music/munja_1.mp3"); }; sketch.setup = function () { iMunja_canvas = sketch.createCanvas(327, 284); iMunja_canvas.position(200, 560); iMunja_canvas.style("z-index", 4); iMunja_canvas.background(30); iMunja_canvas.hide(); sketch.image(imgIMunja[0], 0, 0, 327, 284); }; sketch.draw = function () { //console.log("ok2"); if (sIntro_over) { iMunja_canvas.show(); } if (iMunja_pressed) { sMunja.play(); iMunja_pressed = false; console.log("iMunja pressed"); } }; sketch.mousePressed = function () { if ( sIntro_over && sketch.mouseX > 0 && sketch.mouseY > 0 && sketch.mouseX < 327 && sketch.mouseY < 284 ) { iMunja_pressed = true; } }; }; new p5(iMunja_sk);

p5.js 인스턴스 모드 사용하여 일부 setup/draw function만 실행이 안 되는 경우가 있을 수 있나요?

0개의 답변

#p5js 목록