전체 글 썸네일형 리스트형 생성형 인공지능으로 앱 만들기(웹심 WebSim 활용)-1탄 1) 웹심(WebSim)으로 나만의 앱 제작하기https://websim.ai/ websim.ai websim.ai▶WebSim AI이란 무엇인가요(출처 : https://ai-dy.super.site/webapp)WebSim AI는 Claude 3.5 Sonnet 및 GPT-4o와 같은 고급 AI 모델을 활용하여 웹 개발을 혁신하는 최첨단 웹사이트 생성 도구입니다. 모든 기술 수준의 사용자가 자연어로 자신의 비전을 설명하거나 URL을 입력하기만 하면 기능적이고 동적인 웹사이트 및 웹 애플리케이션을 생성할 수 있습니다. WebSim AI는 정적인 웹 디자인을 상호작용할 수 있는 탐색 가능한 환경으로 변환하여 아이디어를 신속하게 프로토타입하고 코딩 지식 없이 실현할 수 있게 합니다.▶WebSim AI의 주.. 더보기 #인공지능 AI 활용 - 아두이노와 파이썬 연동하기 1) VScode(Visual Studio code) 설치하기- 설치파일 다운로드 하기 : https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com - 윈.. 더보기 예술과 기술의 만남(반짝이는 팝아트 자화상 만들기) - 아두이노 소스코드int TOUCH_SENSOR_PIN = 2; // D2int led1 = 8; // D8int led2 = 9; // D9int led3 = 10; // D10int led4 = 11; // D11int led5 = 12; // D12// variables will change:int ledState = LOW; // the current state of LEDint lastTouchState; // the previous state of touch sensorint currentTouchState; // the current state of touch sensorvoid setup(){ unsigned char i; Serial.begin(9600); pinMo.. 더보기 [2단계-3] 아두이노->p5.js로 데이터(문자열)수신(가변저항, 버튼) 아두이노에서 가변저항의 센서값(0~255)을 문자열로 전송하고 p5.js에서 이를 수신하여 제어하는 과정입니다. => 먼저 p5.js 에디터에서 index.html에서 뒤에 붙여넣기 한 후 저장한다. (1) 가변저항 값 문자열로 송수신하기 - 아두이노 회로 - 아두이노 소스// 아두이노: 가변저항값 송신 1#define VARIABLE_R A0void setup() { pinMode(VARIABLE_R, INPUT); Serial.begin(9600);}void loop() { int value = analogRead(VARIABLE_R); Serial.println(value); delay(30); // 전송속도 지연} - p5.js 소스(수신값 범위 0~1023)// p5.js: 가.. 더보기 [2단계-2] 아두이노->p5.js 로 데이터(0~255) 송수신(가변저항) 아두이노에서 가변저항, 조도센서, 초음파 센서 등의 센서값(0~255)를 전송하고 p5.js에서 이를 수신하여 제어하는 과정입니다. => 먼저 p5.js 에디터에서 index.html에서 뒤에 붙여넣기 한 후 저장한다. (1) 가변저항 값 숫자로 송수신하기 - 아두이노 회로 - 아두이노 소스// 아두이노: 가변저항값 송신#define VARIABLE_R A0void setup() { pinMode(VARIABLE_R, INPUT); Serial.begin(9600);}void loop() { int value = analogRead(VARIABLE_R); value = map(value, 0, 1023, 0, 255); Serial.write(value); delay(30); // 전.. 더보기 [1단계-2] p5.js->아두이노로 정수(0~255) 데이터 송수신(LED, 서보모터) 이제부터 아두이노에서 p5.js로 데이터를 송수신 하는 방법을 알아보겠습니다. 송수신하는 데이터의 종류는 정수, 문자열입니다. 먼저 정수를 송수신하는 방법에 대해 알아보겠습니다. => 먼저 p5.js 에디터에서 index.html에서 뒤에 붙여넣기 한 후 저장한다. 1. 정수 송수신(0~255)- 1 바이트(0~255) 범위로 변하는 정수 값을 송수신해 봅니다. (1) LED 밝기 제어 - 마우스의 좌우 움직임에 따라 LED의 밝기를 제어해봅시다. - 아두이노 회로- 아두이노 코드// 수신값으로 LED 밝기 제어#define LED 6void setup() { pinMode(LED, OUTPUT); Serial.begin(9600);}void loop() { while (Serial.availa.. 더보기 [1단계-1] p5.js-> 아두이노로 정수(0,1) 데이터 송수신(LED, 부저, DC모터 작동) 이제부터 아두이노에서 p5.js로 데이터를 송수신 하는 방법을 알아보겠습니다. 송수신하는 데이터의 종류는 정수, 문자열입니다. 먼저 정수를 송수신하는 방법에 대해 알아보겠습니다. => 먼저 p5.js 에디터에서 index.html에서 뒤에 붙여넣기 한 후 저장한다. 1. 정수 송수신- 1 바이트(0~255) 범위의 값 중 0, 1 값을 송수신해 봅니다. (1) LED 1개 동작 제어 - p5.js 캔버스에서 마우스를 클릭하여 LED가 점멸하도록 해봅시다. - 아두이노 회로- 아두이노 코드// 수신된 정수로 LED 점멸 제어#define LED 6void setup() { pinMode(LED, OUTPUT); Serial.begin(9600);}void loop() { while (Serial... 더보기 [2단계-1] 아두이노-> p5.js로 데이터(0, 1) 송수신 (버튼) 이제부터 아두이노에서 p5.js로 데이터를 송수신 하는 방법을 알아보겠습니다. 송수신하는 데이터의 종류는 정수, 문자열입니다. 먼저 정수를 송수신하는 방법에 대해 알아보겠습니다. => 먼저 p5.js 에디터에서 index.html에서 뒤에 붙여넣기 한 후 저장한다.1. 정수 송수신- 1 바이트(0~255) 범위의 값 중 0, 1 값을 송수신해 봅니다. (1) 푸시버튼 값을 수신하여 원의 색상 변경- 아두이노 회로 - 아두이노 코드(버튼을 누르면 원 색상 변경)// 푸시버튼값 송신#define BUTTON 2void setup() { pinMode(BUTTON, INPUT); Serial.begin(9600);}void loop() { int value = digitalRead(BUTTON); .. 더보기 ESP32와 DHT22로 온도, 습도 측정하기 ESP32와 DHT22(온습도 측정 센서)를 활용하여 온도와 습도를 측정해보겠습니다. 1) 온습도 측정하기- 준비물 : ESP32 보드 , DHT22 센서 - 참고 사이트 : https://wokwi.com/projects/322410731508073042 esp32-dht22.ino - Wokwi ESP32, STM32, Arduino SimulatorRun IoT and embedded projects in your browser: ESP32, STM32, Arduino, Pi Pico, and more. No installation required!wokwi.com - 회로도 - 소스코드/** ESP32 + DHT22 Example for Wokwi https://wokwi.com/a.. 더보기 p5.js로 이미지 다루기 1. 이미지 불러오기// 이미지 객체를 생성 후 출력let img;function preload() { img = loadImage("sample.jpg");}function setup() { createCanvas(500, 500);}function draw() { background(0); image(img, 0, 0);}2. 이미지 생성 후 여러 개 출력// 이미지 객체를 생성 후 복수 개 출력let img; let x = 0, y = 0;function preload() { img = loadImage("sample.jpg");}function setup() { createCanvas(500, 500);}function draw() { background(0); image(img, .. 더보기 p5.js 로 사운드 입출력하기 1. 사운드 파일 재생- 재생 가능한 사운드 파일 형식 : WAV, AIFF, MP3// 사운드 파일 자동 재생let soundFile;function preload() { soundFile = loadSound('assets/sample.mp3'); // soundFile 객체 생성 및 초기화(파일 로딩)}function setup() { createCanvas(200, 100); background(200); textAlign(CENTER, CENTER); text('사운드 파일 재생', width/2, height/2); soundFile.play(); // 사운드 파일 재생} 2. 사각형이 경계에 부딪힐 때마다 사운드가 재생되도록 만들어봅시다.// 사각형이 좌우 경계에서 반사할 때.. 더보기 ESP32 와 TFT LCD(ILI9341) 연결하기 1. ESP32 보드 PINOUT 1. TFT LCD(ILI9341) 와 ESP32 연결 2. 아두이노 라이브러리 설치하기 XPT2046_Touchscreen 검색 파일-> 환경설정 이 링크를 복사하여 추가적인 보드매니저 URLs에 넣고 확인을 누릅니다. https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json 툴->보드매니저 'esp32'를 검색하고 설치합니다. 툴->보드->ESP32 Arduino-> ESP32 Dev Module 선택 - 라이브러리 설치하기 - Adafruit-GFX-Library 검색하여 설치하기- TFT_eSPI 검색하여 설치하기 "https.. 더보기 무료 음향효과 다운로드 사이트 작업할 때 필요한 음향효과를 무료로 다운로드 할 수 있는 사이트입니다. https://www.soundjay.com/index.html Free Sound Effects | SoundJay.comFree Sound Effects Follow @soundjay Welcome to Sound Jay's free sound effects web site! You are allowed to use the sounds on our website free of charge and royalty free in your projects but you are NOT allowed to post the sounds on any web site for otherswww.soundjay.com https://www.s.. 더보기 ESP32 연결 시 포트 인식 못할 때 해결방법 ESP32 포트 인식 못하는 문제 ESP32를 연결하고 포트를 찾을 때 인식을 못한다면 연결된 USB가 표시되지 않는 경우가 대부분 인데, 이유는 USB가 제대로 인식되지 않았기 때문입니다. 이 때 장치 관리자를 열어보면 포트에 아래 그림처럼 포트번호가 인식되야 프로그램 업로드가 가능합니다. 해결방법은 ■ USB 드라이버 다운로드다운로드 링크 : https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers?tab=downloads CP210x USB to UART Bridge VCP Drivers - Silicon LabsThe CP210x USB to UART Bridge Virtual COM Port (VCP) drivers are requir.. 더보기 ESP32 사용 기초(WIFI, LCD연결) 1. ESP32 시작하기 https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json그림과 같이 입력하고 "확인"을 클릭 합니다 - 툴->보드메니저 선택 - "esp32"를 입력하고 설치 - ESP32 Dev Module선택 2. WiFi 찾기/* ESP32 WiFi Scanning example */#include "WiFi.h"void setup() { Serial.begin(115200); Serial.println("Initializing WiFi..."); WiFi.mode(WIFI_STA); Serial.println("Setup done!");}void loop() {.. 더보기 #1편-ESP32 활용 온도-습도 알림기 만들기(ILI9341, DHT11활용) ESP32보드를 활용하여 날씨 정보를 알려주는 웨더스테이션을 만들어보겠습니다. 1. 준비물- ESP32- ILI9341- 미니 브래드보드 - 온습도 센서(DHT11)2. ESP32 시작하기 https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json그림과 같이 입력하고 "확인"을 클릭 합니다 - 툴-보드메니저 선택 - "esp32"를 입력하고 설치 - ESP32 Dev Module선택 3. ESP32 와 ILI9341 연결하여 기상정보 표시하기#include "SPI.h"#include "Adafruit_GFX.h"#include "Adafruit_ILI9341.h"#include "Wi.. 더보기 저작권 걱정 없는 만료저작물 찾기 공유저작물이란? 관련 사이트1) 공유마당https://gongu.copyright.or.kr/gongu/main/main.do 공유마당공유마당gongu.copyright.or.kr 검색어를 넣고 조회하면 관련 사진, 이미지, 동영상, 음악 등 저작권을 공유하는 저작물을 찾아 무료로 사용할 있습니다. 2) 아트비 https://artvee.com/ ArtveeBrowse and download high-resolution, public domain Paintings, Drawings, Illustrations and Posters.artvee.com 현대작품 외에 대부분의 명화를무료로 다운받아 사용할 수 있으며 위의 사각형 안에 있는 내용이 써있다면 저작권 걱정 없이 개인용, 상업용으로 사용할 수 있.. 더보기 RGB와 CMYK 의 차이 RGB란? RGB는 빛의 3원색으로 R(Red), G(Green), B(Blue) 를 나타냅니다. 빛을 혼합하여 TV, 스마트폰, PC 모니터, 전광판 등의 영상장치에 색상을 표현합니다.RGB는 검정(Black)색상이 없으며 명암은 빛의 세기로 조절합니다. 따라서 검정색은 영상장치의 전원이 꺼진 상태(색상)이고 빛의 세기가 약할수록 어두워 집니다. 반대로 빛의 세기가 강할수록 RGB원색을 표현하기 때문에 빛의 세기가 가장 강한 상태에서 RGB가 모두 켜지면 하얀색으로 표현됩니다.단위는 픽셀(pixel)이며 해상도는 ppi(pixel per inch)로 표현합니다. ppi는 1인치당 분포된 픽셀의 갯수를 의미합니다. CMYK란? CMYK는 출력용으로 사용하는 잉크의 색상을 나타내며 C(Cyan), M(Ma.. 더보기 픽셀과 센티미터(밀리미터) 단위 변환 이미지 작업을 하다보면 크기를 설정할 떄 픽셀로 하는 경우가 많은 데 일상에서는 센티미터나 밀리미터 단위를 더 많이 사용하기 떄문에 크기가 얼마인지 잘 감이 안오는 경우가 많습니다. 따라서 단위변환을 쉽게 해주는 사이트를 활용하면 편리하게 크기를 가늠할 수 있습니다.https://www.translatorscafe.com/unit-converter/typography/pixel-(x)-to-centimeter-%5Bcm%5D/#_ 이 사이트에 들어가서 아래와 같이 단위를 변환하면 크기를 알 수 있습니다. 1픽셀은 0.02645833... 센티미터인 것을 알 수 있습니다. 이미지를 제작할 때 사이즈를 알고 싶으면 단위변환 사이트를 이용해서 만들어보세요. 더보기 #인공지능 AI 활용 - Mediapipe를 이용한 로봇 손 제어하기 MediaPipe는 구글에서 개발한 오픈 소스 라이브러리로, 다양한 운영체제와 프로그래밍 언어를 지원하며, API를 통해 쉽게 사용할 수 있습니다. 또한 이미지와 실시간 비디오 처리가 가능하며 계속해서 개발이 이루어지고 있어 다양한 분야에서 활용도가 높아지고 있습니다. 아래 링크를 눌러 해당 사이트로 이동하면 다양한 데모를 볼 수 있고 관련된 프로젝트의 내용을 볼 수 있으니 참고하시기 바랍니다.https://developers.google.com/mediapipe MediaPipe | Google for DevelopersAn open source, cross-platform, customizable ML solution for live and streaming media.developers.goo.. 더보기 심장박동 센서 활용하기 심장 박동 센서(EKG Sensor : Electrocardiography Sensor)는 심장이 박동할 때 생기는 혈류의 변화를 이용해 심박수를 체크하여 동물의 심장 박동을 측정하는 센서입니다. 주로 모세혈관이 많이 분포 되어 있는 손끝이나 귀 주변 피부에 센서를 접촉하여 심박수를 측정합니다.동작원리는 심장 박동 시 혈류가 증가하면 반사되어 돌아오는 빛의 양이 줄어들며, 혈류의 양이 적어지면 반사되어 돌아오는 빛의 양이 늘어나게 되어 Detector로 들어온 빛의 양으로 심장 박동수를 측정하게 되는 것입니다. 참고사이트Heartbeats in Your Project, Lickety-Split ♥ – World Famous Electronics llc. (pulsesensor.com) Heartbeats.. 더보기 p5.js와 티처블머신을 활용한 아두이노 연동하기 티처블머신( Teachable Machine)은 누구나 머신러닝 모델을 쉽고 빠르고 간단하게 만들 수 있도록 제작된 웹 기반 도구입니다.https://teachablemachine.withgoogle.com/ Teachable MachineTrain a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required.teachablemachine.withgoogle.com 오늘은 티처블머신을 활용하여 아두이노와 연동하는 방법에 대해 학습하겠습니다. 1) 티처블머신을.. 더보기 ESP32 와 ESP8266 차이점 비교 아두이노를 활용한 프로젝트를 진행하다보면 네트워크의 필요성을 느끼게 됩니다. 그래서 오늘은 다양한 보드 중에서 IoT (Internet of Things) 분야의 DIY 프로젝트에 가장 많이 사용되는 ESP32와 ESP8266보드에 대해 알아보겠습니다.이 보드들은 가격이 저렴하고 Wi-Fi 모듈을 지원하며 GPIO뿐만 아니라 SPI, I2C, UART 등과 같은 다양한 프로토콜을 지원하기 때문에 활용도가 매우 높아 IoT프로젝트를 만들 때 사용하기 편리합니다.ESP32 ESP8266 ESP32 vs ESP8266ESP32는 ESP8266 후속 제품으로 CPU 코어, 빠른 Wi-Fi, 더 많은 GPIO를 추가하고 Bluetooth 4.2 및 Bluetooth low energy를 지원합니다. 또한 터치 센.. 더보기 생성형 인공지능 활용하기(오디오 생성편) 1. 아이바 : https://www.aiva.ai/ AIVA, the AI Music Generation AssistantBilled Annually 26% OFF! Recommended for content creators who want to monetize compositions only on Youtube, Twitch, Tik Tok and Instagram. Copyright owned by AIVA Limited monetization No need to credit AIVA 15 downloads per month Track durations up to 5 mwww.aiva.ai 2. 수노(Suno) : https://suno.com/ SunoSuno is building a futur.. 더보기 생성형 인공지능 활용하기(이미지 생성편) 1. Microsoft Designer : https://designer.microsoft.com/ Microsoft Designer - Stunning designs in a flashA graphic design app that helps you create professional quality social media posts, invitations, digital postcards, graphics, and more. Start with your idea and create something unique for you.designer.microsoft.com 2. Adobe Firefly : https://firefly.adobe.com/ Adobe Firefly firefly.adobe.com .. 더보기 생성형 인공지능 활용하기(글쓰기 편) 1. ChatGPT : https://chat.openai.com/auth/login 2. MS Copilot : https://copilot.microsoft.com/ InfoNative to Hawaii, USA, lei garlands are charactericeto.westus2.binguxlivesite.net 3. Google Gemini : https://gemini.google.com/app Gemini - 대화를 통해 아이디어를 강화하세요Bard가 Gemini로 바뀌었습니다. Google AI의 도움을 받아 글을 쓰고, 계획하고, 학습해 보세요.gemini.google.com 4. 뤼튼 AI : https://wrtn.ai/ 뤼튼당신의 첫 AI 에이전트 뤼튼. AI 검색부터 나만의.. 더보기 매드매퍼 UI 구성 1. 미디어 패널 - 제너레이터는 기본적으로 제공되는 소스로 프로젝션 맵핑할 떄 테스트 용도로 많이 사용됩니다. 그 밖에 다양한 미디어아트 소스가 있는 것을 확인 할 수 있습니다. - 또한 다양한 라이브러리를 제공하는데 '+'버튼을 누르면 여러 형태의 소스가 있어 활용할 수 있습니다. - 프리뷰에서 선택한 소스를 미리보기로 확인할 수 있고 매개변수(속도, 형태, 그로우, 색상)를 조정하여 마음에 맞 수정할 수 있습니다. - 그 밖에 미디어를 추가할 수 있 동영상이나 사진도 불러올 수 있습니다. 2. 뷰패널 - 입력뷰와 출력뷰로 나뉘며 상단 툴바의 아이콘을 눌러 모양을 변경할 수 있다. - 출력뷰 상단의 자석모양 : 레이어와 레이어의 꼭지점이 맞닿았을 때 연결해 줌. - 보통 활성화로 작업하지만 복잡한 작.. 더보기 매드매퍼(MadMapper) 매드매퍼(MadMapper)란? MadMapper는 아티스트를 위해 만든 비디오 매핑 소프트웨어로 2010년 제네바에서 열린 매핑 페스티벌의 애프터 파티에서 나타났습니다. 당시 시각적 콘텐츠를 실시간, 실제 공간에서 적절하게 매핑하는 방법에 대해 논의하기 시작했고 실제로 예술 레이블인 1024와 소프트웨어 개발 회사인 GarageCube의 만남으로 탄생했습니다. MadMapper는 비디오를 공간에 매핑하고, 조명과 LED 바를 제어하며, 버전 5부터 동일한 재미있는 방식과 프로세스로 레이저 빔을 제어하고 사용할 수 있는 사용하기 쉽지만 강력한 도구로 전 세계적으로 수많은 시각 및 디지털 아티스트, 장면 작가, 무대 디자이너, Vjs 및 기타 많은 창의적인 사람들이 스마트 디지털 아트 설치 또는 라스베거스.. 더보기 #인공지능 AI 활용 - Hand Gesture로 아두이노 제어하기(LED 밝기 제어) 저번 시간에 배운 MediaPipe를 활용한 프로젝트 수업입니다. 1) MediaPipe를 이용한 손가락 제스처에 따른 크기 조절- 엄지 손가락(4번)과 두번째 손가락(8번)을 좁혔다가 벌렸다 하는 제스처에 따라 두 손가락 끝의 점의 길이를 측정하여 화면에 출력해주는 소스코드입니다.- Vscode를 실행하고 'Open Folder'(폴더열기)를 선택하여 'ArduinoHandgesture'폴더를 새로 만들고 그 안에 'HandGestureVolume.py' 파일을 새로 생성합니다. 소스코드import cv2import mediapipe as mpimport pyautoguix1 = y1 = x2 = y2 = 0webcam=cv2.VideoCapture(0)my_hands = mp.solutions.han.. 더보기 #인공지능 AI 활용 - Mediapipe로 HandTracking 하여 LED 제어하기 MediaPipe는 구글에서 개발한 오픈 소스 라이브러리로, 다양한 운영체제와 프로그래밍 언어를 지원하며, API를 통해 쉽게 사용할 수 있습니다. 또한 이미지와 실시간 비디오 처리가 가능하며 계속해서 개발이 이루어지고 있어 다양한 분야에서 활용도가 높아지고 있습니다. 아래 링크를 눌러 해당 사이트로 이동하면 다양한 데모를 볼 수 있고 관련된 프로젝트의 내용을 볼 수 있으니 참고하시기 바랍니다.https://developers.google.com/mediapipe MediaPipe | Google for DevelopersAn open source, cross-platform, customizable ML solution for live and streaming media.developers.goo.. 더보기 이전 1 2 3 다음
