Kicks Condor

LEECHING AND LINKING IN THE HYPERTEXT KINGDOM

I FIRST DISCOVERED
THE 【TECHS-MECHS】WHO
ARE A CLAN OF SOUTH
OF THE BORDER GUNDAM
BREAKING DOWN
IMMIGRATION FENCES
WITH THEIR
IMPRESSIVE MANOS
MECANICAS

PLUNDER THE ARCHIVES

This site is also on dat.

MOVING ALONG LET'S SEE MY FAVORITE PLACES I NO LONGER LINK TO ANYTHING THATS VERY FAMOUS

indieweb: .xyz, h0p3, enslen, tim holman, c.rwr.

true hackers: ccc.de, fffff.at, voja antonić, cnlohr, esoteric.codes.

esp8266: scargill, shin-ajaran, hekkers, jscottb, limpkin, 41j

zeptobars in the chips right now.

openfl makes programs. also see: moai.

dwm, julia, tridactyl these are things you'll want on linux.

neil c very famous but should be a world icon.

the world or cate le bon you pick.

sammyclassicsonicfan the original teen rage adventure.

innovation.isotropic.org probly the best carl chudyk game.

and opinionated gamers for non-chudyk game analysis.

my twitter. my github. minor things.

BUT WHAT IF YOU WANT TO LEARN MORE ABOUT ME?

Ok I can see that you have spent too much time studying me for now. Rest up for the morrow. Use the feed if you need.

#code

The Awesome Directories

All this recent discussion about link directories and one of the biggest innovations was sitting under my nose! The awesome-style directory, which I was reminded of by the Dat Project’s Awesome list.

An “awesome” list is—well, it isn’t described very well on the about page, which simply says: only awesome is awesome. I think the description here is a bit better:

Curated lists of awesome links around a specific topic.

The “awesome” part to me: these independently-managed directories are then brought together into a single, larger directory. Both at the master repo and at stylized versions of the master repo, such as AwesomeSearch.


In a way, there’s nothing more to say. You create a list of links. Make sure they are all awesome. Organize them under subtopics. And, for extra credit, write a sentence about each one.

Dat Project's Awesome

Generally, awesome lists are hosted on Github. They are plain Markdown READMEs. They use h2 and h3 headers for topics; ul tags for the link lists. They are unstyled, reminiscent of a wiki.

This plain presentation is possibly to its benefit—you don’t stare at the directory, you move through it. It’s a conduit, designed to take you to the awesome things.

Hierarchical But Flat in Display

Awesome lists do not use tags; they are hierarchical. But they never nest too deeply. (Take the Testing Frameworks section under the JavaScript awesome list—it has a second level with topics like Frameworks annd Coverage.)

Sometimes the actual ul list of links will go down three or four levels.

But they’ve solved one of the major problems with hierarchical directories: needing to click too much to get down through the levels. The entire list is displayed on a single page. This is great.

Curation Not Collection

The emphasis on “awesome” implies that this is not just a complete directory of the world’s links—just a list of those the editor finds value in. It also means that, in defense of each link, there’s usually a bit of explanatory text for that link. I think this is great too!!

Wiki-Style But Moderated

The reason why most awesome lists use Github is because it allows people to submit links to the directory without having direct access to modify it. To submit, you make a copy of the directory, make your changes, then send back a pull request. The JavaScript awesome list has received 477 pull requests, with 224 approved for inclusion.

So this is starting to seem like a rebirth of the old “expert” pages (on sites like About.com). Except that there is no photo or bio of the expert.

About.com screenshot.

As I’ve been browsing these lists, I’m starting to see that there is a wide variety of quality. In fact, one of the worst lists is the master list!! (It’s also the most difficult list to curate.)

I also think the lack of styling can be a detriment to these lists. Compare the Static Web Site awesome list with staticgen.com. The awesome list is definitely easier to scan. But the rich metadata gathered by the StaticGen site can be very helpful! Not the Twitter follower count—that is pointless. But it is interesting to see the popularity, because that can be very helpful sign of the community’s robustness around that software.

Anyway, I’m interested to see how these sites survive linkrot. I have a feeling we’re going to be left with a whole lot of broken awesome lists. But they’ve been very successful in bringing back small, niche directories. So perhaps we can expect some further innovations.

/2018/07/24/the-awesome-directories/

The Key To Writing Shaders… Varies

Writing shaders has clicked for me today. By shaders, I mean: 3-D shaders, GLSL shaders, OpenGL shaders. They are little programs that draw things. With math. Right on the graphics card.

