질문 몇 번으로 GPT-4 코딩! 결국 돈 되는 인공지능 창작은 바로 이런 겁니다! AI 생성 Coding OpenAI ChatGPT (GPT-4) 오후다섯씨 :: ChatGPT 정리

> English Summary

> English Full Text

 

[ 요약 ]

이번 시간에는 GPT-4 모델을 활용하여 인터랙티브 어플리케이션을 개발하는 방법에 대해 알아보겠습니다.
코드를 작성하기 전에 스케치를 하면서 아이디어를 발전시키는 것이 중요하며, 프로세싱에서는 다양한 라이브러리와 함께 사용됩니다.

이미지를 불러와서 각 픽셀을 픽셀 객체로 만드는 코드를 짜고, 업데이트 메소드를 사용하여 픽셀의 위치를 업데이트합니다.
실행하기 전에 이미지 파일을 준비하고 폴더를 만들어야 하며, 코드를 실행하면 이미지의 픽셀들이 바닥으로 떨어지며 쌓이는 인터랙티브 어플리케이션이 완성됩니다.

마지막으로, 픽셀 개수를 줄여서 실행 속도를 개선할 수 있습니다.

 

 

반응형

 

GPT-4 coding with just a few questions! This is what profitable AI creation looks like in the end! AI creation Coding OpenAI ChatGPT (GPT-4) pm5c
https://youtube.com/watch?v=3rw-HQ9asEs&feature=share 

 

 

 

[ 한글 전체 ]

