31:T522,md` The SVG code above creates "s"-shaped curves in the [SVG path language](https://www.w3.org/TR/SVG/paths.html). Each curve is defined by its **d**ata attribute, which begins with an absolute (x,y) coordinate starting point in pixels, where the imaginary pen is **M**oved to. \`control point and an end point to draw a smooth curve pulled to the left from the starting point and then back and down to the middle of the SVG artboard. Quadratic curves are cool, watch [this explainer video](https://www.youtube.com/watch?v=aVwxzDHniEw) to be mesmerized! ... \`Q250,100 400,200\` ... Another **Q**uadratic curve follows, which uses another control point to the right and a final end point to draw the rightwards-bending side of the curve. ... \`Q550,300 400,400" \` ... We then finish the tag and style the path. \`fill="none" stroke="blue" stroke-width="20" opacity="0.8" />\` All of these points can be connected as a control polyline to better visualize the relationship between the control points and the resulting curve. `32:Tb0b,33:T853,{ //svg variables const height = 500; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //visualization variables const spacing = 20; const strokeMinimum = 1; const strokeVariation = 100; const curvinessMinimum = 10; const curvinessVariation = 300; //list of random colors to choose from const colors = [ "red", "blue", "gold", "black", "black", "black", "beige", "white" ]; //loop to make each path for (let i = 0; i < width; i = i + spacing) { //create random settings for each path const curviness = Math.random() * curvinessVariation + curvinessMinimum; const strokeThickness = Math.random() * strokeVariation + strokeMinimum; //get random color from array //Math.random() gives random number between 0 and 1 //(Math.random() * colors.length) will give a random number between 0 and the number of items in an array //Math.floor() rounds decimal numbers down https://www.w3schools.com/Jsref/jsref_floor.asp //We round down with Math.floor(), because arrays start at index 0 const randomIndex = Math.floor(Math.random() * colors.length); //get random color from color array const randomColorFromArray = colors[randomIndex]; //build s-shaped path const curvyPath = "M " + i + ",0 Q" + (i - curviness) + "," + height * 0.25 + " " + i + "," + height * 0.5 + "Q " + (i + curviness) + "," + height * 0.75 + " " + i + "," + height; //draw path svg .append("path") .attr("d", curvyPath) .attr("fill", "none") .attr("stroke", randomColorFromArray) .attr("stroke-width", strokeThickness) .attr("opacity", 0.8) .attr("stroke-linecap", "round") //https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap .attr("stroke-miterlimit", 100); //https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit } //show visualization in Observable return svg.node(); }34:[] 2f:{"title":"Zach's Sol Lewitt Challenge","cells":[{"id":8,"value":"md`\n# Zach's *Sol Lewitt* Challenge\n\nBased on the work *Irregular Vertical Brushstrokes with Colors Superimposed*, 1993\n![sol lewitt](https://d32dm0rphc51dk.cloudfront.net/TAzOteh6x2WawJgZM17Dkw/large.jpg)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"''","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"``","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":240,"value":"(Note the trick above for [embedding javascript variables in an Observable HTML cell](https://observablehq.com/@observablehq/introduction-to-html))\n\nWe could take that same path-drawing instruction, and draw the same shape across the canvas just by incrementing the curve coordinate values up and down for each new curve by a set amount, and changing the stroke color.","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"$32","pinned":true,"hidden":false,"mode":"html"},{"id":266,"value":"But, those curve feel too similar, and also we need many more of them than we might want to type by hand! \n\nFurther, the curves end a bit too early, we can fix this with other SVG attributes such as [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap) and [`stroke-miterlimit`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit)!","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"-----\n### With Javascript! \nWe can ease the manual difficulty of creating generative images by using Javascript. We will talk about all of this in class for the remainder of the semester! ","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}