UI(User Interface) 별로 그려지는 붓 바꾸기

User Interface)

일반적으로, 작은 도구들의 사용에 대한 것 부터 큰 기계시스템의 제어와 처리를 하는 것까지 다양한 개념들을 포괄한다.
이 용어는 주로 사람(사용자)과 컴퓨터시스템 사이의 의사소통 매개를 의미한다.

주변의 터치스크린, 마우스 등으로 UI를 물리적으로 볼 수 있다.

 

개요)

이번에는 키보드, 마우스 등의 UI로 입력받은 신호를 바탕으로

그려지는 붓의 모양 및 재질을 바꿔게끔 그려지도록 코딩해보았다.

추가적으로 마우스의 x축, y축에 따라 그려지는 크기나 속성을 바꾸어 보기도 했다.

 

구상)

위 화살표 키          ->     빛을 표현한 흰색 큰원에 작은 노란 원을 겹친 모양의 붓 

마우스 클릭           ->     투명도가 조금 있는 파란색 원 모양의 붓, y축에 따라 반지름이 커짐

아무것도 없을 때    ->     불투명한 초록색 긴 타원 모양의 붓, y축에 따라 두께가 커짐.

 

코드)

function setup() {
  createCanvas(800, 500);
  background(0);
}

function draw() {
  

  if (mouseIsPressed) { //마우스 눌렸을때
    fill(100, 100, 225,100);
    noStroke();
    ellipse(mouseX, mouseY, mouseY/5);
  } 
  else if (keyCode == UP_ARROW) { // 위 화살표 눌렀을때 
    noStroke();
    fill(220, 220, 220, 30);
    ellipse(mouseX, mouseY, 50, 50);
    fill(210, 210, 20, 80);
    ellipse(mouseX + 15, mouseY - 15, 30, 30);
    ellipse(mouseX-15 , mouseY - 15, 10, 30);
  } 
  else {
    stroke(100, 150, 30); //아무것도 하지 않을때
    strokeWeight(mouseY/10);
    line(mouseX, mouseY, mouseX - 20, mouseY);
  }
}

 

https://editor.p5js.org/emilyroh/sketches/ltzOaHpcK

p5.js Web Editor