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

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 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 This book introduces you to the exciting world of generative art (artworkthat are solelyor 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 whats possible - rather than bare-bones, make-do illustrations - thereby breathing life into the underlying theoretical concepts. WHAT YOU'LL Generative art is and its creative processHow to use the gySVG library locally with Node.js or online via CodepenConsolidation of JavaScript fundamentals, using modern ES6+ syntaxCreating a variety of SVG shapes generativelyCreating iterative variations of sketches by randomizing parametersUsing noise to create organic varianceCreating complex SVG paths generativelyHow to make sketches interactive WHO IS IT 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. 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. 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 sketches interactive WHO IS IT FOR:Web developers and designers and creative coders with an interest in digital and generative art, artists who are interested in JavaScript