나의 집 코딩하기

아트코딩으로 구현한 나의 집

내가 너무 익숙한 장소 우리 집,,,

그 집을 벗어나 미지의 세계로 떠나고자하는 모습을 코딩으로 구현해 보았다.

코딩 툴은 p5.js를 사용했고 기본 도형인 사각형, 원, 선을 사용해 코딩했다.

코딩하는 내내 도형의 위치를 일일이 때려맞추듯이 코딩하는 바람에 힘들었다.....

 

그래서!!

p5.js에 마우스의 위치의 좌푯값이 콘솔창에 뜨도록 하는 기능을 추가하고자

 if(mouseIsPressed){
  console.log(mouseX + ','+ mouseY);

}

이 코드를 통해 마우스를 클릭하면 마우스의 좌푯값이 콘솔창에 출력되도록 했다.

 

 

전체코드) 

 

function setup() {
  createCanvas(800, 800);
  
}

function draw() { 
  background(0,0,0);
  noStroke();
  
  fill(255);
  rect(450,450,300,300); //작은하트
  
  fill(0,0,0);
  rect(450,450,150,150); //작은 그림자
  
  fill(200,100,100);
  quad(500,450,450,500,650,700,700,650); // 통로
  
  fill(255);
  rect(550,600,200,100); //작은 
  
  fill(255);
  rect(600,550,100,200); //작은
  
  fill(200,0,0);
  rect(50,50,450,450); //큰 하트
  
  
  fill(0,0,0);
  rect(0,0,250,250); //큰 그림자
  
  
  fill(200,0,0);
  rect(420.5,420.5,80,80); // 큰 덮개
  
  stroke(0);
  fill(130,200,700);
  rect(60,260,100,230); // 방 1
  
  fill(200,200,500);
  rect(185,280,130); // 방 2
  
  fill(550,200,100);
  rect(200,430,230,45); // 방 3
  
  fill(30,190,100);
  rect(300,60,130,70); // 방 4
  
  fill(250,100,0);
  rect(270,150,100); // 방 5
  
  fill(220,130,200);
  rect(390,200,100,200); // 방 6
  
  noStroke(0);
  fill(250,200,0);
  ellipse(680,580,130,200); //방 7
  
  fill(2,2,200);
  triangle(680,550,480,690, 730,720); // 방 8
  
    fill(300,0,0)
  quad(460,730,490,610,650,700,650,740); // 방 9
  
  fill(220)
  stroke(0);
  quad(53,420,53,370,130,340,130,470); // 문
  fill(150,10,10);
  ellipse(80,420,7,14); //문고리
  
  // 책
  fill(0);
  arc(220, 340, 40, 20, PI,0, PIE);
  arc(260, 340, 40, 20, PI,0, PIE);
  rect(200,340,80,50);
  fill(255);
  arc(220, 390, 40, 20, PI,0, PIE);
  arc(260, 390, 40, 20, PI,0, PIE);
  stroke(255);
  line(240,390,240,335);
  
  //침대
  stroke(0);
  fill(0);
  rect(465,250,20,130);
  rect(440,235,45,10);
  //배개
  fill(220);
  arc(460, 270, 20, 25, HALF_PI,0-HALF_PI, PIE);
  //이불
  fill(0);
  arc(460, 330, 40, 89, HALF_PI,0-HALF_PI, PIE);

  //변기
  stroke(225);
  ellipse(310,220,45,30);
  ellipse(281,202,13,55);
  stroke(0);
  fill(225);
  ellipse(310,220,22,13);
  //휴지
  rect(310,180,20,15)
  
  //컵
  fill(0);
  stroke(0);
  ellipse(370,90,20,10);
  ellipse(370,110,20,10);
  rect(360,90,19)
  fill(225);
  ellipse(370,90,18,8);
  //컵 손잡이
  fill(0);
  arc(380,100, 15, 15, 0-HALF_PI,HALF_PI, PIE);
  fill(30,190,100);
  arc(380,100, 10, 10, 0-HALF_PI,HALF_PI, PIE);
 
  //TV
  fill(0);
  rect(410,435,8,30);
  rect(420,442,5,20);
  //소파
  arc(205,447, 15, 25, 0-HALF_PI,HALF_PI, PIE);
  arc(225,465, 25, 25, PI,0, PIE);
  rect(212.5,465,25,6)
  
  //액자,그림
  rect(325,436,21,10);
  fill(225);
  rect(326,437,19,8);
  quad(329,439,336,443,342,439,336,441)
  
  //신발
  fill(0);
  stroke(255);
  arc(87, 300, 40, 20, PI,0, PIE);
  arc(87, 310, 40, 20, PI,0, PIE);
  arc(100, 333, 45, 30, PI,0, PIE);
  arc(90, 343, 45, 30, PI,0, PIE);
  arc(135, 310, 30, 20, PI,0, PIE);
  arc(135,290, 30, 20, PI,0, PIE);
  
  // 내 신발
  arc(545, 525, 30, 20, 120,180, PIE);
  arc(550, 550, 30, 20, 120,180, PIE);

 

//마우스 좌푯값 출력 
   if(mouseIsPressed){
  console.log(mouseX + ','+ mouseY);

  }
  
}

 

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

p5.js Web Editor