Generative Art with JavaScript and SVG: Utilizing Scalable Vector Graphics and Algorithms for Creative Coding and Design (Design Thinking)

✍ Scribed by David Matthew

• Publisher: Apress
• Year: 2024
• Tongue: English
• Leaves: 237
• Category: Library

✦ Synopsis

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.  

 

 

 

✦ Table of Contents

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: The Beginner’s Path
Why JavaScript and SvJs?
Introducing Scalable Vector Graphics
Native SVG
Generating SVG
Getting Set Up
The Code Editor
Node.js and NPM
Initializing and Installing SvJs
Scaffolding Our Sketches
Serving Our Sketches
Our First Generative Sketch
Summary
Chapter 3: All About SVG
The Parent SVG Element
The Viewport and ViewBox
Setting and Getting Values
Quicker Element Creation
Lines and Shapes
Rectangles and Squares
First Strokes
Circles and Ellipses
Lines, Polylines, and Polygons
Text and Titles
Definitions
Gradients
Patterns
Grouping and Reusing Elements
Summary
Chapter 4: Randomness and Regularity
Analogue and Digital Randomness
The SvJs Gen.random() Function
Elements Everywhere All at Once
Varying Color and Opacity
Varying Element Selection
Regular Grids
The Nested For Loop
A More Flexible Grid
Clip Paths and Color Palettes
Arrays of Colors
Clipping Our Content
Choice and Chance
The SvJs Gen.chance() Function
Chance in Action
Probability Distributions
Uniform Distribution
Gaussian Distribution
Pareto Distribution
Masking Our Content
Summary
Chapter 5: The Need for Noise
Random Limits
Making Noise
Noise Explained
The SvJs Noise Module
Into the Noise Matrix
A Noisy Grid
Mapping the Noise Values
Optimize with Style
Spinning Noise
Mapping and Constraining
Rotating and Translating
Summary
Chapter 6: The All-Powerful Path
The Path Element
D for Data
Path Commands
Starting and Ending a Path
Straight Lines
The Simple L
Horizontal and Vertical Varieties
Further Economies
Quadratic Bezier Curves
Control Points
A Smooth Shortcut
A Quadratic Slinky
Elliptical Arcs
Setting the Flags
Irregular Radii
Generative Arcs
Cubic Bezier Curves
Cubic Control Points
S for Symmetry
Organic Curves
An Easier Option
Summary
Chapter 7: Motion and Interactivity
Event Listeners
Event Types
Event Parameters
Triggering the SvJs Save Method
Creative Cursor Tracking
The SvJs trackCursor() Method
Interactive Ellipses
Programming Motion
CSS Keyframes
The SMIL Way
The Web Animations API
The requestAnimationFrame() Method
Methods Summarized
Collision Detection
Setting Boundaries
Initializing and Extending Our Shapes
Frame-by-Frame Calculations
Circularity
Slices of PI
Sine and Cosine
Animating Our Circles
Summary
Chapter 8: Filter Effects
Filter Fundamentals
The Ins and Outs
The SvJs createFilter() Method
The Filter Region
Filter Effects 101
Shadows
Coloring
Blending
Compositing
Noise and Distortion
Turbulence
Displacement
Creating a Cosmic Bubble
Lighting and Texture
Diffuse and Specular Lighting
Light Sources
Simulating Textures
Generative Textures
Summary
Chapter 9: The Generative Way
The Journey So Far
The Voyage Forward
Trigonometry
Fractals
Systems Simulations
Closing Comments
Index