interactive Plotly (Python)로 대화식으로 매듭을 그립니다. 이번에는 매듭(knot)을 Plotly로 3차원 공간상에 도시하고자 합니다. 매듭을 보여줄 때 필요한 최소한의 복습을 해 둡니다. 매듭(knot)이란 $S^3$ 에 구분 선형적으로 포함된 $S^1$ 를 가리킵니다. $S^3$ 는 $\mathbb{R}^3\cup\{\infty\}$ 로 간주했기 때문에, 포함된 $S^1$ 가 $\infty$ 를 포함하지 않으면 $\mathbb{ R}^3$ 에 포... 파이썬interactive매듭수학plotly Processing으로 간이 메타볼 코드나 소재는 모두 들어 있습니다. 매회 설정되는 테마에 따라 간단한 오리엔 후, 1시간 정도로 작은 작품을 각각 만들어 발표하고 끝나는 감자의 형식입니다. 지금까지의 테마는 「랜덤」으로 시작되어 「삼각 함수」, 「색」등이 있었던 것 같습니다. 모양이 변화하는 것을 만들고 싶다 이라레로 만든 SVG 등을 이용하면 화려한 외형으로 전개하기 쉽다. 제대로 연산하는 것은 무리이므로 초간이판으로 2... processinginteractive [CSS] Raise the Curtains Raise the Curtains 스크롤의 배경이 dark 에서 light 으로 바뀌고, 위에 있는 내용도 sticky position 일 때, light 에서 dark으로 바뀌는 효과를 말한다. 오직, HTML 과 CSS로만 구현을 해볼 것이다. css 변수를 만들어 , 나중에 필요에 따라 쉽게 변경할 수 있도록 세팅한다. A linear-gradient for the “split” bac... CSSinteractiveCSS Horizontal Scrolling of web page 수평 스크롤 효과를 구현하고 있으며, 사용자가 일반적으로 수직으로 스크롤을 해도 페이지가 수평으로 스크롤 된다. 주의해야 할 사항은, 사용자가 어떤 화면을 사용할지 알 수 없기 때문에 픽셀을 사용한 고정적인 사이즈 대신에 vw vh 라는 상대 단위를 사용한다. scrollWidth : scroll 되는 부분을 포함한 실제 요소의 너비값이다. scrollLeft : 스크롤 바 수평 위치 / R... CSSJavaScriptinteractiveCSS Water Wave Text text에 멋진 효과들을 넣으려면 대부분이 겹치기(?)를 활용하는 것 같아 보인다. 겹치기를 활용하면 유저에겐 하나의 텍스트처럼 보이지만 이 점을 활용해 눈에 보이는 하나의 텍스트에 겹쳐진 텍스트들로 효과를 주면 된다. text에 물결이 흐르는 애니메이션을 구현하기 위해서 clip-path: polygon()이라는 속성을 활용했다. 이 속성을 사용하면 value값으로 정한 지역내에서만 ele... interactiveinteractive
Plotly (Python)로 대화식으로 매듭을 그립니다. 이번에는 매듭(knot)을 Plotly로 3차원 공간상에 도시하고자 합니다. 매듭을 보여줄 때 필요한 최소한의 복습을 해 둡니다. 매듭(knot)이란 $S^3$ 에 구분 선형적으로 포함된 $S^1$ 를 가리킵니다. $S^3$ 는 $\mathbb{R}^3\cup\{\infty\}$ 로 간주했기 때문에, 포함된 $S^1$ 가 $\infty$ 를 포함하지 않으면 $\mathbb{ R}^3$ 에 포... 파이썬interactive매듭수학plotly Processing으로 간이 메타볼 코드나 소재는 모두 들어 있습니다. 매회 설정되는 테마에 따라 간단한 오리엔 후, 1시간 정도로 작은 작품을 각각 만들어 발표하고 끝나는 감자의 형식입니다. 지금까지의 테마는 「랜덤」으로 시작되어 「삼각 함수」, 「색」등이 있었던 것 같습니다. 모양이 변화하는 것을 만들고 싶다 이라레로 만든 SVG 등을 이용하면 화려한 외형으로 전개하기 쉽다. 제대로 연산하는 것은 무리이므로 초간이판으로 2... processinginteractive [CSS] Raise the Curtains Raise the Curtains 스크롤의 배경이 dark 에서 light 으로 바뀌고, 위에 있는 내용도 sticky position 일 때, light 에서 dark으로 바뀌는 효과를 말한다. 오직, HTML 과 CSS로만 구현을 해볼 것이다. css 변수를 만들어 , 나중에 필요에 따라 쉽게 변경할 수 있도록 세팅한다. A linear-gradient for the “split” bac... CSSinteractiveCSS Horizontal Scrolling of web page 수평 스크롤 효과를 구현하고 있으며, 사용자가 일반적으로 수직으로 스크롤을 해도 페이지가 수평으로 스크롤 된다. 주의해야 할 사항은, 사용자가 어떤 화면을 사용할지 알 수 없기 때문에 픽셀을 사용한 고정적인 사이즈 대신에 vw vh 라는 상대 단위를 사용한다. scrollWidth : scroll 되는 부분을 포함한 실제 요소의 너비값이다. scrollLeft : 스크롤 바 수평 위치 / R... CSSJavaScriptinteractiveCSS Water Wave Text text에 멋진 효과들을 넣으려면 대부분이 겹치기(?)를 활용하는 것 같아 보인다. 겹치기를 활용하면 유저에겐 하나의 텍스트처럼 보이지만 이 점을 활용해 눈에 보이는 하나의 텍스트에 겹쳐진 텍스트들로 효과를 주면 된다. text에 물결이 흐르는 애니메이션을 구현하기 위해서 clip-path: polygon()이라는 속성을 활용했다. 이 속성을 사용하면 value값으로 정한 지역내에서만 ele... interactiveinteractive