p5.js에서 무언가를 만들 때 background ()의 행동으로 빠져있었습니다.

가끔 만지지만 전혀 익숙하지 않은 p5.js htp // p5js. rg/



이런 느낌의 것을 만들었습니다.

클릭하면 양쪽 선이 모여 가운데에 오면 화면의 색이 바뀝니다.

클릭하지 않은 상태라면 선이 밖으로 도망합니다.

setup() 및 draw() 및 background()

그래서, 무엇이 문제인가 하면.

setup()과 draw()와 background()의 동작을 이해하지 못했습니다.

p5에서는 backgroung() 로 배경색을 지정해 줍니다.

예를 들어,

app.js

function setup() {
  createCanvas(800, 400);
  background(0);//背景黒
}

이런 식으로 하면 배경 검은 캔버스가 표시됩니다.
우선은 문제 없습니다.

그 검은 화면에 이런 느낌으로 도형을 움직일 경우 어떻게 할까

background()를 알지 못한 예

이 흐름으로 만들면 이런 느낌이 될 것 같네요.

app.js

var x,y;

function setup() {
  createCanvas(800, 400);
  stroke(255); //線を白く
  background(0);//背景黒
  y = height * 0.5; //画面中央
  x = 0;
}

function draw(){
    x++;
    rect(x, y, 10, 1);
}

이렇게하면 이렇게됩니다.



(이것은 이것으로, 이런 거동을 시키고 싶은 경우에는 좋을지도 모릅니다만) 의도하는 거동과 달랐습니다.

분위기에서 예상은 붙습니다만, 프레임의 갱신이 되지 않고 프레임마다 덮어쓰고 있는 것 같네요. 이전 프레임으로 그린 ​​내용의 클리어는 어디서 하는 거야...라는 곳이군요.

문서에 따르면 클리어가 background ()에서 수행되는 것 같습니다.

이것은 방법 이름을 이해하기 어렵다고 느꼈습니다.
문서를 제대로 읽지 않았던 내가 나쁘지만 땀

Description
The background() function sets the color used for the background of the p5.js canvas. The default background is light gray. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

알겠습니다.
재기록이 발생하지 않는 경우는 최초의 setup()로 1회만 부르는 방법으로 좋지만,
기본적으로 background()는 draw() 안에서 호출합시다는 것.

그래서 이렇게 됩니다.

app.js

var x,y;

function setup() {
  createCanvas(800, 400);
  stroke(255); //線を白く
  y = height * 0.5; //画面中央
  x = 0;
}

function draw(){
  background(0);//背景黒
  x++;
  rect(x, y, 10, 1);
}

일단 완성

라는 느낌으로 거동에 헛된 느꼈던 느낌이었습니다만 히토마즈의 완성.

app.js

var CW = 1000,
    CH = 400;
var sceneFlag = 0,
    clickFlag = 0;
var bgColor = 0,
    stColor = 255;
var y,x1,x2;
var speed = 3;

function setup() {
  createCanvas(CW, CH);// Create object
  y = height * 0.5; //画面中央に
  x1 = 0;
  x2 = width;
}

function draw() {
  background(bgColor);//背景を黒に
  stroke(stColor); //線を消す

  if(clickFlag === 0){
    //クリックしていない場合
    if(x1 > 0) x1 = x1 - speed;
    if(x2 <= width) x2 = x2 + speed;
  }else{
    //クリック長押し中
    x1 = x1 + speed;
    x2 = x2 - speed;
    if(sceneFlag === 0 && x2 <= CW/2){
      sceneFlag = 1; //一度切り
      bgColor = color('magenta');
      stColor = bgColor;
    }
  }
  rect(0, y, x1, 1);
  rect(x2, y, width, 1);
}

//クリック長押し処理
var loop;
var pressLoop = function(){
  clickFlag = 1; //クリック中
};

function mousePressed() {
  loop = setInterval(pressLoop,16);
}

function mouseReleased(){
  clearInterval(loop);
  clickFlag = 0; //クリックしていない
}