본문 바로가기
728x90

Hello World55

p5.js // texturing with camera p5.js texturing with camera재밌는 걸 해봤다 텍스처에 카메라가 연동되어서 웹캠으로 보여지는 카메라 소스가 텍스쳐 안에 출력되는 것으로 작동하고 여러번 반복해서 구현해봄. 캔버스에 도형 그림을 그리고 두 도형이 로테이션 회전하는 것으로 텍스쳐를 잡아 준 후컬러, 이미지, 텍스트 배치 등을 할 수도 있고 텍스쳐에 출력되는 것을 카메라로 입력되는 것을 텍스쳐에 출력하게 하라는 식의 코드를 작성해서 실제적으로는 같은 두 도형이 서로 반대로 천천히 회전하면서 카메라에 보여지는 상황이 실시간으로 도형에 찍혀서 나오게 된다.    // Texturing with camera let angle = 0 let cam function setup() { createCanvas(windowWidth,.. 2025. 3. 24.
p5.js 3D basic code study list Study from Udemy 3D basic with p5.js 1. Basic - Canvas Basic - 3D Coordinates 2. 3D Shapes - 3D Box - 3D Sphere - 3D Cone - 3D Cylinder - Torus - 3D Ellisoid - 3D Plane 3. Rotate, Translate, Mapping and Loops - Radians and Degrees - Rotate - Translate - Mapping - Loops 2024. 2. 28.
p5.js with vs code vs code 에서 p5.js를 실행시켰다 https://openprocessing.org openprocessing 에서 간단하게 익히고 코드를 쳐보았지만 저장에 한계가 분명히 생길 것 그리고 결제를 해야하는 시스템을 생각해보니 실제로 사용하기 유용하도록 vs code를 사용해서 익혀가기로 결정했다 vs code 실행 후 Extention -> 'p5.js' search p5.vscode install ! View - Commend Palette type -> 'p5 you can see 'Create p5.js Project' p5.js project create !!😊 추가로 install p5.js Contributor Library 를 선택해서 필요한 라이브러리를 추가 할 수도 있다 나는 p5... 2024. 2. 23.
p5.js ? what is p5.js? p5.js is a JavaScript library for creative coding. A collection of pre-written code, it provides us with tools that simplify the proxess of creating interactive visuals with code in the web browser. https://github.com/processing/p5.js/wiki/p5.js-overview p5.js overview p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and ex.. 2024. 2. 7.
Web - HTML, CSS, JavaScript html5 입력 양식 태그와 구조 [개발스터디 기몬] web - HTML, CSS, JavaScript html5 입력 양식 태그와 구조 입력양식 : 사용자에게 정보를 입력받는 요소 입력양식 개요 태그 : 영역생성 사용자에게 입력받는 입력 양식 태그 입력받는 정보는 DB로 저장 태그는 method속성의 방식으로 action 속성 장소에 데이터 전달 GET 방식 – 주소에 데이터를 입력해서 전달 POST 방식 – 주소 변경 없이 비밀스럽게 데이터 전달 입력 양식 종류 -form- input : text, button, checkbox, file, hidden, image, password, radio, reset, submit textarea : cols/rows select, optgroup, option fieldset, legend 기본입력 양식 태그 .. 2023. 5. 25.
Spring Boot - Spring Security Eclipse _web login function 스프링 시큐리티 / MVC 동작원리 메모 [개발스터디 기몬] first page : login / (front end + back end) using Webjars / Spring Security basic of spring security for web : let the login function automatically work and run.. 인증, 권한 부여 및 기타 보안 기능을 제공하는 java/ javaEE 프레임워크 ===== Webjars : 웹라이브러리를 파일 패키징한 것 . (jQuery, bootstrap, ..) html,css - bootstrap/ javascript - jQuery /////// Webjars sre client-frontend libraries Bootstrap , jQuery settings frontend libr.. 2023. 5. 25.
jQuery - 제이쿼리 연습 W3Schools try it yourself [개발스터디 기몬] https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com W3Schools try it yourself를 사용해서 제이쿼리 동작을 연습해봤다. 기본 예제로 나와있는 p태그 클릭을 호버작동으로 슬라이드가 사라지는 타이머를 주었고 버튼을 만들어서 클릭 했을 때 슬라이드가 다시 생성되도록 변경하도록 코드 변경. If you click on me, I will disappear. Click me away.. 2023. 5. 18.
Web - CSS 기초 선택자와 단위 CSS 속성 : 박스 속성, 가지 속성, 배경 속성 <HTML CSS JavaScript> [개발스터디 기몬] 웹표준 CSS CSS3가 지원하는 스타일 속성과 스타일 값을 활용_ 레이아웃을 잡는다. CSS3 내용 : 박스 속성, 가시 속성, 배경 속성, 글자 속성, 위치 속성, 유동 속성 그림자와 그레이디언트 속성 - 선택자의 용도와 사용법 - 기본 선택자 / 속성 선택자 - 후손 선택자와 자손 선택자 - 반응, 상태, 구조 선택자 - CSS 단위 CSS 개요 - 선택자 : CSS3에서 특정 HTML 태그를 선택할 때 사용 h1 { color : red; } 선택자 { 스타일속성 : 스타일값 } - 스타일시트 : CSS 로 작성된 코드 : CSS 선택자 종류 - 전체 선택자 : * - 태그 선택자 : 태그 // h1 { } - 아이디 선택자 : #아이디 // #id - 클래스 선택자 : .클래스 // .heade.. 2023. 5. 12.
Spring Boot - MyBatis Oracle 수동 설정 application.properties 수동 작성 / port 변경 [개발스터디 기몬] application.properties 에 수동으로 MyBatis Oracle설정을 해준다. 작성은 아래를 참고. ------------------------------------------------------------------------------------------------ # # MyBatis Oracle 설정 # #spring.datasource.driver-class-name=oracle.jdbc.OracleDriver spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe spring.datasource.username=scott spring.datasource.password=tiger # #Tomcat Port # server.po.. 2023. 5. 10.
728x90
반응형

티스토리툴바