Being a newb, I can see what tripped me up. The tough thing about shaders is that they aren’t like other programs. They don’t just run once through and there’s your drawing.

Take this circle:

Well, here’s the shader that did that:

varying vec2 v_pos;
void main() {
  float t = step(1.0, length(v_pos));
  gl_FragColor = vec4(0.3, 0.4, 0.7, 1.0 - t);
}

How could THAT POSSIBLY draw a cirCLE?!


The Little Blue Fragments

Let’s start with something easy: why is it blue?

  gl_FragColor = vec4(0.3, 0.4, 0.7, 1.0 - t);

This line sets the color of a single pixel. Or—as the shader calls it—a single fragment.

In shaders, colors are represented by a series of four numbers—0.0 to 1.0 for red, green, blue and alpha. The vector of (0.3, 0.4, 0.7) is this blue color. In hex colors, we’re looking at #4C66B2.

Our circle starts its life as a square. I’ve already setup a 200 pixel by 200 pixel canvas. The shader will be painting this entire area.

Oh hey, I know: let’s just set the alpha to 1.0. This means the blue will not be transparent at all—it will be solid.

  gl_FragColor = vec4(0.3, 0.4, 0.7, 1.0);

That paints our whole square:

So I am specifically talking about fragment shaders here.

In this fragment shader, we’re now saying, “Paint this pixel solid blue.” And it’s just doing that for every pixel in the square.

200 x 200 = 40,000.

This shader runs—not once—but 40,000 times!


Now Let’s Zoom Out

I’ve setup a canvas that goes from (-1, -1) to (1, 1)—with (0, 0) in the middle—and I’ve told the fragment shader to paint this area.

Our drawing area.

Here we’ve set up four vertices—those are the points on the corners—going from -1 to 1 on each side. We’ll set up OpenGL to pass in these four coordinates—and the vertex shader will pass these on to our fragment shader. And we’re drawing the circle inside that box.

This all seems pretty easy, right? 🤷


Explain This One

Ok, this time, we’re going to go with a dead simple fragment shader:

varying vec4 v_color;
void main() {
  gl_FragColor = v_color;
}

We’re going to pass in the color through a variable.

In order to do this, we need to write a separate vertex shader:

varying vec4 v_color;
void main()
{
  gl_Position = vec4(position, 1.0);
  v_color = vec4(0.3, 0.4, 0.7, 1.0);
}

Not too bad, yeah? We have a variable v_color we’re using to pass the color. And we’re passing the color blue.

The gl_Position variable is passing a corner over—such as (-1, -1) or (1, -1). These were set up in my OpenGL code.

Our vertex shader runs once for every corner; our fragment shader runs for every pixel. Together, they draw the square:

Okie—now let’s make a subtle change. Let’s make it so one corner is blue. The (1, 1) upper right corner will be blue. And the rest will be green.

Our vertex shader could be written like this:

varying vec4 v_color;
void main()
{
  gl_Position = vec4(position,1.0);
  if (position.xy == vec2(1.0, 1.0)) {
    v_color = vec4(0.3, 0.4, 0.7, 1.0);
  } else {
    v_color = vec4(0.3, 0.7, 0.4, 1.0);
  }
}

Ok, good—if the coordinate is (1, 1) then the color will be blue.

And—with that change—we get this:

That makes sense—the upper corner is certainly blue. But how in the world did we get a gradient??

Look at that vector shader again. Shouldn’t just the (1, 1) coordinate be blue? Why is the (0.99, 0.99) coordinate also blue??


Like I Said: It Varies

How do we pass these coordinates to the fragment shader? We use varying.

The key to all of this is varying.

🙌   PLEASE NOTE: More modern OpenGL fragment shaders (such as those in OpenGL 3) use in and out rather than varying. They STILL vary, though!

Now, normally when you pass stuff around in a program, you use a variable.

You might say a = 1. Ok, so now a is one. And it’ll always be one. Until you change it. So a = 911. Now a is nine-eleven. Nice, you turned an innocent variable into a crisis. And it will stay that way.

But WOAH WOAH WOAH—that is NOT what varying is. When you pass something through varying it is not just a variable. It is now a range.

😳   A range??

A crazy, slidy, slippery range.

😳

I’m sorry, it’s true.

🙄   Don’t apologize, I’m sure there’s a reasonable explanation.

Oh, you’re right—I forgot—it’s awesome!! I apologize for apologizing.

Remember how the vertex shader ran once for each corner of the box? Here it is again, so you can look at it.

