PixiJS for Artists - Sarah Sole (Ferguson)
PixiJS for Artists
In this workshop you will learn how to publish still images, frame animations, text, and audio/video elements on the web in unique and unusual ways. You will learn how to turn your browser into a stage on which elements move, interact, and change states. And you will learn how to incorporate whatever you create for this stage into an existing website or publish to a new site.
Who is this workshop for?
-Artists who want to create new works in the medium of the web and publish those works online.
-Artists who want to take full control of the presentation of their work online.
-Video artists (or artists who rely on video documentation of their work), who seek an alternative to third-party platforms (Vimeo, YouTube) for publishing their works.
-Artists working in frame animation who seek a simple and immediate way to animate frames in the browser and publish directly on a website.
-Artists who use Photoshop for digital composition and want to arrange layers, apply blend modes and/or animate layers in the browser and publish directly on a website.
A list of topics we will cover is below. Depending on the interest of the participants, certain topics may be skipped or emphasized. I have set up a website of “demos” to illustrate each topic here:[https://sarahsole.video/pixijs]
2. Animated Sprites (Frame Animation)
3. Cropping Textures
4. The Animation Loop (RAF)
5. Pixi Filters
6. Video Textures
7. GSAP Timeline
8. Animating Text with RAF
9. Animation Text with GSAP
10. Putting it all Together (Demo #1)
11. Blend Modes I
12. Blend Modes II
13. Pixi Graphics
14. Masking With Shapes
15. Masking With Sprites
We will be using a code editor and a dedicated browser on our laptops to run animations in realtime. I suggest “Visual Studio Code” for the code editor and Chrome or Firefox for the browser.
Visual Studio Code - [ https://tinyurl.com/ycovjc67]
Firefox - [https://www.mozilla.org/de/firefox/new/]
Once “Visual Studio Code” is installed, the extension called “Live Server” will also need to be installed. This can be done within “Visual Studio Code” under the menu item View —> Extensions. Search “Live Server” and follow the instructions to install.
4 applications needed
program is supported by funds of the
European Social Fund (ESF)
These subsidies are the basis for low participation fees and for the lecturers’ fees.
Therefore, prior to the event each participant must provide
some personal information, confirmed with a signature.
A multiple-choice test is an integral part for the ESF-evaluation purposes.
All your data are subject to data protection and passed on depersonalised to the
responsible ESF administration in order to fulfil the evaluation and reporting obligations.