EDIT: I just saw a google+ post about this meetup, the next one is scheduled for February 10th at 1:30 pm. We don't have presenters yet so let me know if you have something to show off. We hope to see you there!
This Sunday TX/RX labs held the first of (hopefully) many recreational computer programming group meetups. The first presentation was by Stephen Cameron, where he showcased his Guilloche patterns made using the processing language.
Guilloche patterns are "spirograph" style designs made by moving a rotating circle and drawing lines as the circle moves. If you missed it, be sure to checkout the full presentation and play with the processing code for more details.
Next, Chris Cauley (hello!) presented a few CSS fractals he's been working on, one of which is showcased in another blog entry on this site. CSS fractals are a fun way to use a lot off computing power to accomplish very little (as one member put it).
Be sure to join us the same time next month as we'll be holding these meetups regularly. This is a great way to learn a little programming yourself or to show of some fun code you've written.
The golden ratio has long fascinated mankind because blah blah blah... And the golden rectangle has aesthetic properties because of yadda yadda yadda... If you don't already know about this magical number, I'm not the person to educate you. Trust me, it's cool.
About a year ago I decided to create the golden rectangle in pure CSS as a way to learn about inheritance and to prepare myself to create more complex fractals in CSS/HTML.
The golden rectangle has sides with a ratio of 1.618... which is special because, if you divide the rectangle into a square and another rectangle, the sides of the inner rectangle has the same ratio as the outer rectangle. It is made by repeating the same rectangle scaled down, rotated, and embedded into itself over and over. So we start with embedded divs, the first of which has a set size and the remaining are 62% (1/1.618x100%) the size to its parent div.
Then the child divs are placed at the top right corner, outside of the parent div using absolute positioning. The children are then rotated a quarter turn to create the golden rectangle.
If you hover over the rectangle above, the :hover pseudo class will rotate the child and all of it's ancestor divs. This forms the golden rectangle.
Next, :before (circle) and :after (background) elements are added to create colors. This creates the golden spiral. In the final product, all squares inside the golden rectangle are set to the same colors (red, blue, and yellow), which is then hue rotated to product a unique set of colors at each level. The hue rotation adds up as you go down the DOM tree, creating a wide array of colors with only 3 color declarations.
In this example, if you hover over a div it will remove hue-rotate for all child divs.
That's all for now. Tune in next time for an animated CSS tree fractal.
The new TX/RX blog site uses WMD editor, a what-you-see-is-what-you-mean markdown editor. You can use this to add any image, but we have our own image library that we want to pull in images from (so that we can re-use photos elsewhere on the site, coming soon!), so we needed to overwrite the image button. This technique could easily be used to add buttons.
Taking from this stackoverflow.com post, I located the code for the button in wmd.js:
var imageButton = document.createElement("li");
imageButton.className = "wmd-button";
imageButton.id = "wmd-image-button";
imageButton.title = "Image <img> Ctrl+G";
imageButton.XShift = "-100px";
imageButton.textOp = function(chunk, postProcessing, useDefaultText){
return insertImage(chunk,insertShortCode); // this line was changed
};
setupButton(imageButton, true);
buttonRow.appendChild(imageButton);
The only line changed is commented above (only editing one line allows for easy updating and less unforeseen errors). Rather than modifying the whole file I created a function insertImage that accepts wmd-editor's chunk as an argument and a callback function insertShortCode.
function insertImage(chunk,callback) {
window.wmd_chunk = chunk;
window.current_modal = "#image-modal";
window.iframe_callback = callback;
$("#image-modal iframe").attr("src","/insert_photo/");
$("#image-modal").modal('show');
}
function insertShortCode(obj) {
var out = wmd_chunk.before.trimRight()+"\n\n";
out += obj.shortcode;
out += "\n\n"+wmd_chunk.after.trimLeft();
$("#wmd-input").val(out.trim());
$(current_modal).modal('hide');
}
This stashes the chunk and a few other variables away for future use and then opens an iFrame with my image library. Clicking on an image in the iFrame then calls window.parent.iframe_callback(image_object), which gets the "short code" from the image objects, inserts it into the editor and closes the modal.
