p5.js 함수 집합 파트.11 push(), pop()

이 글은 Qita p5js advent 달력 16일차 글입니다.
이것은 무엇이냐
p5.js가 준비한 함수에 대한 이해를 깊이 있게 하는 보도입니다.
이번에는push()와 pop()에 관한 것입니다.
push 및 pop
shape 등의 설정을 저장하기 위해push를 이용하여pop에서 복원한다.
나는 그렇게 사용할 것이다.
참고 자료
push () 함수는 현재 그림 스타일 설정과 변환을 저장하고 pop () 함수는 이 설정을 복원합니다.이 함수들은 항상 함께 사용되므로 주의하십시오.이러한 함수를 사용하여 스타일 및 변환 설정을 수정하고 원래 설정으로 복원할 수 있습니다.push () 로 새 상태를 시작하면 현재 스타일과 형식 정보를 기반으로 구축됩니다.push () 와 pop () 함수를 삽입하면 더 많은 제어를 할 수 있습니다.(프레젠테이션은 두 번째 예제를 참조하십시오.)
push () 에 현재 변형 상태나 다음 함수에 의해 제어된 스타일 설정과 관련된 정보를 저장합니다.fill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode() 등이다.textAlign(), textFont(), textSize(), textLeading(), 응용 Matrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed()의 항목입니다.
WEBGL 모드에서 추가 스타일 설정을 저장합니다.이것들은 setCamera (),ambientLight (),directional Light (),pointLight (),texture (),specularMaterial (),shininess (),normalMaterial (),shader () 함수로 제어됩니다.
push()와 pop()에 저장되며 호출 가능한 정보는 상기 함수에만 한정됩니다.
shape 스타일과 관련해서는 WEBGL 모드에 3D 객체에 사용되는 함수도 추가되었습니다.
Type

push(): void;
pop(): void;

설정을 저장합니다. 호출만 하기 때문에 제출한 매개 변수도, 되돌아오는 값도 없습니다.
언제 쓸 수 있을까요?
현재 그림 스타일 설정과 변환을 저장하고 pop 함수로 이 설정을 복원합니다
이런 행동은 내가 좀 오해한 것 같아서 총괄해 보자.
(push () 이후의 정보를 꼭 저장하고 싶습니다)
아래의 코드를 써서 세 점을 만들어 보세요.

function setup(){
  createCanvas(200, 200);
  background(100);
  noStroke();
}

function draw() {
  stroke('red')
  strokeWeight(10)
  point(10, 10)
  // これまでの設定（赤色でストローク幅10）を保存
  push()
  stroke('blue')
  strokeWeight(20)
  point(30, 30)
  // 保存していた設定が蘇る
  pop()
  point(50, 50)
}

첫 번째 원stroke('red')이 효과가 있어서 빨간색으로 물들였습니다.
그런 다음 push()와 pop() 사이에 덮어쓰려는 정보를 씁니다.pop() 이후stroke('red')와 strokeWeight(10)가 다시 효력이 발생하기 때문에 첫 번째 원과 세 번째 원은 같다.
이렇게 한 부분만 예외로 하고 다른 것은 같은 스타일을 사용하고 싶을 때 사용할 수 있다.
그나저나 끼워 넣어도 돼요. 두 번push()를 하면 팝(pop)을 두 번 하면 원상태로 돌아갈 수 있어요.
참고 자료
p5.js reference | push()
p5.js reference | pop()