Beginner's Journey: Lessons Learned after 1 year #552
Replies: 4 comments 2 replies
-
|
In the interest of helping others, particularly those new to programming or just anyone who finds the many corridors around here interesting but also feels a bit overwhelmed, I'm going to post (hopefully) helpful tips in this thread - the sort I find and think might facilitate or expedite another novice/beginner like myself in their learning endeavors. The topic for today? Graphs!! TL;DRGraphs are quantum-like creatures that break the classical laws of physics and exhibit superposition and entanglement-like behaviours. Graphs are many things at the same time - until, as your local quantum mechanic will tell you, it is _observed_, at which point it configures its bits and bobs into, I don't know, whatever the calendar says it's supposed to be that day. I think the Greek etymology of the word refers to "script" or "written" or "writing". It's one thing to knock around some ideas with Socrates about redesigning the Parthenon - it's another thing to document the plan, leaving a paper trail, as it were. I think that's the gist of it, as to the origins of the word. And then there are the graphs this post is chiefly concerned with. At first glance they look ridiculously simple - like a flowchart created in Adobe Illustrator pre-alpha. A bit of text, some simple lines with the occasional arrow on either end - and basic shapes. Circles, rectangles... um... circles. It shows a kind of overview of a system much like images you might see in a design document or architecture diagram. And yes, there are many graphing viewers and editors and file extensions online that all appear to make more or less the same seemingly simple stick figure illustrations. At this moment, in this very Github repository, there is an assortment of packages that will create graphs. So, yeah, at this point I was a bit confused (probably still am) wondering why there were so many options for a pre-flowchart-era looking document format with circles and rectangle support. Back to quantum states, etc. when I started goofing with the Ends up it's kind of close to the photon double slit experiment mentioned above. The superposition thing. It depends on your observation of it and the context that's happening in. Right now, if I look at mine it is a planning document - it's me filling out a form, not quite done making all my selections and options. Like buying a car online where you can make all your selections from dropdown menus and create your very own customized version - just how you want it. When I am done, I can then use a toDOT function and print that puppy out and get all vissy wig with it. And at that point, at the instant of that observation, it manifests as a record of what I hope to build, of my dreams and aspirations for the system. Beautiful. Great. Tuck that plan.ts file somewhere close to the .gitignore file and... but wait... what's this? There's another function in the package! Love it! But come on - this is too much work man! I saw it was aptly named The "plan" became the "thing". The idea, you know, the design - the, dare I say, "graph" of all of my decisions - it, to again harken back to the good 'ol days, individuated itself. Point is, it turned into a real thing in the real world - form and matter - all that. It miracled itself into existence. What do I mean by that? I mean this: if I want to make a change to my system now? Like use a different kind of stream, or change the function that transforms the data in a particular stream? I open up my plan.ts file and make changes to it and Okay, man I can ramble. That's it for today, aside from the huge white elephant question in the room: Note If you remote in to your dev machine from elsewhere and you call initGraph, and no one is in that room, does it still become the system it previously was merely a description of? |
Beta Was this translation helpful? Give feedback.
-
The DaVinci Code - Where To Find The Secret DocumentationTip There are little hidden gems of documentation in the source code. I'm not talking about the README files or the generated API docs or the untangled examples that can be extracted. If there is a note that advises checking out the source code for more 
I've been scuba diving in the rstreamGraph package and there is zero chance I could have used it even in the most simple of ways, without looking at the source code and tests. |
Beta Was this translation helpful? Give feedback.
-
|
Tip Creating your own tools to help you complete a "learning project" often teaches you more than the project you ended up creating the tools for! Check it out! I made this today! 
I made this, umm, okay it's basically a div with some text -- POINT IS, I wanted to view some info to make sure some magic was happening which in the past landed me squarely in the console. So now I've got this admittedly very specific tool which might only be useful on this project - in reality just a floating log of some values I'm interested in - but for some reason it gave me joy when it popped right up and started showing me that information. As a matter of fact, I'm certain that's the first piece of software I've ever written that wasn't from a tutorial, and is of actual USE to me. And there's something recursive about it... I've created something to help me create something with the same tools, and in the middle of the process of creating the original thing. Wait - was there a closure in there?? Kidding - I still haven't got that one figured out. But it reminds me of another tip: Tip Don't chase ideas or techniques that have reputations for being difficult. They will appear in front of you as a matter of course. At one point I had a hard time understanding/being able to follow the code when someone used a reduce function. It seems ridiculous now, but that accumulator intimidated me - bullied me! So I took the bull by the horns and youtubed it, googled it, read articles on it - took a master class on it, THE WORKS! I was more confused at the end of that journey than when I started. 'An accumulator... it accumulates things ...' - I mean, it was just too deep - out of my pay-grade, not in my league - a pipe dream! Then one day I thought it would be really handy if, as I iterate over this group of items - if I could also keep a little somethin' on the side - a running tally, whatever - a
And it just occurred to me that a few years from now I'll look back at this post and sigh, thinking 'I had no clue what a reduce function was about when I wrote that.` And that, naturally, brings this one to a close. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @brandtryan — just a very quick note to say a huge thank you for this all and please bear with me until I find time to properly respond! 🙏 |
Beta Was this translation helpful? Give feedback.
-
Abstract Concreteor... Declarative and Imperative Statements and The Tree Of Syntax AbstractionYou know the movie. You better know the movie: Declaration"This aggression will not stand, man." Imperative"Hey, careful, man..." Imperative Declaration Concatenation"Hey, careful, man, there's a beverage here!" Tip TL;DR Imperatives always beg the question... though the answer might be obvious: Something? What something? WHAT are we trying to achieve, in particular, if we follow this list of imperatives? This is a really useful question to ask before building something. If one of the imperatives is to start with something within which the size of a 5'8" human could be contained - surely that tells us... something? Maybe not. How 'bout I start with a 50 gallon water heater? Or one of those posh serial killer transparent victim enclosure things that always seem nicer than my apartment. Why not? And that is a valid question... right up to the point when you tell me what the goal is. WHAT are we making? Oh! We're making a statue to last milenia in order to preserve the likeness of The Dude? Alright then! Now I know going to Hawaii and collecting yards of lava can be checked off the list, as well as obtaining a tank of laughing gas from the local dentist/Phish show. How about marble? I know a guy that knows a guy that frolics to and fro within the highest spheres of the marble countertop industry. Good idea, using marble - since we're trying to create a likeness of something that will endure to the end of days (nevermind that's in, like, two weeks). It's only imperative to use something capable of containing a 5'8" human insofar as WHAT we want to end up with is a likeness of something of that size. it's also imperative that we use something that, of the at least 3 states of matter I know of, it be of the "solid" variety. And that is only because the WHAT we want to end up needs to hold that form/shape for a very long time, which liquids and gases aren't so good at. Whenever you think/say `What the heck are we even talking about? I forget!' That's a cue for someone to cowboy up and declare something. And don't be shy! Time's running out! Soon it will be illegal to declare things. Declare firmly, and with extreme prejudice. Like this: Warning "Hey, careful, man, there's a beverage here!" |
Beta Was this translation helpful? Give feedback.
-
Deconstructing User Defined Functions with Typed ArgumentsI came across defn from shader-ast in an example when suddenly my biological internal type system short-circuited and I felt like the little boy in the Labyrinth at the end of Kubrick's The Shining
In other words, challenge accepted ;)From the READMEWhen 'defn' is called, the function body will be checked for correct return types. Additionally a call graph for the function is generated to ensure the code generator later emits all dependent functions in the correct order. Since 'defn' returns a standard TS/JS function, all arguments will be automatically type checked at call sites (in TypeScript only). Function argumentsFunction argument lists are given as arrays, with each item either:
If no name is specified, an auto-generated one will be used. Generally, The body function (last arg given) is called with instantiated, typed symbols representing each arg and can use any name within that function... I first noticed it in the shader-ast-noise example......and aside from the comments and const/let/return keywords every other word you see in the code below is typed. To dissect this puppy I created a chart, as I increasingly find myself spending most of my time dealing with my lack of understanding and ability to quickly read type signatures. The yellow diamonds are actually repetitive since in this case there are no problems with the types, but when crafting your own it's nice to see what is actually coming out of what and going into what and checking those against what the functions are expecting. If I were an ambitious sort, I'd have listed all the various types each function accepts, but that seemed to be crossing into, or rather descending into, a level of Dante's hell I am not yet prepared for... It's honestly a curse and a blessing. I seem to be getting nowhere - making little progress in my learning - and it's true, the progress is slow - but that's because the types are forcing me to understand every single line of code. And I imagine as time goes by the pace will pick up. This example has 3 typed args (but the defn function can handle up to 8, count'em EIGHT typed arguments): const mainImage = defn(V4, "mainImage", [V2, V2, F], (fragCoord, res, time) => {
let uv: Vec2Sym;
let col: FloatSym;
return [
(uv = sym(aspectCorrectedUV(fragCoord, res))),
// dynamically create a multi-octave version of `snoise2`
// computed over 4 octaves w/ given phase shift and decay
// factor (both per octave)
(col = sym(
additive(V2, snoise2, 4)(add(uv, time), vec2(2), float(0.5))
)),
ret(vec4(vec3(fit1101(col)), 1)),
];
});---
config:
theme: 'base'
themeVariables:
fontSize: '16px'
primaryColor: '#cbcccdff'
background: '#aa4242ff'
---
flowchart TD
%% --- STYLING ---
linkStyle default interpolate bumpX
classDef funcNode fill:#e3f2fd,stroke:#1565c0,stroke-width:2px,rx:5,ry:5;
classDef dataNode fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px;
classDef guardNode fill:#fff9c4,stroke:#fbc02d,stroke-width:1px,stroke-dasharray: 3 3;
classDef returnNode fill:#212121,stroke:#000000,stroke-width:2px,color:white;
%% --- INPUTS ---
subgraph Inputs [Function Arguments]
I_FC([fragCoord]):::dataNode
I_Res([res]):::dataNode
I_Time([time]):::dataNode
end
%% --- STEP 1: UV CALCULATION ---
subgraph Step1 [Step 1: Coords Normalization]
direction TB
%% Guarding Inputs for aspectCorrectedUV
G_AC1{Expect:</br> V2}:::guardNode
G_AC2{Expect:</br> V2}:::guardNode
%% Operation
OP_ACUV[aspectCorrectedUV]:::funcNode
%% Guarding Output for Assignment
G_AssignUV{Expect:</br> V2}:::guardNode
VAR_UV([let uv]):::dataNode
%% Connections
I_FC -- V2 --> G_AC1 --> OP_ACUV
I_Res -- V2 --> G_AC2 --> OP_ACUV
OP_ACUV -- V2 --> G_AssignUV --> VAR_UV
end
%% --- STEP 2: NOISE PREPARATION ---
subgraph Step2 [Step 2: Argument Prep]
direction TB
%% Logic: add(uv, time)
%% Note: 'add' is polymorphic, here it matches add(Vec, Float) -> Vec
G_Add1{Expect:</br> V2}:::guardNode
G_Add2{Expect:</br> Float}:::guardNode
OP_Add[add]:::funcNode
%% Inputs to add
VAR_UV -- V2 --> G_Add1 --> OP_Add
I_Time -- F --> G_Add2 --> OP_Add
%% Logic: Literals
L_Shift([vec2 2]):::dataNode
L_Decay([float 0.5]):::dataNode
end
%% --- STEP 3: HOF EXECUTION ---
subgraph Step3 [Step 3: Additive Noise HOF]
direction TB
%% The Constructed Function Signature: (V2, V2, F) -> F
%% Guarding Inputs for the HOF
G_HOF1{Expect:</br> V2}:::guardNode
G_HOF2{Expect:</br> V2}:::guardNode
G_HOF3{Expect:</br> Float}:::guardNode
%% The Function
OP_HOF[additive snoise2]:::funcNode
%% Guarding Output
G_AssignCol{Expect:</br> Float}:::guardNode
VAR_Col([let col]):::dataNode
%% Connections
OP_Add -- V2 (pos) --> G_HOF1 --> OP_HOF
L_Shift -- V2 (shift) --> G_HOF2 --> OP_HOF
L_Decay -- F (decay) --> G_HOF3 --> OP_HOF
OP_HOF -- F --> G_AssignCol --> VAR_Col
end
%% --- STEP 4: POST PROCESS & RETURN ---
subgraph Step4 [Step 4: Formatting Return]
direction TB
%% Fit0111 Logic
G_Fit{Expect:</br> Float}:::guardNode
OP_Fit[fit1101]:::funcNode
%% Vec3 Construction (Splatting)
G_V3{Expect:</br> Float}:::guardNode
OP_V3[vec3 splat]:::funcNode
%% Vec4 Construction
G_V4_1{Expect:</br> Vec3}:::guardNode
G_V4_2{Expect:</br> Float}:::guardNode
L_Alpha([1]):::dataNode
OP_V4[vec4]:::funcNode
%% Final Return Check
G_Ret{Expect:</br> V4}:::guardNode
RET(((Return))):::returnNode
%% Connections
VAR_Col -- F --> G_Fit --> OP_Fit
OP_Fit -- F (-1..1) --> G_V3 --> OP_V3
OP_V3 -- V3 (rgb) --> G_V4_1 --> OP_V4
L_Alpha -- F (a) --> G_V4_2 --> OP_V4
OP_V4 -- V4 --> G_Ret --> RET
end
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Background: I'm the guy that has done every tutorial available for every language online and after a few years goofing around still could not write a function more complex than writing out a line to the console. And now, I'm happy to report that I can write TWO lines to the console. This went on for years until one day a few years ago, for whatever reason, I started reading about computer science and the different ways a program can be written, having only been exposed to OOP. I ended up grinding through the first few parts of SICP multiple times, but when the math got a little funky I scampered away. What I did like though - was the idea of functional programming. It was like a breath of fresh air (life support) - and I noticed that part of its groove, its nature, whatever - is that it naturally tends towards abstraction. And for my artsy brain, abstraction works for me - you can go ahead and put up the framework for your house - I'll be in the rocking chair on the porch looking around the whole neighborhood - all the buildings, and lifting out of them, their essence - what makes them a firehouse as opposed to a carwash. To extract with the mind, to lift out the central idea of something that makes it possible to call it the same thing as the firehouse in the next neighborhood - you've classified something that can be applied to yet another building in yet another neighborhood and you instantly know it.
Just the other week I was like, 'Wait - I can put numbers that don't actually represent color values and make the GPU crunch them for me? This vec3 is just an array to hold 3 values, like a 3d vector? Like in physics? And even though it's the GPU, I don't even have to RENDER anything to the screen from it - but just work it overtime to create some crazy invisible flow field of forces I literally just made up?
Sorry back on point, the biggest lesson learned after this year is that, as soon as you have an aha moment when you realize a function from a package is working some abstraction mojo, keep looking up higher because there are many layers of abstraction, that taken piecemeal are quite digestible and nutritious. When I'm stuck now, I immediately say - ohhh the Thi.ng is going abstract on me again - ohhhkay, let's go! So if you are struggling with a package - especially with how package A relates to package B - go abstract and try to find a connection. And here's a hint. It's all in those freaking APIs. It took me months to realize I was supposed to use factory, I think they are called, functions - and that they go utilize all of those apis - they do all the nitty gritty rush hour grand central station commuting. Stay in your rocking chair! When I realized that, it no longer seemed demonic to come across 500 different ways to create a 2d vector. We just put stuff in our black mailbox next to the rocking chair and presto! We get something back that is the same every time in relation to what we put into it. And then -whhhaaa - we can go to Lowes and buy another mailbox, and put it in the freaking mailbox on our porch - and get notified on our phone 20 minutes later that yet another mailbox was delivered back to us? Okay, okay - getting ahead of myself.
Put the same thing in and presto! you get the same result out. I'm fascinated with recursion and pure functions and well, having a function that itself returns another function. Conjunction Junction.
One day I was listening to some video from some wise old coder who asked the audience to consider just how young and new this whole computing thing is - computers and software. Before I had just assumed 'Well, it's math and 1's and 0's and logic - not much room there to do things differently.' I would have snubbed my nose at a programmer claiming to be creative. ha! That's funny!
Boy was I wrong. And I'm not just talking about "creative coding" or "generative art" - I didn't realize the creativity involved in solving quite technical problems - how different data structures are better for somethings than others - I remember in the SICP course early on the professor showed two ways to do the same thing - one ended up on the chalkboard looking like mount Doom, or someone's 50 generation family tree, and the other looked a triangle pointing to the right (callback hell, or something like that). I finally understood what people meant by the shape of the data.
I ended up here dipping my toes into functional programming, but also really feeling lost, like Atlanta Airport lost - but I kept remembering from one of those THOUSANDS of tutorials, one guy said, don't quit, don't stop trying, just don't. So I stuck around and have been lurking here - but I know now, for example, that if I'm at the airport bar with the hiccups nice and comfy, kicking back with the 'ol html - that if I get lost and end up in 900 kinds of vector hell in air traffic control, at least I know where I am and can back out slowly, or if I accidentally hop on the red eye rstream, that okay, let's look around and how does this relate to my cozy hiccup-html stuff? Come on man - is this a github repo or an art supply shop - how many canvases do we really need yo! Oops - got on an API shuttle and not ready for that? It's a big airport people. You have to explore and every few weeks you see a connection between this package and that package. You know what luggage you can carry on and what you check at the counter. You might not know how to make something beautiful/useful with it yet, but you've stepped through that intimidating door that said "No ENTRY" when you arrived. You need to go through that door.
Right...so I'll wrap up this rather short post - I can be a straight shooter as long as I'm hiding behind fiber optics. I started a notebook llm thing a ma bob to try to organize my learning when I started - and after adding some sources it provided this exquisite and most excellent notebook title: "Watch A Newby Learn To Code by Taking On The Most Intimidating Repository on Github." That's actually a true story.
AI is like that blind date - afterwards your friends ask - "Were they good looking??!!" and you say "Not really, but ya know, great personality!"
So I guess I've convinced myself via writing a novella sized post, that recording a few lessons learned since I've arrived here could be beneficial to all the crazy creative passionate people shaping what will surely be an era classified as prehistoric computing - but to me, that's like being a pioneer, traversing places and ideas and ways of doing things that have yet to be tread upon. See ya around.
Hiccup.
Beta Was this translation helpful? Give feedback.
All reactions