테크놀로지 마법학교를 클리어한 사람을 위한 환경 구축 절차

6107 단어 processing테크놀로지 마법 학교
테크놀로지 마법학교 졸업생입니까?

일단 모르는 분들을 위해 설명해 두면 온라인으로 배울 수 있는 디즈니의 프로그래밍 교재입니다.
판타지 세계에서 놀면서,
· 미디어 아트
· 웹 디자인
· 게임
의 3 종류의 스킬이 몸에 붙습니다.
(본격적인 수수께끼 풀기나, 엽서의 컬렉션도 즐길 수 있습니다!)
htps //w w. ch의 ぉ 기아 s 쵸오 f 마기 c. jp/

저도 즐겁게 진행해 가서, 무사 졸업했습니다만, 라고 있는 것을 깨달았습니다.
『그 코딩하는 틀이 없으면 자신의 작품을 만들 수 없다...』


(테크놀로지 마법 학교의 레슨 화면에서 인용)

브라우저에 코드를 쓰는 것만으로, 깨끗한 영상이나 즐거운 게임이나 쉽게 표시 할 수 있기 때문에, 완전히이 환경에 달려있었습니다.

자신의 PC에서도 자유롭게 코드를 쓸 수 있게 되고 싶다!
그래서. 환경 구축 순서를 정리해 보았습니다.
(Mac에서 확인 중)

미디어 아트



Processing이라는, 아트를 위한 프로그래밍 언어를 사용하고 있는 것 같습니다.

우선은 아래 사이트의 'Download Processing'에서 자신의 PC에 맞는 버전을 다운로드합니다.
htps : // p 로세신 g. rg/

시작하면 sketch라는 파일이 새로 작성됩니다.

초기 설정에서는 Java로 되어 있었습니다만, 테크놀로지의 코드와 어쩐지 가까운 것 같은 p5.js로 변경합니다. (그렇게 하면 빈 함수를 2개 할 수 있습니다.)


그리고 함수 안에 배운 코드를 씁시다.
function setup() {
  createCanvas(windowWidth, windowHeight);
}


function draw() {
  background(0, 0, 0, 20);

  noStroke();
  fill(255, mouseX/4, mouseY/4);
  quad(mouseX, mouseY+60+30*sqrt(2), mouseX-60-30*sqrt(2), mouseY-60+30*sqrt(2), mouseX, mouseY-60,mouseX+60+30*sqrt(2), mouseY-60+30*sqrt(2));
  ellipse(mouseX + 60, mouseY - 60, 120);
  ellipse(mouseX - 60, mouseY - 60, 120);
}

마지막으로 실행 버튼 (왼쪽 상단)을 누르면,
브라우저가 열리고 아트가 표시됩니다.

레슨에서는 미키였지만, 하트형으로 어레인지하고 있습니다. 귀여운.


웹 디자인



웹 서버로서 이번에는 Apache를 설치하고 로컬로 실행합니다.
다음 명령 실행brew install httpd
/usr/local/var/www 에 http 파일과 css 파일, 이미지를 넣습니다.
(이쪽도 레슨을 기억하고 좋아하게 변경합시다)

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="cat.css">
  </head>
  <body>
    <div>
      <h1>White Cat</h1>
      <h2>おしゃれな猫の雑貨屋さん</h2>
      <img src="cat.png">
      <p>かわいい白猫のマリーがあなたを待っています</p>
    </div>
  </body>
</html>

cat.css
h1{
  color: rgb(0, 180, 255);
  font-size: 80px;
  font-family: serif;
}

h2{
  color: rgb(255, 180, 180);
}

p{
  color: rgb(100, 100, 100);
  font-size: 24px;
}

div{
  text-align: center;
}

img{
  width: 220px;
  border-radius: 50%;
}

/usr/local/etc/httpd/httpd.conf에 다음을 추가하고,ServerName localhost:8080
다음 명령으로 서버를 시작합니다.sudo apachectl start
브라우저에서 localhost:8080으로 이동하면 페이지가 표시됩니다.
흰 고양이의 실루엣을 옅은 색과 맞추어 보았습니다.

멈출 때는sudo apachectl stop입니다.

게임



쓰기 중입니다.
Pcessing에서 openCV를 사용하여 얼굴 이외를 감지
VSCode에서 Processing 프로젝트를 하나의 작업 공간에서 관리 할 수 ​​있도록 tasks.json을 고안 한 이야기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage