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

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