Generative Art with JavaScript and SVG

ISBN-13: 9798868800856 / Angielski / Miękka / 2024

David Matthew

Opis

This book introduces you to the exciting world of generative art and creative coding through the medium of JavaScript and Scalable Vector Graphics (SVG). Using tried and trusted techniques, you’ll tackle core topics such as randomness and regularity, noise and naturalistic variance, shape and path creation, filter effects, animation, and interactivity.In the process you’ll learn SvJs, a JavaScript library that closely mirrors the SVG spec and makes scripting SVG intuitive and enjoyable. You’ll also study the craft of generative art and its creative process, along with JavaScript fundamentals, using modern ES6+ syntax. Each chapter will build upon the previous one, and those completely new to programming will be given a primer to help them find their feet.Generative Art with JavaScript and SVG will take you on a fun journey, peppered with plenty of sketches throughout, designed not only to explain, but to inspire. You Will: • Structure and randomise compositions.• Understand the different types of randomness and their probability distributions.• Create organic variance with the SvJs Noise module. • Apply SVG filter effects in a generative fashion.• Explore different approaches to animating with SVG.• Make your compositions dynamic and interactive. WHO IS IT FOR:  Web developers and designers and  creative coders with an interest in digital and generative art  as well as artists who are interested in learning to code with JavaScript.     

Spis treści

Chapter 1: The Beginner’s Path

Chapter Goal: Introduce the material, the aims of the book, provide some background and get the reader set up and ready to code. End with a relatively simple sketch that illustrates programming concepts which will be covered in the next chapter.

Sections:

• Introduction
• Why SVG and JavaScript? Libraries we’ll use
• Getting Set Up: Local Code Editor or Online Codepens
• Jumping Right In: Our First Generative Sketch

Chapter 2: A Programming Primer

Chapter Goal: Dissect our aforementioned sketch, equipping the reader with the necessary concepts. While this isn’t an introductory book on programming, this section should aid those just starting out (e.g. artists new to coding), or help solidify concepts for beginner programmers. Readers coming from another language or framework might also find this section worth a glance.

Sections:

• Dissecting our Sketch
• Variables and Datatypes
• Operations
• Conditionals
• Loops
• Functions

Chapter 3: All About SVG

Chapter Goal: Cover the basics of the SVG spec via the use of the gySVG library. Illustrate with simple but attractive sketches (power in simplicity).

Sections:

• Basic Shapes and Colours
• Lines, Polylines and Polygons
• Groups, Gradients and Patterns
• The Viewbox and Viewport
• Defining and Recycling Elements

Chapter 4: Regularity and Randomness

Chapter Goal: Show the power inherent in randomness, and illustrate some popular techniques.

Sections:

• Regular Grids
• Randomising Sizes
• Randomising Colours
• Randomising Conditions
• Probability Distributions

Chapter 5: The Need for Noise

Chapter Goal: Sometimes random can be too random. This is where noise comes in (specifically, simplex noise). More natural variance can lead to more usable and pleasing results.

Sections:

• Random vs Organic Variance
• Varying Sizes with Noise
• Varying Colour with Noise
• Disturbing a Straight Line

Chapter 6: Interactivity & Animation

Chapter Goal: So far our examples have been static. Time to change this up with some user interaction and basic animation. The reader will be introduced to popular techniques to make sketches dynamic and interactive.

Sections:

• Event handlers
• Tracking the cursor
• Mapping Ranges
• Interactive Shapes
• Animation frames
• Moving Shapes

Chapter 7: Paths

Chapter Goal: SVGs paths are a tricky subject, which is why they deserve a dedicated chapter. This will lead the reader through the possibilities and challenges of using paths, and end with some easier ways of achieving similar results.

Sections:

• Path Commands
• Connecting Straight Lines
• Quadratic Bezier Curves
• Cubic Bezier Curves
• The Arc
• An Easier Way

Chapter 8: Filter Effects

Chapter Goal: Introduce the reader to SVG filters. This topic of filters is vast and warrants its own book, so only the basics will be covered. The goal will be to excite the reader about the possibilities, and equip them for further exploration.

Sections:

• The Very Basics
• Shadows and Blurs
• Creating Film Grain
• Creating a Paper Texture
• Underwater Effects
• Further Explorations

Chapter 9: Trigonometry Time

Chapter Goal: Introduce the reader to the basics of trigonometry, assuming no mathematical background or aptitude (neither will really be necessary). The goal is to show how a very small subset of trigonometry can be enormously useful to generative art, and fun! It should also equip the reader for the following chapters.

Sections:

• Cartesian and Polar Co-ordinates
• Angles, Degrees and Radians
• Pi and the Pythagorean Theorem
• Sine and Cosine
• Making Waves
• Making Mandalas
•  Spirals and Stars

Chapter 10: Flow Fields

Chapter Goal: Introduce the reader to this popular and very beautiful generative technique. It will build on knowledge acquired in the previous chapter.

Sections:

• Introducing Vectors
• Location and Direction
• A Grid of Angles
• Varying the Vectors
• Connecting the Dots

Chapter 11: Packing and Path-Finding

Chapter Goal: Build on the previous chapters and introduce the reader to circle packing and path-finding techniques. I will opt for algorithms that are as simple as possible here, and not burden the reader with performance or efficiency considerations.

Sections:

• Distributing Shapes
• Collision Detection
• Circle Packing
• Goals and Directionality
• Patterns along Paths

Chapter 12: Fractal Forms

Chapter Goal: The final chapter will introduce the reader to one of the most fascinating of generative techniques: fractals. Using popular algorithms, the reader will be shown how complex forms can emerge from simple rules.

Sections:

• Recursion and Self-Reference
• Infinite Triangles
• From Lines to Snowflakes
• Planting Fractal Trees
• Breaking Symmetries

O autorze

​David Matthew is a web developer, designer and musician with over 11 years of industry experience who is passionate about generative art and web development, music visualization and  in particular, SVG and the often untapped potential it offers. 

David blogs on topics including JavaScript, CSS WorldPress and creative coding  and as a regular producer of generative art, he showcases his work on his Instagram page: instagram.com/davidmatthew_ie 

Blurb

This book introduces you to the exciting world of generative art (artwork that are solely or partially created with the use of an autonomous system) through the medium of SVG and JavaScript. More specifically, it will teach the use of Graphery SVG (gySVG), a JavaScript library that closely mirrors the SVG spec and makes scripting SVG very intuitive and enjoyable. Armed with gySVG, the reader will be taught tried and trusted techniques in producing generative imagery. Each chapter will build upon the previous one, and those completely new to programming will be given a primer to help them find their feet.

Beginning with a simple generative sketch that illustrates, and then explains, fundamental programming concepts - such as variables, data types, operators, loops, conditionals and functions - the reader will go on to explore the power of Scalable Vector Graphics, how to play with randomness and regularity, how to use noise to create organic variance, and how to make sketches interactive and dynamic. More advanced topics will then be tackled, such as paths, filter effects, trigonometry, shape packing, flow fields and fractals.

It will be a fun journey, easy to follow, peppered with plenty of attractive sketches throughout. The goal will be to visually inspire readers with compelling examples of what’s possible - rather than bare-bones, make-do illustrations - thereby breathing life into the underlying theoretical concepts.

you will learn:

• What generative art is and its creative process
• How to use the gySVG library locally with Node.js or online via Codepen
• To consolidate JavaScript fundamentals, using modern ES6+ syntax
• Create a variety of SVG shapes generatively
• Create iterative variations of sketches by randomizing parameters
• How to use noise to create organic variance
• Create complex SVG paths generatively
• How to make sketches interactive