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

✍ Scribed by David Matthew

• Publisher: Apress
• Year: 2024
• Tongue: English
• Series: Design Thinking
• Edition: 1
• Category: Library

✦ Synopsis

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.

WHAT YOU'LL LEARN:  

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

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 2: A Programming Primer
Syntax
Case Sensitivity
Spacing
Semicolons
Comments
Values
Numbers
Strings
Booleans
Empty Values
Variables
Operators
Arithmetic Operators
Comparison Operators
Logical Operators
Conditional Statements
Loops
The While Loop
The For Loop
Functions
Function Parameters
Invoking Functions
Scope
Anonymous Functions
Arrow Functions
Objects and Arrays
Arrays
Objects
Classes
Idiosyncrasies and Other Features
Null and NaN Weirdness
Secret Casting
Semicolon Uncertainty
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

✦ Subjects

Generative Art; Coding; Javascript; SVG; Scalable Vector Graphics; P5.js; Creative Coding; Graphery SVG; Programming; Graphics; Digital Art; Design Thinking