좋아요와 구독을 부탁드립니다.
안녕하세요.
이번 시간에는 GPT-4 모델을 활용하여 코딩을 해보겠습니다.
생생한 코딩 경험을 공유하는 것이 목표입니다.
함께 결과를 관찰해 보시면 좋겠습니다.
먼저 GPT-4 모델에 접속하여 프랑스 창에서 작업할 예정입니다.
프로세싱을 활용하여 인터랙티브 어플리케이션을 개발하는 내용을 다루고 있습니다.
상호 반응하는 어플리케이션을 만드는 것이 중요합니다.
사용자의 다양한 입력값에 반응하는 어플리케이션을 개발할 수 있습니다.
마우스 입력, 소리 마이크로폰을 통한 음성적인 데이터, 빅데이터 값 등에 반응할 수 있습니다.
이런 어플리케이션은 인공지능을 활용한 데이터 분석 뒤 시각화로 전환되어야 합니다.
프로세싱은 시각화 작업, 음성적인 데이터, 더 나아가서는 데이터를 이용한 키네틱 디스플레이에서 유용하게 활용됩니다.
프로세싱을 설치하려면 해당 링크를 참고하세요.
스케치 생성이라는 단계를 거치며 인터랙티브 어플리케이션 개발에 필요한 아이디어를 발전시킬 수 있습니다.
종이 위에서 하는 스케치는 의미가 없으므로 스케치를 기반으로 계속해서 어플리케이션을 개발 및 테스트하여 결과물을 완성시키는 것이 중요합니다.
그래서 프로세싱에서 개발하는 모든 프로그램들은 스케치라고 부릅니다.
예제 파일도 만들어 주었고요, 또 중요한 정보가 있습니다.
프로세싱은 다양한 라이브러리와 함께 사용한다고 합니다.
모든 코딩은 똑같습니다.
기본적으로 라이브러리를 제공합니다.
이 라이브러리는 단어 자체는 다를 수 있습니다.
addon이라고 할 수도 있고, slc라고도 합니다.
플러그인이라고도 하지만, 모두 같은 기능을 합니다.
기본적인 프로그램 이외에 추가로 제공해주는 모든 코드를 라이브러리로 제공하고 있습니다.
프로세싱은 만들어진 지가 오래됐고, 커뮤니티가 아주 잘 활발하게 되어 있기 때문에 이 라이브러리가 잘 구축되어 있다고 말씀드릴 수 있겠습니다.
관련된 정보는 프로세싱이다.
org에서 확인하실 수 있습니다.
자, 코드를 실행해 보도록 하겠습니다.
이미지를 불러와서 이미지 픽셀들이 바닥으로 떨어지는 코드를 작성해 주세요.
제가 보여드리고 싶은 아이디어는, 이미지를 불러와서 그 이미지를 구성하고 있는 픽셀 하나하나가 바닥으로 떨어지는 거입니다.
예를 들면 이미지가 먼지가 되어서 바람에 혹은 중력에 특정 방향으로 날라가는 그런 것을 상상하고 있는데, 그걸 코드로 구현해 보려고 합니다.
지금 프로세싱 코드가 완성되고 있습니다.
코드를 보면 이미지를 불러와서 저장하고 싶은 변수가 선언되었고, 각각의 픽셀 값을 저장하는 어레이 리스트 배열 리스트가 선언되었습니다.
그리고 픽셀이라고 하는 클래스를 만들어서 저장하게 되는데, 픽셀 클래스는 여기 하단에 자동으로 완성이 되었습니다.
그래서 픽셀 클래스 안에 보면, 각각의 픽셀의 위치를 저장하는 X,Y 좌표값과 색상을 저장하는 칼라 값이 만들어졌습니다.
그리고 각각의 픽셀의 중력과 속도를 집어넣기 위해서 그래비티와 벨로시티 변수가 선언되었습니다.
잘 완성된 것 같고요, GPT-4에 장점이죠.
코드를 작성한 다음에 코드를 요약 정리해주는데, 아주 훌륭합니다.
이 코드는 이미지를 불러온 다음 각 픽셀을 픽셀 객체로 만들어, 이 객체를 클래스로 저장합니다.
픽셀 클래스는 픽셀의 위치, 색상, 중력, 속도를 저장하고 업데이트 메소드를 사용하여 픽셀의 위치를 업데이트합니다.
이 업데이트 메소드는 매 프레임마다 계속 반복 실행됩니다.프로세싱은 2개의 메인 함수로 구성되어 있습니다.
하나는 셋업 함수이고, 여기에는 프로그램이 실행될 때 한 번만 실행되는 함수이며, 주로 프로그램 최초 실행될 때 세팅해야 되는 여러가지 값들이 포함됩니다.
가장 대표적인 것은 윈도우의 사이즈입니다.
그리고 이미지를 불러오는 값도 마찬가지로 프로그램이 최초 실행될 때 한 번만 불러옵니다.
이미지에서 픽셀들을 추출하여 어레이 리스트로 저장하는 부분도 마찬가지입니다.드로 함수에서는 픽셀 값들을 반복문을 이용하여 계속 업데이트하고 디스플레이합니다.
업데이트 한다는 것은 위치가 계속 바뀐다는 것입니다.
매 프레임마다 계속 위치 값이 변해야 하므로, XY 값을 계속 업데이트해줍니다.이 코드를 실행하기 위해 이미지 파일이 필요합니다.
일반적으로 이미지 파일은 프로세싱 프로젝트 파일 폴더 내의 데이터 폴더 안에 위치합니다.
프로그램을 실행한 후 에디터 창에 코드를 복사해 붙여넣은 후, 이미지를 불러오기 위해 최초 저장을 한 번 해야 합니다.
저장 컨트롤 S 혹은 커맨드 S를 눌러 주겠습니다.
"폴링 픽셀"이라는 프로젝트로 저장하면 폴더가 만들어지고 그 안에 "폴링 픽셀.pde" 프로세싱 파일이 하나 생성됩니다.
여기서 주의하실 것은, 폴더명과 파일명이 같아야 된다는 겁니다.
이후에 추가되는 프로세싱 파일들은 달라도 되는데, 셋업 함수와 드로 함수가 있는 메인 파일은 폴더 이름과 파일명이 같아야 합니다.
이걸 알아두시고, 임의로 파일명을 바꾸면 프로세싱이 그 부분을 처리해주지만, 이 부분을 함께 같이 해야 합니다.
처음 저장할 때 프로세싱은 폴더를 만들고 파일을 저장해줍니다.
그 다음에는 이미지를 추가하기 위해 "불러올 이미지.jpg"라는 이미지를 "데이터" 폴더에 넣어주면 됩니다.
만약 이미지를 구글에서 다운로드 하려면, 이미지를 다운 받아 데이터 폴더 안에 넣어주시면 됩니다.
프로그램을 실행하기 전에 이미지 사이즈를 수정해야 할 수도 있습니다.
이미지를 수정하고 실행하기 위해서는 화살표 실행 버튼을 클릭하면 됩니다.
지금 코드가 잘 작성됐다면 "픽셀"들이 위에서부터 밑으로 떨어지면서 쌓이게 됩니다.
이렇게 쌓이면서 그 칼라풀한 이미지가 만들어집니다.
배경을 검정으로 바꾸기 위해서는 드로 함수에서 "백그라운드" 부분을 0으로 수정하면 됩니다.
RGB 값을 넣으려면 여기에 3개 값 RGB 값을 넣어 주시면 됩니다.
다시 실행하겠습니다.
네, 여러분들 어떠신가요?
이 코드 결과는 나쁘진 않은데요.
지금 보시면 픽셀 개수가 워낙 많다 보니까 조금 속도가 느려 보입니다.
그래서 이걸 좀 해결하기 위해서요.
픽셀 개수를 좀 더 줄여 보겠습니다.
픽셀 개수를 줄이고, 그리고 픽셀의 크기도 조금 키워서 어떤 효과가 나는지를 좀 살펴보겠습니다.
속도를 계산하기 위한 어떤 일종의 작업이라고 보시면 됩니다.
픽셀 개수를 줄이고, 픽셀의 크기를 키워서 어떤 결과가 나오는지를 좀 살펴볼게요.
저 GPT에게 그 부분을 요청할게요.
픽셀 개수가 너무 많아서 속도가 느립니다.
이 부분을 개선할 수 있나요?
제가 구체적으로 사실 픽셀의 개수를 줄이고, 픽셀 사이즈를 디스플레이 사이즈만큼 키워라고 얘기를 할 수도 있지만, 제가 GPT4가 이 문제를 어떻게 해결할지가 또 궁금합니다.
그래서 한번 그대로 요청해 보겠습니다.
네, 코드가 완성되었습니다.
한번 살펴볼게요.
자, 속도를 개선하기 위해 몇 가지 방법을 사용할 수 있습니다.
여기서는 이미지 해상도를 줄이고, 픽셀 간격을 늘려 픽셀 수를 줄이는 방법을 사용하겠습니다.
제가 생각했던 것과 비슷합니다.
일단 메인은 픽셀 수를 줄이는 거겠죠.
속도를 빨리 하기 위해서는요.
자, 그래서 픽셀 간격 설정을 하는 부분을 넣었습니다.
여기 픽셀 간격을 4로 해서요.
모든 픽셀을 다 저장하는게 아니라 4개 간격으로 픽셀을 저장하니까요.
한 1/4로 주는 겁니다.
자, 여기 보면 폼은 안에서요.
이미지를 이제 모든 픽셀을 한번 훑게 되는데, 바로바로 하나씩 증가시키는게 아니라 픽셀 사이즈만큼 샷시 증가를 시키는 겁니다.
그래서 4분의 1 정도로 픽셀 사이즈가 줄게 되는 거죠.
자이 밑볼은 똑같구요.
자, 보겠습니다.
한쪽이 4가 주니깐요.
4416해서 16분의 1이 주는 거죠.
맞습니다.
제가 1/4이 아니라 16분의 1입니다.
대단하네요.
성능이 개선되는 거죠.
그리고 이제 픽셀을 그리는 방법을요.
포인트에서 이제 rect로 변경을 했습니다.
이것도 제가 생각했던 거랑 지금 맞아 떨어졌는데요.
우리가 4개의 간격으로 하게 되면 픽셀과 픽셀 사이가 비어 있잖아요.
그 부분을 채우기 위해서요, 사각형으로 그렸다는 겁니다.
당연히 사각형의 크기는 4가 되겠죠.
픽셀 사이즈도 위에서 선언이 됐습니다.
4로 그죠.
아주 잘 코드가 작성이 됐습니다.
자 그리고 이렇게 해도 속도가 느려질 수 있다는 얘기입니다.
속도를 계산할 수 있습니다만, 이미지 품질이 저하될 수 있다는 얘기죠.
이미지 품질이 저하된다는 얘기는 뭘까요?
그러니까 이미지가 16분의 1로 피스의 개수는 줄어들지만 정교함이 떨어질 수 있죠.
달리 얘기하면 약간 추상화가 된다는 겁니다.
제가 의도했던 거고요.
그 결과물 보고, 여기서 얘기하듯이, 우리가 픽셀 사이즈를 조절하면 될 것 같습니다.
더 키울 수도 있고, 더 줄일 수도 있고, 프로세싱이 제한한 픽셀 간격 설정, 이렇게 코멘트로 알려졌지 않습니까?
이 부분을 우리가 수정하면 되는 겁니다.
코드를 카피하고, 기대가 됩니다.
가서 붙여넣기 하고, 실행하겠습니다.
와우, 어떻습니까 여러분.
자이 배경이 검정이 돼야 될 것 같고요.
이 부분, 윈도우 사이즈가 800에 800이 돼야죠.
그리고 배경을 검정으로 해서 한번 다시 보겠습니다.
자, 여기서요.
지금 재밌는데요.
재밌긴 합니다.
재밌는데, 지금이 사각형을 그릴 때, 스트로크를 썼습니다.
스크 스트로크라는 건 뭐냐면요, 사각형을 그릴 때 테두리만 그리는 겁니다.
사실 여기를 fill을 넣어 줘야 되거든요.
fill 함수를 이렇게 넣어 줘야 됩니다.
색을 채워야 되거든요.
다시 한번 보겠습니다.
네, 훨씬 다르죠.
멋있습니다.
자, 그러면 이 4 사이즈를 조금 더 키워 볼게요.
얘를 팔로 키워 보겠습니다.
속도도 더 빠르고요.
더 재밌죠.
여러분.
자, 얘를 16으로 한번 더 키워 볼게요.
이런 식으로 바뀌게 됩니다.
뇌를 32를 키워 보겠습니다.
이렇게 계속 추상화가 될 수 있다는 얘기입니다.
여러분.
그리고 이 부분을 다시 더 줄여 보겠습니다.
2로 줄여 보겠습니다.
아, 멋있습니다.
여러분.
그러니까 4분의 1로 줄은 거죠.
간격이 임의인 거죠.
4분의 1로 주는 겁니다.
그 속도가 그래도 잘 나옵니다.
이 정도면, 결과물로 한이 정도로 해도 괜찮지 않을까 생각이 듭니다.
자, 화면을 좀 더 꽉 채우기 위해서, 800이 아니라 천으로 해보겠습니다.
멋있지 않습니까?
지금 보시는 것은, 단순히 영상을 제작한 게 아니고요, 소프트웨어입니다.
소프트웨어 반응을 할 수 있습니다.
지금 제가 반응하는 부분을 넣지는 않았는데요, 반응하는 부분을 넣어서 인터랙티브 소프트웨어 어플리케이션이 어떤 장점인지 좀 더 보여드리겠습니다.
자, 제가 손으로 수정했던 부분이에요.
다 요청해드리겠습니다.
윈도우 사이즈를 천으로 변경하고, 배경을 검정으로 변경하고, 사각형을 색상으로 채우고, 마우스에 따라 떨어지는 속도를 변경하도록 코드를 작성해주세요.
자, 말씀하신 대로 코드를 변경하였습니다.
바로바로 변경해드릴게요.
네, 코드가 완성되었습니다.
너무 잘 변경되었지 않을까요?
윈도우 사이즈를 천으로 변경했다고 하고요, 배경을 검정색으로 설정했고요, 사각형을 색상으로 채우기 위해 노스트로크를 사용했습니다.
노스트로크는 테두리 선을 윤곽선을 그리지 않겠다는 뜻입니다.
그래도 되고 안 되고 선택 가능합니다만, 필함수를 써서 채웠는지 좀 확인해보겠습니다.
그리고 마우스 위치에 따라 떨어지는 속도를 변경하기 위해 맵 함수를 썼다고 합니다.
맵이라고 하는 건, 특정 레인지에 있는 값을 다른 레인지로 변경하는 겁니다.
마우스 값은, 윈도우에서 설정이 되는 거죠.
윈도우 크기가 지금 1000바위 천이기 때문입니다.
왼쪽 상단 모서리가 0이고, 오른쪽 하단 모서리가 100콤마 100입니다.
그래서 마우스 좌표가 바뀌는데요.
지금 속도 값은 1000이 되면 너무 크겠죠?
그래서 속도 레인지는 얼마인지 모르겠는데, 그 속도 레인지만큼 마우스 레인지를 변경하겠다는 얘기입니다.
자, 코드를 좀 살펴보면, 잘 작성되어 있습니다.
그리고 지금 사이즈가 1000바위 천으로 바뀌었고요.
그리고 draw 함수 내에 배경이 검정으로 변경됐다고 코멘트를 다시 설명을 해줬고요, 그리고 여기 보면 map 함수가 있죠.
map 함수는 마우스 y 좌표를 활용하는 것 같습니다.
그래서 아래위에 마우스 좌표를 가지고 원래 레인지는 범위는 0에서부터 윈도우 화이트까지인데요, 이제 이 범위를 0.1에서 2로 변경시켰다는 제가 추가를 했었습니다.
그래서 ChatGPT로 코딩을 할 때는 항상 여러분들이 어느 정도 코드를 이제 테스트를 해보시고, 그게 괜찮다 싶으면 요청하면 됩니다.
하지만 또 매번 여러분들이 요청할 수도 있겠죠.
그런데 지금 아시다시피, 저치 pt가 유료라고 하더라도 캡이라는 게 있어서 워낙 사용자들이 많다보니까 아직 완벽하게 지원되지 않을 수도 있습니다.
하지만 이 부분은 이제 속도 등의 문제는 금방 해결될 것입니다.
그래서 이제 우리가 그렇다고 해서 안 쓰고 기다릴 순 없습니다.
지금 이렇게 빨리 변하는 인공지능 환경에서 열심히 테스트를 해서 준비가 됐을 때 더 멋진 작업을 해야 될 것 같습니다.
자, 그래서 잘 설명이 됐고요, 말씀드렸던 것처럼 마우스 y 좌표에 따라 떨어지는 속도가 변경이 되는데요, 너무 친절합니다.
여기 보면 마우스를 위쪽으로 이동할수록 떨어지는 속도가 느려지고, 아래쪽으로 이동할수록 빨라집니다.
구독 부탁드립니다.
이게 바로 인터랙티브 어플리케이션의 장점이고, 이런 반응형 컨텐츠가 이제는 앞으로 상당히 중요해지는 시대가 됐습니다.
인공지능 시대에서는 단순히 그 컨텐츠를 사람이 만드는 게 아니라, 이제는 컴퓨터가 지능적으로 만드는 것이고, 어떤 걸 만드느냐를 중요하게 생각하는 거죠.
그 데이터의 소스는 뭐고, 그 데이터가 어떤 알고리즘으로 어떤 컨셉으로 그렇게 구현이 됐는지를 사람들이 이제 관심을 갖게 될 겁니다.
단순히 영상을 제작해서 틀어 놓는 방식은 좀 한계가 있죠.
그게 영화는 괜찮습니다.
영화 자체가 없어지는 건 아니겠죠.
하지만 우리가 공간에 컨텐츠를 디스플레이 하는 상황에서는...
매번 같은 컨텐츠를 틀을 수 없다는 것은 이해하시죠?
그래서 인공지능과 이러한 인터랙티브 어플리케이션의 연결은 필수불가결합니다.
제가 마우스나 윈도우로 테스트를 보여드리지만, 프로액션 맵핑이나 대형 LED 디스플레이를 활용해서 공간의 디스플레이가 되면 상황은 달라집니다.
또한, 입력값도 마우스로 테스트하지만, 사람의 감성이나 목소리, 동작 등에 연결되면 다른 상황이 연출됩니다.
이에 대한 준비를 해야 할 것 같습니다.
오늘 오후다섯씨에는 여러분들과 함께 gpt4가 갖고 있는 코덱 능력을 테스트해봤고, 실망시키지 않고 한 번에 완성이 되었습니다.
다음에는 재밌는 실험을 함께 해보면 좋을 것 같습니다.
이상으로 오후다섯씨였습니다.

 

 

