Custom shapes & curves Week 5 Marko Řeháček & Megi Kejstová rehacek@mail.muni.cz, makej@mail.muni.cz GENERATIVE DESIGN PROGRAMMING Custom shapes GENERATIVE DESIGN PROGRAMMING The commands CUSTOM SHAPES beginShape() vertex(x1,y1) vertex(x2,y2) vertex(x3,y3) vertex(x1,y1) … endShape() // or endShape(CLOSE) Example -> GENERATIVE DESIGN PROGRAMMING beginShape( TYPE ) - POINTS - LINES (makes line between pairs of points, e.g. 1—2 3—4… it’s dashed) - TRIANGLES - TRIANGLE_STRIP … more in reference of beginShape Shape types CUSTOM SHAPES GENERATIVE DESIGN PROGRAMMING Creates vertex for curve of shape (only possible inside beginShape()/endShape() without beginShape parameter ) beginShape() curveVertex(x,y) // or curveVertex(x,y,z) endShape() You need at least 4 curveVertex() to draw curve between 2. and 3. point - adding fifth point will draw curve also between 3. and 4. point … Curve CUSTOM SHAPES Example -> GENERATIVE DESIGN PROGRAMMING Create negative shape within shape. Only possible inside beginShape() / endShape() sequence. beginShape() // create shape in clockwise order beginContour() // inner shape in counter-clockwise order endContour() endShape() Contour CUSTOM SHAPES Example -> GENERATIVE DESIGN PROGRAMMINGCUSTOM SHAPES Behance GENERATIVE DESIGN PROGRAMMING p5.Vector Vectors const v = createVector(x, y, [z]) // v.x returns x coordinate // v.y returns y Many methods available - set() to change x, y without creating new vector - add() to add two vectors, or add scalar - array() access as array instead of object - random2D() create random vector … reference page with more methods GENERATIVE DESIGN PROGRAMMING Array OOP TODO push for of lrngth collection of related data. array : [ “some”, “text”, “for”, “example” ] Example -> GENERATIVE DESIGN PROGRAMMINGCUSTOM SHAPES Blob maker Create a shape using mouse clicking. ❏ create an array, which will store vertices (points) of the shape ❏ on click, use createVector() to save current position into the array as a p5.Vector ❏ draw curves using beginShape()-endShape() sequence from the points in the array Finished code -> GENERATIVE DESIGN PROGRAMMING OOP in JS GENERATIVE DESIGN PROGRAMMING Object OOP A collection of related data. let object = { number : 100, string : “Hello”, array : [ “some”, “text”, “for”, “example” ] } Example -> GENERATIVE DESIGN PROGRAMMING A collection of related data and functionality. class Object { constructor() { this.number = 100; this.string = “Hello”; } addToNumber(){ this.number += 10; } addWorld(){ this.string += “world”; } } Class OOP Example -> Example 2 -> GENERATIVE DESIGN PROGRAMMING Blobs as classes OOP ❏ turn blob from previous sketch to BlobbityBlob class (cannot name it Blob, it clashes with builtin JS class) Starting code -> class BlobbityBlob { points = []; addPoint(x, y) { … } draw() { … } } GENERATIVE DESIGN PROGRAMMING const arr = ['a', 'b', 'c']; arr.forEach(element => console.log(element)); // "a" // "b" // "c" arr.filter(e => e !== "b"); // ["a", "c”] example: Remove unwanted elements from array. JS lambdas: forEach, filter, find OOP Find object by its property: const fruits = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: 5 } ]; fruits.find(f => { return f.name === "cherries" }); // OR this one-liner fruits.find(f => f.name === "cherries"); GENERATIVE DESIGN PROGRAMMING → The series "perlinScape 2021" emerged from the initial linear noise structures, from sinuous and organically warping waves, an increasingly refined compositional structure, a pictorial motif, the apparent motif "landscape". a gently undulating landscape, which can be found in the German Erzgebirge area of my childhood as well as around my current place of residence in Brandenburg. IMAGE CURVES perlinScape 2021 Holger Lippmann, 2021 Behance GENERATIVE DESIGN PROGRAMMING → IMAGE CURVES 60 Abstract Waves Artem Ottoson, 2022 Behance GENERATIVE DESIGN PROGRAMMINGCURVES GENERATIVE DESIGN PROGRAMMING GENERATIVE DESIGN PROGRAMMING → IMAGE Occlusion Based Isolines Procedure Pascal Beeckmans CURVES Behance GENERATIVE DESIGN PROGRAMMING → IMAGE Joy Division album inspired Marko Řeháček CURVES GENERATIVE DESIGN PROGRAMMING Polar coordinates If you travel through noise map in a circle, you end up in the same position. CURVES W03 lecture -> 2D noise Example -> GENERATIVE DESIGN PROGRAMMING Moiré CURVES “Usually considered a mistake in printing technology, but desirable for us. By laying one graphic grid over another identical grid and moving it, you can generate unexpected optical illusions that you can change in real time.” Images and text from the book Generative Design: Visualize, Program, and Create with JavaScript in p5.js, Benedikt Groß Hartmut Bohnacker Julia Laub Claudius Lazzeroni GENERATIVE DESIGN PROGRAMMINGCURVES Puddle Builder by Andreas Gysin and Sidi Vanetti GENERATIVE DESIGN PROGRAMMING → DYNAMIC TYPE CREATIVE CODING EXPLORATIONS II Andreion de Castro Behance TYPOGRAPHY GENERATIVE DESIGN PROGRAMMING → DYNAMIC TYPE, WEB Personal website Marina Cardoso Behance TYPOGRAPHY GENERATIVE DESIGN PROGRAMMING → TYPE Code-Type Kyuha Shim CURVES Code & type website GENERATIVE DESIGN PROGRAMMING → TYPE Caligraft Ricard Marxer CURVES SIGGRAPH GENERATIVE DESIGN PROGRAMMING Noisy curves OOP ❏ use noise with curves ❏ generate 5 ideas from constraint generator: pick 1 or 2 and use them ❏ don’t forget to pick good harmonic colors / maybe start with B&W GENERATIVE DESIGN PROGRAMMING Creative constraints https://creative-constraints.surge.sh/#/en HW2 GENERATIVE DESIGN PROGRAMMING Sketches from all classes available at https://editor.p5js.org/mrehacek/collections/Y7yY_s7PN