/ Thu, 16 Dec 2021 17:30:59 +0000 Thu, 16 Dec 2021 17:30:59 +0000 Jekyll v3.4.0 <p>I’ve been thinking about this picture a lot the past few days. I just find it really striking because, you really feel how loved this creature is, in its every aspect. If it were not loved, it would look very different, possibly repulsive even, maybe like a golem or something.</p> <p>The effect of love on external appearance is almost like testosterone or estrogen in how they affect secondary sexual characteristics—you can feel that this content fat little goblin is dearly loved, and that love has permeated all of its cells and shaped it to be so endearing and “babymode”. The heart-shaped locket around it’s neck is kind of a literal visual symbol of that love. The way it looks at the camera radiates secure love, a calm expectation of it, like it already knows it will be kissed on its little head once the person puts their phone/camera down.</p> <p>Ive been thinking about this hamb a lot because its so representative of the kind of feedback loop of love— it is loved because it is lovable, but it’s lovable because it is loved. It can be loved because it knows how to “be” loved, because it was loved. This is an aspect of the interactions of all things, not even necessarily living. A thing that hasn’t known love doesn’t know how to “be” loved, and people don’t know how to love it either, because love is like a dirt path that people trample in the grass getting to their destination repeatedly—actually called a “<a href="https://en.wikipedia.org/wiki/Desire_path">desire path</a>“—a mathematical attractor system set in motion. And i think about how people and animals and “places” and “things” exist outside of this system of attractors until someone sufficiently loves them enough for them to be “initiated” into this system. In a way this makes me very sad, but it’s also kind of beautiful too. So it feels very special and poignant to see something so permeated with love.</p> <p><img src="/assets/img/loved_hamb.jpg" alt="Loved Hamb" class="tall-img-full" /></p> Wed, 15 Dec 2021 00:00:00 +0000 /misc/hamb-of-love /misc/hamb-of-love musings cats blog <p>Yesterday I decided to check out p5.js, a javascript library for building graphics and visualizations, and it seems really intuitive and cool! One of the things I looked at was <a href="https://p5js.org/examples/simulate-l-systems.html">L-systems</a>.</p> <p><br /></p> <div id="canvas1"></div> <p><br /></p> <p>L-systems can be used to procedurally generate/render a bunch of really cool stuff like realistic looking trees and other natural phenomena, but im a noob so i’m just playing around with the geometric algorithm that’s provided in the p5.js example project.</p> <p>Apart from the fact that the resulting shape sort of resembles the silhouette of my neighbor totoro, there’s something else that’s interesting about this shape! <br /></p> <div id="canvas2"></div> <p><img src="https://cdn1.thr.com/sites/default/files/imagecache/landscape_928x523/2017/06/screen_shot_2017-06-02_at_11.31.04_am_0.png" alt="totoro" /></p> <!-- Scripts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script> <script> // TURTLE STUFF: let x, y; // the current position of the turtle let currentangle = 0; // which way the turtle is pointing let step = 20; // how much the turtle moves with each 'F' let angle = 90; // how much the turtle turns with a '-' or '+' // LINDENMAYER STUFF (L-SYSTEMS) let thestring = 'A'; // "axiom" or start of the string let numloops = 5; // how many iterations to pre-compute let therules = []; // array for rules therules[0] = ['A', '-BF+AFA+FB-']; // first rule therules[1] = ['B', '+AF-BFB-FA+']; // second rule let whereinstring = 0; // where in the L-system are we? function setup() { var canvas = createCanvas(710, 400); background(255); stroke(0, 0, 0, 255); canvas.parent('canvas1'); // console.log(createCanvas); // start the x and y position at lower-left corner x = 0; y = 400; // COMPUTE THE L-SYSTEM for (let i = 0; i < numloops; i++) { thestring = lindenmayer(thestring); } } function draw() { // draw the current character in the string: drawIt(thestring[whereinstring]); // increment the point for where we're reading the string. // wrap around at the end. whereinstring++; if (whereinstring > thestring.length-1) whereinstring = 0; } // interpret an L-system function lindenmayer(s) { let outputstring = ''; // start a blank output string // iterate through 'therules' looking for symbol matches: for (let i = 0; i < s.length; i++) { let ismatch = 0; // by default, no match for (let j = 0; j < therules.length; j++) { if (s[i] == therules[j][0]) { outputstring += therules[j][1]; // write substitution ismatch = 1; // we have a match, so don't copy over symbol break; // get outta this for() loop } } // if nothing matches, just copy the symbol over. if (ismatch == 0) outputstring+= s[i]; } return outputstring; // send out the modified string } // this is a custom function that draws turtle commands function drawIt(k) { if (k=='F') { // draw forward // polar to cartesian based on step and currentangle: let x1 = x + step*cos(radians(currentangle)); let y1 = y + step*sin(radians(currentangle)); line(x, y, x1, y1); // connect the old and the new // update the turtle's position: x = x1; y = y1; } else if (k == '+') { currentangle += angle; // turn left } else if (k == '-') { currentangle -= angle; // turn right } // give me some random color values: let r = random(128, 255); let g = random(0, 192); let b = random(0, 50); let a = random(50, 100); // pick a gaussian (D&D) distribution for the radius: let radius = 0; radius += random(0, 15); radius += random(0, 15); radius += random(0, 15); radius = radius / 3; // draw the stuff: fill(r, g, b, a); ellipse(x, y, radius, radius); } </script> <script> // TURTLE STUFF: let x, y; // the current position of the turtle let currentangle = 0; // which way the turtle is pointing let step = 20; // how much the turtle moves with each 'F' let angle = 91; // how much the turtle turns with a '-' or '+' // LINDENMAYER STUFF (L-SYSTEMS) let thestring = 'A'; // "axiom" or start of the string let numloops = 5; // how many iterations to pre-compute let therules = []; // array for rules therules[0] = ['A', '-BF+AFA+FB-']; // first rule therules[1] = ['B', '+AF-BFB-FA+']; // second rule let whereinstring = 0; // where in the L-system are we? function setup() { var canvas2 = createCanvas(710, 400); background(255); stroke(0, 0, 0, 255); canvas2.parent('canvas2'); // console.log(createCanvas); // start the x and y position at lower-left corner x = 0; y = 400; // COMPUTE THE L-SYSTEM for (let i = 0; i < numloops; i++) { thestring = lindenmayer(thestring); } } function draw() { // draw the current character in the string: drawIt(thestring[whereinstring]); // increment the point for where we're reading the string. // wrap around at the end. whereinstring++; if (whereinstring > thestring.length-1) whereinstring = 0; } // interpret an L-system function lindenmayer(s) { let outputstring = ''; // start a blank output string // iterate through 'therules' looking for symbol matches: for (let i = 0; i < s.length; i++) { let ismatch = 0; // by default, no match for (let j = 0; j < therules.length; j++) { if (s[i] == therules[j][0]) { outputstring += therules[j][1]; // write substitution ismatch = 1; // we have a match, so don't copy over symbol break; // get outta this for() loop } } // if nothing matches, just copy the symbol over. if (ismatch == 0) outputstring+= s[i]; } return outputstring; // send out the modified string } // this is a custom function that draws turtle commands function drawIt(k) { if (k=='F') { // draw forward // polar to cartesian based on step and currentangle: let x1 = x + step*cos(radians(currentangle)); let y1 = y + step*sin(radians(currentangle)); line(x, y, x1, y1); // connect the old and the new // update the turtle's position: x = x1; y = y1; } else if (k == '+') { currentangle += angle; // turn left } else if (k == '-') { currentangle -= angle; // turn right } // give me some random color values: let r = random(128, 255); let g = random(0, 192); let b = random(0, 50); let a = random(50, 100); // pick a gaussian (D&D) distribution for the radius: let radius = 0; radius += random(0, 15); radius += random(0, 15); radius += random(0, 15); radius = radius / 3; // draw the stuff: fill(r, g, b, a); ellipse(x, y, radius, radius); } </script> Tue, 14 May 2019 00:00:00 +0000 /misc/dimensions /misc/dimensions coding javascript blog <p>I’ve been casually learning about programming and data science over the past few months, and I figured it was time to just jump in and try something myself. This project focused on geospatial data. I’ve been particularly keen on learning to work with CSVs and JSON in a web project, so this little mappy has been a bit of a stepping stone to a more major project I have in mind 😈 I was so excited to do this that I couldn’t stop working on it and I finished the grunt of it in a bit less than a week 🤖🤖🤖 (but I’ve been continuously adding more things to it since then as well, and will probably continue to expand it).</p> <p><a href="https://leucotic.github.io/makerspacetestmap/">https://leucotic.github.io/makerspacetestmap/</a></p> <p>Here is what the original project looked like:</p> <!--  --> <div style="text-align: center; width: 100%; height: 80vh;"> <iframe src="https://leucotic.github.io/makerspacetestmap/orig-layout.html" frameborder="0" height="100%" width="100%"></iframe> </div> <p><br /> This project involved:</p> <ul> <li>actually doing stuff other than dropdowns with javascript</li> <li>parsing a separate CSV file containing data into JSON (using <a href="https://www.papaparse.com/">papa parse</a>)</li> <li>working with JSON / writing to JSON</li> <li>working with a GIS javascript library called <a href="https://leafletjs.com">leaflet</a></li> <li>trying to figure out what the heck is an asynchronous language and how to do callback functions</li> <li>generating html tables with javascript</li> <li>designing/coding custom map markers</li> <li>making it so that you could click on a link outside of the map in order to open up a location on the map, and center the map on that location (this was actually quite challenging because this isn’t a functionality that’s really part of leaflet and so there’s no documentation/existing code for it, I had to scrape together ideas from various half-answered stackoverflow questions)</li> </ul> <p>The project was pretty clearly defined in scope, so it really didn’t take long, even though I had to teach myself almost every aspect of it from the ground up as I was piecing it all together. I learned a whale of a fuckton! I’d never worked with data at all before, especially not geographic data, nor JSON, nor even real javascript for that matter. Pretty much all the code-y stuff I’ve done so far has just been web design, so I don’t actually have much experience with programming. I’ve only ever done REALLY simple coding “practice problems” and never any actually functional projects from start to finish. so yeah there were,, many tears and creys and console.log errors. But honestly, it was so much fun, I couldn’t stop working on it even as I was ready to just sob hysterically in frustration 😅</p> <p>While the technical set-up in terms of map rendering and importing/parsing/using the data is pretty much done, there’s a lot of other things to be worked on, including the actual data set itself, which is a work in progress and currently has some inaccuracies.</p> <p>Possible future additions to this project:</p> <ul> <li>adding automatic geocoding to it with an api so I don’t have to do it manually (by pasting it into a random website i found lol)</li> <li>maybe re-doing it with angular or react and making it a more full-fledged website instead of just a one-pager?</li> </ul> <p>After some updates, here’s what it’s currently looking like:</p> <div style="text-align: center; width: 100%; height: 80vh;"> <iframe src="https://leucotic.github.io/makerspacetestmap/" height="100%" width="100%"></iframe> </div> <!-- <figure class="half-desk"> <img src="/assets/img/makerspace-gis-2.png" alt="current version"> </figure> --> <p><br /></p> <p>That’s right, I changed the map from <a href="https://www.mapbox.com/">mapbox</a> to <a href="https://stamen.com">stamen</a>, using their toner map! I mostly did this to avoid issues with access tokens, but this map has a wonderfully graphic quality and I love it. Their watercolor map is also great, but unfortunately—although it is absolutely gorgeous—it’s not particularly functional for information purposes (there’s almost no labels or details).</p> <p>I’m also working on slicing and dicing it and transitioning it into a multi-page site as opposed to just a one-pager. That’s all for now, but I’ll probably update this post once the project is finalized.</p> Tue, 22 Jan 2019 00:00:00 +0000 /blog/2019/01/22/makerspace-GIS.html /blog/2019/01/22/makerspace-GIS.html programming project javascript GIS coding makerspaces blog <p>In high school I really enjoyed doing challenges like <a href="https://www.c25k.com/">C25K</a> and <a href="https://nanowrimo.org">NaNoWriMo</a> with my close friends. However, in college I didn’t even attempt to do any due to the overwhelming school workload and also due to pet projects taking over my life. Now that I’ve graduated and I have much more free time, less stress and more mental space, I decided to hit up my old buddies (as well as some new ones) and take on some challenges once more.</p> <h3 id="how-it-worked">How it Worked:</h3> <p>I invited my friends to pick a project, set strict goals, and work on it every day for the month of November, in the spirit of <a href="https://www.wikiwrimo.org/wiki/NaNo_Rebel">Nano Rebel</a>. My project was working on my website for 1.5 hours every day. Website-polishing activities for me could include coding/fixing/looking up how to do things, polishing up old writing/articles, writing up articles I planned to write but never did, photoshop/design work for the site, etc.</p> <p>My friends’ project were super diverse and ranged from board game design to piano playing to stand-up comedy writing to theology-reading. Initially, 14 people signed up, but a couple others joined in later.</p> <p>With some encouragement on my end, participants each created a google doc outlining the nature of their challenge, their reasons for doing it, how they would go about quantifying their work, as well as some bulleted project notes to get them started. I created a discord server for the group and each person who submitted a proper plan got a channel devoted to their project where they could post updates and receive encouragement &amp; feedback. Participants also received awards in the form of server roles for their achievements in the challenge (finishing days 1, 2 &amp; 3; weeks 1, 2 &amp; 3; completing the challenge).</p> <h3 id="results">Results</h3> <p>6 people (including me) finished, about 2-4 people were super close to being finished with some continuing their challenge into december, several people got started but dropped out in the first week, and of course, a number of people never started.</p> <h3 id="what-i-was-able-to-accomplish">What I was able to accomplish</h3> <ul> <li>fleshed out about section</li> <li>significantly expanded research section</li> <li>uploaded new articles, lectures, essays, etc</li> <li>added comments sections with disqus</li> <li>implemented a post tag system using yaml frontmatter</li> <li>created related posts calculated by tags</li> <li>when you click on the tag, it takes you to a tag page that has every other post with the tag in it</li> <li>tag pages also have their own suggested related tags (tags that are co-present on posts)</li> <li>tag pages are automatically generated with a python script (it’s a static site so i just run it locally if I upload any new posts, it’s not a client-side thing)</li> <li>tag cloud</li> <li>articles have (sort of) proper link previews (I have to go back and fix some of the metadata on specific articles tho)</li> <li>lots of minor changes here and there that are hard to enumerate</li> </ul> <p>…and finally…</p> <ul> <li>the website is no longer sad and insecure about itself and is now routed through https:))</li> </ul> <h3 id="reflections">Reflections</h3> <p>There’s a ton of stuff I still plan to do and a lot of the stuff I have isn’t perfect and needs a ton of fixing( I have a <a href="https://docs.google.com/document/d/1M5Q173mcvLyHmz0e9UjWUQTjwmR1FPAUnvWPfS4F_ho">7 page detailed bulleted list</a> of future fixins), but I’ve made a giant leap of progress, learned a lot of stuff, and completed the challenge I set for myself :)</p> <p>I started out only really knowing basic html and css but now I’ve gained some experience with liquid templating, javascript, and python as well. I’ve always wanted to learn to code but I could never really get into it because I didn’t have anything in particular that I wanted to code. With this project though, I had concrete issues to solve that were meaningful and important to me, and it motivated me to work hard and learn new things. It’s really boosted my confidence and willingness to dive into more serious coding projects.</p> Tue, 04 Dec 2018 00:00:00 +0000 /blog/2018/12/04/November-Challenge.html /blog/2018/12/04/November-Challenge.html site-dev personal challenges nanowrimo blog <p>Just created a new domain! It only took me forever to figure out all the DNS stuff. Doing it all from scratch is pretty fun actually. Evetually, the plan is to have all my random stuff from all over housed in some kind of systematic way here. I really admire what <a href="http://www.gwern.net/">Gwern</a> does, it’s pretty much my ideal/dream personal website. I want to have all my resource-compiling/squirreling, research, writing, and everything in here. I might even include a meme gallery :) It would be both “my favorite images” as well as stuff I’ve made. For now it’s just my design portfolio. Also everything is currently just in this little subdomain but eventually I might split it up, expand and move it to make better use of the domains and subdomains.</p> <p>My old portfolio from junior year is also on here as well, but it’s through <a href="http://old-portfolio.mzharova.me/">old-portfolio.mzharova.me</a>.</p> <p>I have some web and motion projects that I plan on including here as well, not sure how it’s gonna be organized yet.</p> Thu, 31 May 2018 00:00:00 +0000 /blog/2018/05/31/New-domain.html /blog/2018/05/31/New-domain.html site-dev blog <p>Just created this portfolio website. I’ll eventually be updating it, adding new projects, and moving the domain, but here it is for now, enjoy :)</p> Wed, 14 Mar 2018 00:00:00 +0000 /blog/2018/03/14/Hemlo-world.html /blog/2018/03/14/Hemlo-world.html site-dev blog