varying vec4 v_color;
void main()
{
  gl_Position = vec4(position,1.0);
  if (position.xy == vec2(1.0, 1.0)) {
    v_color = vec4(0.3, 0.4, 0.7, 1.0);
  } else {
    v_color = vec4(0.3, 0.7, 0.4, 1.0);
  }
}

The vertex shader DOES color just the corners. Like this:

How the vertex shader sees the colors.

And then when those colors are passed through the varying variable—mind you, an ACTUAL varying variable!—the fragment shader sees a range from green to blue along the top x-axis and the right y-axis.

How the fragment shader sees the colors.

And because of varying, our little v_color is going to be different for every pixel. It’s going to be a color—a vec4, that is—somewhere between green and blue.

It’s going to go smoothly from green to blue, without your interference.

Why did it paint a solid blue earlier? Because all the corners were same. So—even though we used varying—all corners were the same, so all values in between were the same.


Circle Time

Back to our circle. The trick here is: we are going to use—not the varying color—but the varying position to determine if we are inside or outside the circle.

varying vec2 v_pos;
varying vec4 v_color;
void main() {
  float r = length(v_pos);
  v_color.a = 1.0 - step(1.0, r);
  gl_FragColor = v_color;
}

You already understand the color. The vertex shader has given it to us.

What we turn our focus to now are these two built-in functions: step and length.

🙌   SPECIAL NOTE: You can browse a complete list of built-in functions at Shaderific.

The length function gives us the distance of our position from the origin. The origin is the center of our circle. So, in this case, that’s our radius.

  float r = length(v_pos);

Now, remember, we’re dealing with a varying variable here, so r is the distance of the current pixel we’re painting from the center.

The length function is also going to get rid of negative values here. The point (-1, -1) has a distance of 1.414, just like the point (1, 1) does.


The step function is going to take everything above 1.0 and make it exactly 1.0. And everything below 1.0 will be 0.0.

So, after step, the value will be 0.0 if we’re inside the circle. And 1.0 if we’re outside it.

See how the shader looks without the step function.

Now—if you want to play with these shaders (in a WebGL-compatible browser), you can do so here. Just go to the upper-right corner and switch to Cube. Which will give you a 2-D plane.

(You can also View Source on this page—this page contains all of its shaders and renders them inline with the text.)


A Few Things You May Still Wonder About

So, even though shaders look a lot like JavaScript or C, they actually have a few syntax differences that make the above codes possible.

Like take this line. How does it make the comparison here?

