Tag Archives: ANIMATIONS

Front End, Programming

LIVE 2D EXAMPLE

Leave a comment

#32 LIVE 2D EXAMPLE

Live2d

Live2D is also the name of an eponymous animation software series employing the technique and the software’ developer company, created by Japanese programmer Tetsuya Nakajo.

The software, and its underlying technique, enable users to animate their illustration by providing an illustration prepared in layered parts that constitute the original illustration, such as its eyes, mouth and arms, and stitch the parts on a skeleton to generate animation. The Live2D Ltd. provides the software and SDKs under commercial licenses and for free.

Live2D has been used in a wide variety of video games, visual novels, virtual YouTuber shows, and other software. Well known examples includes FaceRig, Nekopara, Azur Lane,and Tsukino Mito [ja], a virtual avatar and YouTube celebrity from Nijisanji [ja]’s facial motion capture app.

Live2d Example
live2dDownload
Front End, Programming

CIRCLE COLORS IN JAVASCRIPT

Leave a comment

#14 CIRCLE COLORS IN JAVASCRIPT

Circle Color Example

Beautiful circles are formed while the mouse is moving inside your browser. This short bit of code uses the D3.js library also known as the Data Driven Documents JavaScript library.

D3 examples

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3 examples

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

In this case D3 was used to display colorful circular animations behind the mouse while it moves over the browser window.

Take a look at the EXAMPLE GALLERY for more examples.

circlecolorsDownload