SMALL

[ English Summary ]

In this lesson, we'll learn how to utilize the GPT-4 model to develop an interactive application.
It's important to develop your ideas by sketching before writing code, and Processing is used with a variety of libraries.

We'll load an image and write code to make each pixel a pixel object, and use the update method to update the position of the pixels.
Before running, you'll need to prepare the image file and create a folder, and when you run the code, you'll have an interactive application where the pixels in the image fall to the floor and stack up.

Finally, you can reduce the number of pixels to improve execution speed.

 

 

 

[ English Full Text ]

Please like and subscribe.
Hello everyone.
In this episode, we'll be coding using the GPT-4 model.
The goal is to share a live coding experience.
I hope you'll join me to observe the results.
First, we'll access the GPT-4 model and work in the French window.
We are going to develop an interactive application utilizing processing.
It is important to create an application that is interactive.
You can develop an application that responds to different inputs from the user.
You can respond to mouse input, vocalized data through a sound microphone, big data values, etc.
These applications need to analyze data using AI and then convert it into visualizations.
Processing is useful for visualization tasks, spoken data, and even kinetic displays with data.
To install Processing, follow this link.
The next step is to create sketches to help you develop ideas for your interactive application.
Sketches on paper are meaningless, so it's important to continue to develop and test your application based on your sketches to finalize your output.
That's why all the programs we develop in Processing are called sketches.
I've also created an example file, and there's some important information.
Processing is said to work with a variety of libraries.
All the coding is the same.
It basically provides a library.
This library can be called different things.
It might be called an addon, it might be called an SLC.
They might be called plugins, but they all do the same thing.
You're providing a library of all the code that you provide in addition to the main program.
Processing has been around for a long time, and it has a very active community, so I would say it's a well-established library.
You can find all the relevant information at processing.
org for more information.
So, let's run the code.
I want you to load an image and write some code to make the image pixels fall to the floor.
The idea I want to show you is to load an image and have each of the pixels that make up that image fall to the floor.
For example, I'm envisioning the image turning into dust and being blown in a certain direction by the wind or by gravity, and I'm trying to implement that in code.
The processing code is coming together now.
If you look at the code, we've declared the variables that we want to load and store the image, and we've declared an array list of arrays to store the value of each pixel.
And then we've created a class called pixel to store it, and the pixel class has been auto-completed at the bottom here.
So inside the pixel class, we've created an x,y coordinate value to store the position of each pixel, and a color value to store the color.
And we have declared gravity and velocity variables to hold the gravity and velocity of each pixel.
It looks like it's done, which is a plus for GPT-4.
It summarizes the code after you write it, which is great.
The code loads the image and then makes each pixel into a pixel object, which is then stored as a class.
The pixel class stores the pixel's position, color, gravity, and velocity, and uses an update method to update the pixel's position.
This update method is executed over and over again every frame.Processing consists of two main functions.
One is the setup function, which runs only once when the program runs, and contains a number of values that need to be set, usually when the program first runs.
The most common is the size of the window.
And the value to load the image is also only loaded once, when the program is first run.
The same goes for extracting the pixels from the image and storing them in an array list. The draw function uses a loop to continuously update and display the pixel values.
Updating means that the position keeps changing.
Since the position values must keep changing every frame, we keep updating the XY values.To run this code, we need an image file.
Typically, the image file is located inside the data folder within the processing project files folder.
After running the program and copying and pasting the code into the Editor window, you will need to make one initial save to load the image.
We'll do this by pressing the Save control S or the command S.
Saving as a project called "Polling Pixel" will create a folder and a single processing file called "PollingPixel.pde" inside.
Note that the folder name and file name must be the same.
Subsequent processing files can be different, but the main file with the setup and draw functions must have the same folder name and file name.
Keep this in mind, and if you rename your files arbitrarily, Processing will take care of that, but you need to do it together.
The first time you save, the processing creates a folder and saves the file.
The next time you want to add an image, all you have to do is put an image called "image to load.jpg" into the "data" folder.
If you want to download an image from Google, you can download it and place it inside the data folder.
You may need to resize the image before running the program.
To modify the image and run it, simply click the arrow run button.
Now, if the code is written well, the "pixels" should stack up as they fall from the top to the bottom.
This stacking creates that colorful image.
To change the background to black, simply modify the "Background" part of the draw function to 0.
If you want to add RGB values, you can do so by putting three RGB values here.
Let's run it again.
Okay, what do you guys think?
The results of this code aren't too bad.
If you look at it now, it looks a little bit slow because there are so many pixels.
So to fix that a little bit.
I'm going to reduce the number of pixels a little bit more.
I'm going to reduce the number of pixels, and I'm also going to increase the size of the pixels a little bit and see what happens.
It's kind of like a speed calculation.
Let's see what happens when we reduce the number of pixels and increase the size of the pixels.
I'll ask that GPT to do that.
It's slow because there are too many pixels.
Can we improve that?
Now, I could tell you to actually reduce the number of pixels and increase the pixel size by the display size, but I'm also interested in how GPT4 is going to solve this problem.
So let's just ask it as it is.
Okay, the code is done.
Let's take a look at it.
Now, there are a couple of things we can do to improve the speed.
Here, I'm going to use the method of reducing the image resolution, increasing the pixel spacing to reduce the number of pixels.
This is kind of what I was thinking.
The main thing is to reduce the number of pixels.
To make it faster.
Okay, so I put in the part where I set the pixel spacing.
I'm going to set the pixel spacing here to 4.
So it's not storing all the pixels, it's storing the pixels in four intervals.
It's giving it a quarter.
Now, if you look here, the form is inside.
The image is now going to go through all the pixels, and instead of incrementing them one by one right away, it's going to increment the sash by the pixel size.
So it's going to decrease the pixel size by about a quarter.
And the gyro is the same.
So, let's see.
We've got a 4 on one side.
It's 4416, so it's a sixteenth.
That's right.
I'm not getting a quarter, I'm getting a sixteenth.
That's great.
That's a performance improvement.
And now how to draw the pixels.
I've changed from points to now rect.
And that's kind of what I was thinking now.
If we're going to do four spacing, we're going to have a blank space between the pixels.
So to fill that in, I drew a rectangle.
Obviously, the size of the rectangle is going to be four.
The pixel size was also declared above.
It's four.
So that's pretty well coded.
Now, what I'm saying is that this can be slow.
We can calculate the speed, but it can degrade the image quality.
What do I mean by degraded image quality?
Well, it means that the image might be one-sixteenth as many pieces, but it might be less detailed.
In other words, it becomes a little bit abstract.
And that's what I was going for.
And looking at the result, it looks like, as we're talking about here, we can adjust the pixel size.
We can make it bigger, we can make it smaller, we can set the pixel spacing that the processing has constrained, which is known as a comment, right?
So that's something that we can modify.
I'm going to copy the code, I'm excited.
Let's go ahead and paste it, run it.
Wow, what do you think, guys.
I think this background should be black.
This part, the window size should be 800 by 800.
And let's look at it again with the background black.
Okay, here.
Now this is fun.
It's funny.
It's funny, when I drew this rectangle, I used strokes.
What's a stroke? Well, when you draw a rectangle, you're just drawing a border.
I actually need to put a fill in here.
I need to put a fill function like this.
I need to fill it with a color.
Let's look at this again.
Yeah, it's much different.
That's cool.
Okay, so let's make this size four a little bit bigger.
Let's make this one an arm.
It's faster.
It's more fun.
All right, everybody.
Okay, let's take this one more time to a 16.
It's going to look like this.
Let's grow the brain to 32.
I'm saying it can continue to be an abstraction like this.
Guys.
And let's reduce this down even further.
Let's reduce it to 2.
Ah, that's nice.
Guys.
So we've reduced it by a quarter.
So it's a random interval.
I'm just giving it a quarter.
And it's still coming out at that speed.
I think we're going to be okay with this as a result.
Now, to fill the screen a little bit more, let's do it with a thousand instead of 800.
Isn't that cool?
What you're looking at is, we didn't just make a movie, we made software.
You can do software reactions.
I didn't put the reacting part in right now, but I'll put the reacting part in to show you a little bit more about the benefits of having an interactive software application.
Okay, here's the part where I did the hand editing.
I'm going to ask you to do all of that.
I want you to write the code to change the window size to cloth, change the background to black, fill the rectangle with color, and change the rate at which it falls based on the mouse.
Okay, I've changed the code as you said.
I'll change it right away.
Yes, the code is complete.
That's a nice change, isn't it?
We've changed the window size to cloth, we've set the background to black, and we've used a no-stroke to fill the rectangle with color.
A no-stroke means that you don't want to outline the border.
You can choose to do that or not, but I'm going to use the fill function to make sure that it's filled.
And to change the fall rate based on the mouse position, we used a map function.
When we say map, we're changing a value in a certain range to another range.
The mouse value is set by the window.
Because the window size is 1000 rocks right now.
The top left corner is 0, and the bottom right corner is 100 comma 100.
So the mouse coordinates change.
Now the velocity value is going to be 1000, which is too big, right?
So I don't know what the velocity range is, but it's telling me that it's going to change the mouse range by that velocity range.
So, if you look at the code, it's well written.
And now we've changed the size to 1000 rock cloth.
And inside the draw function, I've commented back that the background has changed to black, and then I've got a map function here.
The map function seems to utilize the mouse y coordinate.
So I've got the mouse coordinates down here, and the original range was from 0 to window white, and now I've added that I've changed the range from 0.1 to 2.
So whenever I'm coding with ChatGPT, I'm always looking for you guys to say, okay, here's some code, let's test it, and if you're happy with it, you can ask for it.
But you can also ask for it every time.
But as you know now, even if it's paid, there's something called a cap, so it might not be fully supported yet because there are so many users.
But that's something that's going to be addressed in the near future in terms of speed and things like that.
So now we can't just say that we're not going to use it and wait.
I think we're going to have to test it hard in this fast-paced AI environment and do something cooler when it's ready.
Okay, so that's good, and like I said, the fall rate changes based on the mouse y-coordinate, which is too kind.
So if you look here, the more you move the mouse up, the slower it falls, and the more you move it down, the faster it falls.
And that's it.
That's the beauty of interactive applications, and this kind of responsive content is going to be very important in the future.
In the age of artificial intelligence, it's not just a human creating that content, it's now a computer creating it intelligently, and it's about what it's creating.
What's the source of that data, what's the algorithm, what's the concept, what's the implementation of that data, that's what people are going to be interested in.
You can't just make a movie and put it on.
That's fine for movies.
It's not like movies are going to go away.
But in a situation where we're displaying content in a space...
you can't play the same content every time, right?
So the connection between AI and these interactive applications is indispensable.
I'm showing you a test with a mouse or a window, but it's different when it's a display in a space with behavioral mapping or a large LED display.
I also test inputs with a mouse, but it's a different story when they're connected to human emotions, voices, gestures, etc.
I think we need to be prepared for that.
This afternoon at 5:00, I tested GPT4's codec capabilities with you, and it didn't disappoint.
Next time we'll do some fun experiments together.
That's all for this afternoon.