Creative Coding Tutorial : Moving Gradient with JavaScript

Поделиться
HTML-код
  • Опубликовано: 25 авг 2024

Комментарии • 59

  • @vivioolet5218
    @vivioolet5218 3 года назад +5

    와 11분의 영상이지만 얼마나 많은 고민과 공부가 들어있는지 감도 안 잡힐정도네요. 좋은 정보 이렇게 오픈해주셔서 감사합니다.

  • @user-og8gb2td4v
    @user-og8gb2td4v 4 года назад +26

    캔버스, 단순히 그림판 정도로만 생각했는데 활용도가 엄청나네요... 선입견을 깨주셔서 감사합니다. 콘텐츠들 넘 좋아요 :)

    • @cmiscm
      @cmiscm  4 года назад +7

      감사합니다 :)

  • @user-uy5sk5mw6b
    @user-uy5sk5mw6b 3 года назад +12

    그라데이션이 특별한 방법이 아니라, 큰 물체에 blur 처리를 한 뒤 겹쳐보이는 모습을 이용해 구현하는 거군요.. 감사합니다

  • @anmolchauhan210
    @anmolchauhan210 2 года назад +4

    Thank you so much sir for this video... I was literally searching this effect for weeks and you just guided me with uploading your work...

  • @enpp65
    @enpp65 4 года назад +4

    진짜 이런 자료 너무너무 좋습니다

  • @user-xn5ys3xu9p
    @user-xn5ys3xu9p 3 года назад +1

    앞에 두개 강의로 깔끔하게 설명해주셔서 바로 이해가되네요 가르치시는것도 천재이신건가요ㅎㅎㅎ 좋은 콘텐츠 감사합니다👍

  • @user-js6jh5uk7g
    @user-js6jh5uk7g 3 года назад +1

    취준생 때 인터랙티브 디벨로퍼라는 책을 읽고 개발자가 되겠다는 꿈을 키웠습니다. 정작 지금은 사용자 경험과는 거리가 있는 종류의 개발을 하고 있지만, 이 영상을 보니 그때 생각이 나네요. 다시 뵙게되어 반갑습니다! 자주 들릴게요

  • @복을불러오는채널
    @복을불러오는채널 3 года назад +2

    돈주고도 못배울 귀한 강의네요 정말 감사드립니다 ㅠㅠ. 좋은강의 계속 열심히 듣겠습니다!

  • @drama_xxxx
    @drama_xxxx 3 года назад +6

    창의적인 디자인도 잘하시고,, 코딩도 그냥 짜는 코딩이 아니네요. 확장성을 염두한 디자인적인 코딩까지. ㄷㄷ

  • @nohyulpark727
    @nohyulpark727 3 года назад +2

    감사합니다. 덕분에 어떤식으로 이러한 페이지가 만들어지는 지 깨달았습니다.

  • @rain-bn9vf
    @rain-bn9vf 4 года назад +1

    너무 좋습니다 자주올려주세요!!

  • @dongbalja
    @dongbalja 3 года назад

    캠퍼스에 선입견을 깨주셔서 감사하고, 많은 인터렉티브 영상을 보면서 저 나름대로의 조그만 목표가 생겼습니다. 앞으로도 좋은영상 많이 만들어 주시기 바랍니다!

  • @user-wg3go9gn3y
    @user-wg3go9gn3y 3 года назад +4

    여러번 처음부터 따라하는 중인데..왜 저는 아예 그려지지 않을까요..ㅜㅜ 혹시 다운로드 링크 다시 살릴 수 없을까요?

  • @user-fs7yn4cx3d
    @user-fs7yn4cx3d 4 года назад +1

    오늘도 멋진영상이군요

  • @windseeking8300
    @windseeking8300 3 месяца назад

    You saved my life

  • @RohanAdvaniRaju
    @RohanAdvaniRaju 3 года назад +1

    Didn't understand a word, but liked the music, video liked! ;)

  • @ThankYouESM
    @ThankYouESM Год назад

    Thank You... and I actually got ChatGPT to create a version of this that works without any imports!

    • @gru7282
      @gru7282 Год назад +1

      What did you ask ChatGPT? I’m not getting it to work.

  • @giuliobordignon
    @giuliobordignon 3 года назад +1

    Beautiful effect! Thanks for sharing!
    I noticed that the speed of the animation (the motion of the circles) is related to the scale of the circles. There is a way to control the speed of them indipendently from their scale? For example, can I have big circles with a pretty fast speed of animation?
    Thanks a lot in advice!

  • @streamarchiving
    @streamarchiving 3 года назад +2

    실행에서 다소 문제가 있었지만 따라 만들수 있었습니다! ㅎㅎ
    영상과는 다르게 제 컴퓨터에서는 렉 걸리듯이 느리게 동작하고 블러 사이가 조금씩 깨져서 보이네요 해결방법 찾아봐야겠어요
    좋은 강의 감사합니다~!

    • @sanghyukseo1498
      @sanghyukseo1498 3 года назад +1

      @원대석 이미 해결하셨겠지만,, 작은 따옴표가 아니라 ` 를 사용하셔야합니다.

    • @BluMood
      @BluMood 2 года назад +1

      @@sanghyukseo1498 와 대박.. 덕분에 1시간 동안 찾아보다가 댓글보고 고쳐갑니다
      감사합니다

    • @sanghyukseo1498
      @sanghyukseo1498 2 года назад +1

      @@BluMood 9개월 전인데,, 이렇게 도움이 되다니 다행이네요! ㅎㅎ

  • @user-no1oe2rg1v
    @user-no1oe2rg1v 3 года назад

    공부시작했습니다 ㅎㅎ

  • @eotikurac
    @eotikurac 3 года назад

    fantastic

  • @joshuaburcham9987
    @joshuaburcham9987 3 года назад +1

    This is very cool. Is this related to a blog post or tutorial anywhere else?

  • @samdasoo7916
    @samdasoo7916 4 года назад +1

    잘봤습니다 종민님

  • @gathertown
    @gathertown 3 года назад

    이걸 이렇게... 감사합니다 :)

  • @ch-qq6uv
    @ch-qq6uv 3 года назад +1

    아..너무 좋다

  • @lushprod
    @lushprod Год назад

    Does anyone have the complete code? written out? would be great! great tutorial!

  • @CedricMarcoux-nu3ts
    @CedricMarcoux-nu3ts Год назад

    Am i the only one that happens to? But once everything is loaded all the shapes seems to disappear the bottom and to the right of the screen.

  • @eryou
    @eryou 3 года назад

    The code is awesome, the bgm is awesome too. so what is the bgm?

  • @user-wg3go9gn3y
    @user-wg3go9gn3y 3 года назад +3

    마냥 따라 해보고 있는데..저는 왜 그냥 흰 화면인지 모르겠어요..계속해서 따라 적는중입니다ㅋㅋㅋㅋ언젠간 제가 이해가 되겠지요

    • @fernandoeliasdiazacosta7070
      @fernandoeliasdiazacosta7070 3 года назад +1

      나는 같은 문제가 있었다, 나의 오류는 "반경"의 구문에 있었다 /// I had the same problem, my error was in the syntax of the "radius"

    • @user-wg3go9gn3y
      @user-wg3go9gn3y 3 года назад

      @@fernandoeliasdiazacosta7070 Thank you so much for translating and answering directly!
      I'll try harder!
      Thank you. /// 직접 번역하여 답변까지 해주셔서 정말 감사합니다!
      더 열심히 해보겠습니다!
      감사합니다

    • @user-wm7sz8jq8q
      @user-wm7sz8jq8q 2 года назад

      저도 같은 현상인데 혹시 해결하셨나요? ㅜㅜ

    • @user-wg3go9gn3y
      @user-wg3go9gn3y 2 года назад

      @@user-wm7sz8jq8q 아니요..결국 못했습니다..혹시 해결되시면 알려주세요

    • @user-wg3go9gn3y
      @user-wg3go9gn3y 2 года назад

      @@user-wm7sz8jq8q 다시 해보았는데 이젠 나와요 저의 문제는 glowparticle.js 파일에서 억음 부호(`)를 따옴표(')로 적어서 안나왔던거 같아요
      근데 이젠 써클이 위쪽에 닿일때 튕기지 않고 붙어서 왼쪽으로 이동하며 깜박이는 에러가 나타나네요..

  • @creadigma360
    @creadigma360 2 года назад

    I followed yout tut but my circles only appears on windows load then they leave the window, and I don't see them anymore :(

  • @inspiration8936
    @inspiration8936 3 года назад

    예술적

  • @eotikurac
    @eotikurac 3 года назад

    i used only 4 gradients and it was very choppy on mobile :(

  • @creadigma360
    @creadigma360 2 года назад +2

    Awesome, do you have a repository of this? (or like a code pen or something like that) it'd be great if you share it, I just founded this after looking at current stripe landing page, so beautiful!

  • @marionschneider8020
    @marionschneider8020 2 года назад

    Hi ! Great visuals !! Would you be willing to share the code ? Would be an amazing starting point for a project I want to do.

  • @swl2664
    @swl2664 3 года назад

    2021.5.18 Clone Coding Clear!

  • @xsweetcupcake12
    @xsweetcupcake12 2 года назад

    사랑해요

  • @mici2567
    @mici2567 2 года назад

    hey great tuto ! can i have the github code please ?

  • @BaekJames85
    @BaekJames85 Год назад

    23.06.08 Clone Coding Clear!

  • @pixelbrushio
    @pixelbrushio 2 года назад

    The g.addColorStop(1, `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, 0)`); line does not render transparent for me, just renders white and fully opaque. Any tips on why?

  • @youaregay
    @youaregay Год назад

    8:24 for myself