if (position.xy == vec2(1.0, 1.0)) {

Vector math is built-in with shaders. So you can ask if two vectors are equal using the double-equals.

You can also add, multiply, subtract vectors and so on—just by using the operators.

However, I am comparing a vec4 position with the vec2. And I am using “swizzling”.

position.xy   /* a vec2 <em>/
position.xyz  /</em> a vec3 <em>/
position.a    /</em> a float */

This special syntax lets me quickly grab the x, y, z or a parts of a vector.

Composing vectors also has a simplified syntax. Do you remember these lines from our final circle shader?

v_color.a = 1.0 - step(1.0, r);
gl_FragColor = v_color;

This could be simplified. You can use the vec4 function to compose a vector from multiple vectors.

gl_FragColor = vec4(v_color.xyz, 1.0 - step(1.0, r));

Here I am passing in a vec3 and a float—which will be assembled, in order, to form a new vec4. Similarly, I could pass in two vec2 vectors.

As long as your arguments have four parts in total, you can build a vec4 from them. Of course, this is also true of vec2, vec3 and any other type in the GL shader language.

/2017/01/24/the-key-to-shaders-varies/

Makey Makey No Longer Supports Arduino

It seems like this information hasn’t been disclosed quite enough as it should: Makey Makey’s version 1.2, produced by JoyLabz, cannot be reprogrammed with the Arduino software. In previous versions, you could customize the firmware – remap the keys, access the AVR chip directly – using an Arduino sketch.

🙌 NOTE: Dedokta on Reddit demonstrates how to make a Makey Makey.

Now, this isn’t necessarily bad: version 1.2 has a very nice way to remap the keys. This page here. You use alligator clips to connect the up and down arrows of the Makey Makey, as well as the left and right arrows, then plug it into the USB port. The remapping page then communicates with the Makey Makey through keyboard events. (See Communication.js.)

This is all very neat, but it might be nice to see warnings on firmware projects like this one that they only support pre-1.2 versions of the Makey Makey. (I realize the page refers to “Sparkfun’s version” but it might not be clear that there are two Makey Makeys floating about–it wasn’t to me.)

UPDATE: The text on the chip of the version 1.2 appears to read: PIC18F25K50. That would be this.

Some Notes About Connecting to iPads

Now, how I came upon this problem was while experimenting with connecting the Makey Makey to an iPad. Instructions for doing this with the pre-1.2 Makey Makey are here in the forums–by one of the creators of the MM.

Observe the iPad jealously guarding its precious battery juices.

With the 1.2 version, it appears that the power draw is too great. I received this message with both an iPad Air and an original iPad Mini.

Obviously a Makey Makey isn’t quite as interesting with an iPad – but I was messing with potentially communicating through a custom app.

Anyway, without being able to recompile the firmware, the iPad seems no longer an option. (The forum post should note this as well, no?)

Interfacing the Sparkfun Makey Makey with Arduino 1.6.7

If you do end up trying to get a pre-1.2 Makey Makey working with the latest Arduino, I ran into many problems just getting the settings right. The github repos for the various Makey Makey firmwares are quite dated.

One of the first problems is getting boards.txt to find my avr compiler. I had this problem both on Linux and Windows. Here’s my boards.txt that finally clicked for me:

############################################################################</p>

<p>menu.cpu=Processor</p>

<h6 id="section">######################################################################</h6>
<p>################################ Makey Makey ###############################
############################################################################
makeymakey.name=SparkFun Makey Makey
makeymakey.build.board=AVR_MAKEYMAKEY
makeymakey.build.vid.0=0x1B4F
makeymakey.build.pid.0=0x2B74
makeymakey.build.vid.1=0x1B4F
makeymakey.build.pid.1=0x2B75</p>

<p>makeymakey.upload.tool=avrdude
makeymakey.upload.protocol=avr109
makeymakey.upload.maximum_size=28672
makeymakey.upload.speed=57600
makeymakey.upload.disable_flushing=true
makeymakey.upload.use_1200bps_touch=true
makeymakey.upload.wait_for_upload_port=true</p>

<p>makeymakey.bootloader.low_fuses=0xFF
makeymakey.bootloader.high_fuses=0xD8
makeymakey.bootloader.extended_fuses=0xF8
makeymakey.bootloader.file=caterina/Caterina-makeymakey.hex
makeymakey.bootloader.unlock_bits=0x3F
makeymakey.bootloader.lock_bits=0x2F
makeymakey.bootloader.tool=avrdude</p>

<p>makeymakey.build.mcu=atmega32u4
makeymakey.build.f_cpu=16000000L
makeymakey.build.vid=0x1B4F
makeymakey.build.pid=0x2B75
makeymakey.build.usb_product=”SparkFun Makey Makey”
makeymakey.build.core=arduino
makeymakey.build.variant=MaKeyMaKey
makeymakey.build.extra_flags={build.usb_flags}

I also ended up copying the main Arduino platform.txt straight over.

Debugging this was difficult: arduino-builder was crashing (“panic: invalid memory address”) in create_build_options_map.go. This turned out to be a misspelled “arudino” in boards.txt. I later got null pointer exceptions coming from SerialUploader.java:78 – this was also due to using “arduino:avrdude” instead of just “avrdude” in platforms.txt.

I really need to start taking a look at using Ino to work with sketches instead of the Arduino software.

/2016/01/07/makeymakey-not-an-arduino/

Switching PWM to Another Pin

Right now the spotlight is stolen by lovely chips like the ESP8266 and the BCM2835 (the chip powering the new Raspberry Pi Zero). However, personally, I still find myself spending a lot of time with the ATtiny44a. With 14 pins, it’s not as restrictive as the ATtiny85. Yet it’s still just a sliver of a chip. (And I confess to being a sucker for its numbering.)

My current project involves an RF circuit (the nRF24l01+) and an RGB LED. But the LED needed some of the same pins that the RF module needs. Can I use this chip?

The Rise and Fall of PWM

The LED is controlled using PWM – pulse-width modulation – a technique for creating an analog signal from code. PWM creates a wave – a rise and a fall.

PWM Wave

This involves a hardware timer – you toggle a few settings in the chip and it begins counting. When the timer crosses a certain threshold, it can cut the voltage. Change the threshold (the OCR) and you change the length of the wave. So, basically, if I set the OCR longer, I can get a higher voltage. If I set a lower OCR, I get a lower voltage.

I can have the PWM send voltage to the green pin on my RGB LED. And that pin can be either up at 3V (from the two AA batteries powering the ATtiny44a) or it can be down at zero – or PWM can do about anything in between.

My problem, though, was that the SPI pins – which I use to communicate with the RF chip – overlap my second set of PWM pins.

ATtiny24/44 Pinout

You see – pin 7 has multiple roles. It can be OC1A and it can also be DI. I’m already using its DI mode to communicate with the RF module. The OC1B pin is similarly tied up acting as DO.

I’m already using OC0A and OC0B for my green and blue pins. These pins correspond to TIMER0 – the 8-bit timer used to control those two PWM channels on OC0A and OC0B. To get this timer working, I followed a few steps:

// LED pins
#define  RED_PIN   PA0
#define  GREEN_PIN PB2
#define  BLUE_PIN  PA7

Okay, here are the three pins I want to use. PB2 and PA7 are the TIMER0 pins I was just talking about. I’m going to use another one of the free pins (PA0) for the red pin if I can.

DDRA |= (1«RED_PIN) | (1«BLUE_PIN);
DDRB |= (1«GREEN_PIN);

Obviously I need these pins to be outputs – they are going to be sending out this PWM wave. This code informs the Data Direction Register (DDR) that these pins are outputs. DDRA for PA0 and PA7. DDRB for PB2.

// Configure timer0 for fast PWM on PB2 and PA7.
TCCR0A = 3«COM0A0 | 3«COM0B0 // set on compare match, clear at BOTTOM
       | 3«WGM00; // mode 3: TOP is 0xFF, update at BOTTOM, overflow at MAX
TCCR0B = 0«WGM02 | 3«CS00; // Prescaler 0 /64

Alright. Yeah, so these are TIMER0’s PWM settings. We’re turning on mode 3 (fast PWM) and setting the frequency (the line about the prescaler.) I’m not going to go into any detail here. Suffice to say: it’s on.

// Set the green pin to 30% or so.
OCR0A = 0x1F;
// Set the blue pin to almost the max.
OCR0B = 0xFC;

And now I can just use OCR0A and OCR0B to the analog levels I need.

TIMER1, 16-bit is Better, Right?

Most of these AVR chips have multiple timers and the ATtiny44a is no different – TIMER1 is a 16-bit timer with hardware PWM. Somehow I need to use this second timer to power th PWM on my red pin.

I could use software to kind of emulate what the hardware PWM does. Like using delays or something like that. The Make: AVR Programming book mentions using a timer’s interrupt to handcraft a hardware-based PWM.

This is problematic with a 16-bit timer, though. An 8-bit timer maxes out at 255. But a 16-bit timer maxes out at 65535. So it’ll take too long for the timer to overflow. I could lower the prescaler, but – I tried that, it’s still too slow.

Then I stumbled on mode 5. An 8-bit PWM for the 16-bit timer. What I can do is to run the 8-bit PWM on TIMER1 and not hook it up to the actual pin.

// Setup timer1 for handmade PWM on PA0.
TCCR1A = 1«WGM10; // Fast PWM mode (8-bit)
                   // TOP is 0xFF, update at TOP, overflow at TOP
TCCR1B = 1«WGM12  // + hi bits
        | 3«CS10;  // Prescaler /64

Okay, now we have a second PWM that runs at the same speed as our first PWM.

What we’re going to do now is to hijaak the interrupts from TIMER1.

TIMSK1 |= 1«OCIE1A | 1«TOIE1;

Good, good. OCIE1A gives us an interrupt that will go off when we hit our threshold – same as OCR0A and OCR0B from earlier.

And TOIE1 supplies an interrupt for when the thing overflows – when it hits 255.

Now we manually change the voltage on the red pin.

ISR(TIM1_COMPA_vect) {
    sbi(PORTA, RED_PIN);
}</p>

<p>ISR(TIM1_OVF_vect) {
    cbi(PORTA, RED_PIN);
}

And we control red. It’s not going to be as fast as pure PWM, but it’s not a software PWM either.

Why Not Use Another Chip?

I probably would have been better off to use the ATtiny2313 (which has PWM channels on separate pins from the SPI used by the RF) but I needed to lower cost as much as possible – 60¢ for the ATtiny44a was just right. This is a project funded by a small afterschool club stipend. I am trying to come up with some alternatives to the Makey Makey – which the kids enjoyed at first, but which alienated at least half of them by the end. So we’re going to play with radio frequencies instead.

I imagine there are better other solutions – probably even for this same chip – but I’m happy with the discovery that the PWM’s interrupts can be messed with. Moving away from Arduino’s analogWrite and toward manipulating registers directly is very freeing – in that I can exploit the chip’s full potential. It does come with the trade off that my code won’t run on another chip without a bunch of renaming – and perhaps rethinking everything.

Whatever the case, understanding the chip’s internals can only help out in the long run.

If you’d like to see the code in its full context, take a look through the Blippydot project.

/2015/12/31/switching-pwm-to-another-pin/