processing.js html 설정 (종료)

괜찮습니다. 이것이 내가 해낸 첫 번째 시간 중 하나이기 때문에 아마도 간단한 문제 일 것입니다. "blobby.js"에 객체를 정의하고 만드는 작은 프로그램을 설정하려고합니다. 그러면 html 파일의 스크립트 태그 안에 setup과 draw이 있습니다. 나는 당신이 볼 수 있듯이, 내가 HTML을 참조한 처리에서 이것을하려고 노력하고있다. 내 문제는 비록 배경이 나타나더라도 random이 정의되지 않은 콘솔에 오류가 있습니다. 여기 내 코드는 : 너무 많은processing.js html 설정 (종료)

var blobby = function(X, Y, S) { 
    this.x = X; 
    this.y = Y; 
    this.s = S; 
}; 

console.log("Hey, blobby is here!"); 

blobby.prototype.show = function(){ 
    //Blobbiness and plasma membrane 
    var perlin = 0; 
    pushMatrix(); 
    translate(this.x, this.y); 
    strokeWeight(4); 
    stroke(20, 210, 60, 170); 
    fill(255, 0, 0); 
    beginShape(); 
    for (var a = 0; a < TWO_PI; a+=0.1){ 
     var d = map(noise(perlin, frameCount/100), 0, 1, this.s-10, this.s); 
     var x = sin(a)*d; 
     var y = cos(a)*d; 
     vertex(x, y); 
     perlin+=0.1; 
    } 

    endShape(CLOSE); 
    popMatrix(); 
}; 

var cells = []; 
for (var i = 0; i < 1; i++) { 
    cells.push(new blobby(random(100, 500), random(100, 500), random(70, 100))); 
}

감사 :

또한

<html> 
<head> 
    <title>PATHOGEN</title> 
</head> 
<body> 
    <script language="javascript" type="text/javascript" src="processing.min.js"></script> 
     <script src="blobby.js"></script> 
     <script type="text/processing" data-processing-target="mycanvas"> 
      void setup() 
      { 
       size(600,600); 
       PFont fontA = loadFont("sans-serif"); 
       textFont(fontA, 14); 
      } 
      console.log(cells); 
      void draw(){ 
       background(225, 1, 1); 
      for (var i = 0; i < cells.length; i++) { 
       cells[i].show(); 
      } 
      } 
     </script> 
    <canvas id="mycanvas"></canvas> 
</body> 
</html>

, 여기 blobby.js의 코드입니다! 귀하의 경우 임의에서

출처

2016-12-16 Caleb Bertrand

는 호출하는 기능이지만, 해당 파일에 또는 index.html을에 존재하는 스크립트 태그에 어디을 정의되어 있지 않습니다. 또한 Math.random을 사용하여 임의의 숫자를 얻으려고한다고 생각합니다. 따라서 임의 번호에서 Math.random으로 변경하면 문제가 해결됩니다.

출처

2016-12-16 21:58:50

내가 알 수있는 한, random 함수는 현재 작동하지만 pushMatrix가 정의되어 있지 않다는 것은 아닙니다. 나는 [pushMatrix] (http://processingjs.org/reference/pushMatrix_/)가 processing.js에있는 함수라는 것을 알고 있으므로 내 문제는 아마도 처리 라이브러리를 설정하지 않았다는 것입니다. 내 html을 설정하는 데 문제가 있습니까? –

index.html의 모든 자바 스크립트 코드를 blobby.js로 옮겨보십시오. –

또한 원본 교차 요청 오류로 인해이 기능이 작동하지 않을 수 있습니다. 유일한 해결책은 프로젝트를 서버에서 실행하거나 교차 출처 요청 오류가 발생하지 않는 forefox 또는 safari에서 프로젝트를 여는 것입니다. –

답변

관련 문제