본문 바로가기

전체 글133

[시각화 p5.js] 도형 - circle(), WEBGL [시각화 p5.js] 도형 - circle 그리기 function setup() { createCanvas(100, 100); background(200); circle(50, 50, 25); describe('A white circle with black outline in the middle of a gray canvas.');function setup() { createCanvas(100, 100, WEBGL); background(200); circle(0, 0, 25);} WEBGLweb graphic labrary. 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API https://p5js.org/ko/reference/p5/circle/ circ.. 2025. 3. 11.
[시각화 p5.js] 점과 선 그리기 점과 선 그리기// 점과 선 그리기function setup() { createCanvas(300, 300); // 캔버스 크기 pixel background(200); // 배경색 strokeWeight(2); // 점.선 굵기 (픽셀) point(150, 120); // x,y좌표 point(150, 180); // x,y좌표 line(0, 0, 300, 300); // 좌표 (0,0)에서 (300,300)까지 선 그리기 line(300, 0, 0, 300); // 좌표 (300,0)에서 (0,300)까지 선 그리기}  # 코드실행 순서위에서 아래로 순차적으로 실행됨 2025. 3. 11.
[시각화 p5.js] p5.js 웹 에디터 설치 및 기본 메뉴 사용 [시각화 p5.js] p5.js 웹 에디터 설치 및 기본 메뉴 사용 p5.js프로세싱(processing)의 구문과 규칙을 최대한 준수, 프로세싱의 웹 버전프로세싱은 자바 언어를 기반, p5.js는 자바스크립트 언어를 기반웹 브라우저에서 동작하는 자바스크립트 프레임워크로 시각적인 미디어 아트 작품 또는 컴퓨터와 사용자 사이의 상호작용을 쉽게 구현할 수 있도록 지원로렌 멕카시의 의해 개발이 시작된 p5.js의 첫 번째 베타 버전이 2014년에 출시다양한 기능과 라이브러리 활용 가능​p5.js는 그래픽과 동적 상호작용에 특화된 웹 기반 자바스크립트 프레임워크​프로세싱 processing2011년 MIT에서 개발된 오픈 소스 소프트웨어로 자바 기반으로 한 데스크탑 환경의 언어코딩에 익숙하지 않은 아티스트, 디.. 2025. 3. 11.
[강화초등학교] 마이크로 로봇코딩 25학년도 강화초등학교 방과후학교 - 마이크로코딩로봇 [수업자료실]메이크코드 웹페이지  바로가기 교육일정 1회차 (3월 7일 금요일)마이크로비트에 대해 알아보자메이크코드 화면을 이해하고 새로운 프로젝트를 만들어 보자(LED 표현하기) 두근두근 내 마음 표현하기, 애니메이션을 만들어 보자(하늘에서 똥이 내려와요. 걸어가는 사람) 2회차 (3월 14일 금요일)(LED 표현하기) 애이메이션 만들기 복습가위바위보 게임 만들기 - A/B/A+B 버튼 활용(가속도 센서) 손안에 헬스기구, 만보기를 만들어 보자 3회차달리기 기록을 체크해 보자 (미션)소리에 따라 밝기가 변하는 미러볼 만들기스톱워치 만들기, 타이머 만들기 4회차온도와 습도를 측정하는 BME280 센서에 대해 알아보자DC모터 작동, OLED 작동, 온도.. 2025. 2. 26.
A Scene Of La Seine ">A Scene of La Senie 세느강의 정경작곡가 : 구라모토 유키 2025. 2. 5.
[프로세싱] 랜덤하게 숫자 출력하기 + keyPressed() int[] myNum= new int[5];PFont font;int x, y, index, chance;void setup() { size(720, 480); background(255); frameRate(5); //1초에 5번 void draw() 함수를 실행 (별도 지정없을 경우 1초에 60번 반복) myNum[0]=5; myNum[1]=10; myNum[2]=19; myNum[3]=64; myNum[4]=89; printArray(PFont.list()); // 사용 가능한 폰트리스트를 콘솔에 출력 font=createFont("ArailG1", 160); textFont(font); // 폰트 설정}void draw() { chance = int(random(100)).. 2025. 2. 4.

티스토리툴바