xxxxxxxxxx139
<html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Averia+Libre:ital@1&family=Bebas+Neue&family=Bungee+Shade&family=Rock+3D&family=Rubik+Puddles&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Epilogue&family=Faster+One&display=swap" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> <script src="https://munusshih.github.io/p5.zine/custom.js"></script> <script src="https://munusshih.github.io/p5.zine/zine.js"></script> <link rel="stylesheet" type="text/css" href="https://munusshih.github.io/p5.zine/custom.css" /> <meta charset="utf-8" /> </head> <body> <!-- <img src="cover.jpeg"> --> <div class="title"> <h1>GenZ(ine)</h1> <p> The workshop is taught by Iley Cao & Munus Shih<br /> in `code decolonized`<br />at Parsons School of Design </p> </div> <nav> <input type="button" value="*download jpg*" onclick="downloadJPG()" class="button" /> <input type="button" value="*download pdf*" onclick="downloadPDF()" class="button" /> <input type="button" value="*my zine*" onClick="document.getElementById('myCanvas').scrollIntoView();" class="button" /> <input type="button" value="*documentation*" onClick="document.getElementById('doc').scrollIntoView();" class="button" /> </nav> <div id="myCanvas"></div> <footer> <p> Our objective is to create a coded zine that focuses on digital identity. We will use P5.js to teach ‘function’ and generate a collaborative digital profile zine in the end. </p> <p> We created some customized functions for people to play with this zine more easily. </p> <hr /> <div id="doc"> <h2>*Cute Documentation*</h2> <div class="function"> <h3>background(), leftBackground(), rightBackground(), selfieBackground()</h3> <p> (R: <span>number(0-255)</span>, G: <span>number(0-255)</span>, B: <span>number(0-255)</span>) </p> <b>background(255, 255, 255)</b> </div> <hr /> <div class="function"> <h3>fullPage(), leftPage(), rightPage()</h3> <p>(material: <span>text or image</span>, offsetX, offsetY)</p> <b>fullPage(img1)</b><br> <b>leftPage('hi', 20, 20)</b> </div> <hr /> <div class="function"> <h3>randomLayout(), gridLayout(), glitchLayout()</h3> <p> (material: <span>text or image</span>, num: <span>number</span>, repeat: <span>number</span>, randomize: <span>boolean</span>) </p> <b>randomLayout([img1, 'hello'], 5, 5, true)</b> </div> <hr /> <div class="function"> <h3>textSet()</h3> <p> (font: <span>fontName</span>, size: <span>number</span>, alignment: <span>"left" or "right" or "center"</span>, line-height: <span>number</span>) </p> <b>textSet("Averia Libre", 20, "LEFT", 1)</b> </div> <div class="function"> <h3>*Fonts*</h3> <p>'Averia Libre'</p> <p>'Bebas Neue'</p> <p>'Bungee Shade'</p> <p>'Rubik Puddles'</p> <p>'Faster One'</p> <b>textFont('Faster One')</b> </div> <hr /> <div class="function"> <h3>randomColor()</h3> <p>(NOTHING) return: <span>[R,G,B]</span></p> <b>fill(randomColor())</b> </div> </div> </footer> <script src="./assets/zine.js"></script> <script src="./assets/custom.js"></script> <script src="sketch.js"></script> </body></html>