Cass-E Design
type: channel
description: Design, Experiments, Games, Resources
date: 2022-11-01T15:28:19Z
update period: hourly
update frequency: 1
update base: 2000-01-01T12:00+00:00
items: Foggy Halloween Mansion
items: Steampunk Thermal Camera
items: LED Sun Clock
items: WebP & WebM Adobe Plugins
items: Wireless Two-Way Office Doorbell
items: p5.js WordPress Legacy Update
items: p5.js Off Axis Projection
items: Two Desks
items: ForkAwesome (& FontAwesome)
items: The Anvil Studio

Foggy Halloween Mansion
type: item
creator: cass-e
date: 2022-10-31T15:30:00Z
subject: Digital
subject: 3D Rendering
subject: blender
subject: computer graphics
description: I created this 3D scene in Blender, rendered with Eevee, as a personal project this month for Halloween, and I thought it turned out well enough to share. I hope you enjoy and it's suitably spooky! If you've done any similar haunted house stuff this halloween, feel free to drop me a link so I… Continue Reading Foggy Halloween Mansion The post Foggy Halloween Mansion appeared first on Cass-E Design.
encoded: I created this 3D scene in Blender, rendered with Eevee, as a personal project this month for Halloween, and I thought it turned out well enough to share. I hope you enjoy and it's suitably spooky! If you've done any similar haunted house stuff this halloween, feel free to drop me a link so I can check it out. Happy Halloween! New Tech This has been my first time experimenting with Geometry Nodes in Blender, and I found them insanely useful for detail work. In this case, the small branches + needles on the pine trees, some brick and rooftile randomization. I also experimented more with procedural textures - I've always been a fan of procedurals, but in personal projects I tend towards geometry and lighting rather than texture. In this project, nearly everything in the scene has some kind of texture or normal to vary the surface. I'm also pretty happy with the volumetrics now available in Eevee. It took some wrangling to get the textured cloudy fog look I wanted without rendering the scene entirely light grey, but it works! Oh, and I took the photo of the moon seen over the mansion! The post Foggy Halloween Mansion appeared first on Cass-E Design.

Steampunk Thermal Camera
type: item
creator: cass-e
date: 2022-09-09T23:32:50Z
subject: Maker
subject: arduino
subject: c++
description: A Thermal Camera with a steampunk aesthetic! This post has been a long time coming. I had most of these parts for separate projects, but I wanted to play with the thermal camera module, and I needed a case for the PyPortal, and it all just came together. The firmware is open source, and the… Continue Reading Steampunk Thermal Camera The post Steampunk Thermal Camera appeared first on Cass-E Design.
encoded: A Thermal Camera with a steampunk aesthetic! This post has been a long time coming. I had most of these parts for separate projects, but I wanted to play with the thermal camera module, and I needed a case for the PyPortal, and it all just came together. The firmware is open source, and the I've licensed the model under an Attribution-NonCommercial Creative Commons (4.0 International License). The case is very simple though, and you could easily design your own. (If you do, send links to me, and I'll include them below!) Case Design The case is based on old-fashioned cameras, with a bit of a steampunk flair. I store the device vertically (hence the Logo orientation), and you can use the loops for a wrist strap or lanyard connections to wear it around your neck. You use the camera horizontally (so far). It functions more or less like a modern point-and-shoot, controlled through the touchscreen. I left the side peripherals as well as the ambient light snesor exposed, so you could still use the device with other peripherals. I started with the premise of more-or-less plug-and-play case for the PyPortal Tytano, with the electronics all using crimped connectors. As the design progressed, I dropped the crimped connectors in favour of sturdier soldered wires and a more compact design. I really enjoy the aesthetic, and I look forward to trying to develop it in future projects. Caveats The PyPortal has a very slow screen, and it's limited by thermal sensor read time, especially in Python. My firmware uses C++ for speed, on the Arduino Framework. I still only achieve something like 2fps with checkerboard interlacing to avoid visible wipes. Additionally, with the MLX90640 coming in around $60 and the PyPortal coming in around the same, it's not significantly cheaper than a much more friendly consumer thermal camera unless you get the parts on sale. Electronics MLX90640 Thermal Camera module from Pimoroni (Any MLX90640 should do, although the supports are lined up for the Pimor…

LED Sun Clock
type: item
creator: cass-e
date: 2021-07-13T21:03:24Z
subject: Maker
subject: arduino
subject: c++
subject: clock
subject: esp
subject: esp8266
subject: led
subject: wireless
description: An analog-ish LED sun clock! This design came about from my desire to make more functional glowy objects, and some trepidation towards designing a mechanical clock that is quiet & efficient enough to sit on a wall. This project uses an ESP8266. It syncs with a local NTP server to keep time on track every… Continue Reading LED Sun Clock The post LED Sun Clock appeared first on Cass-E Design.
encoded: An analog-ish LED sun clock! This design came about from my desire to make more functional glowy objects, and some trepidation towards designing a mechanical clock that is quiet & efficient enough to sit on a wall. This project uses an ESP8266. It syncs with a local NTP server to keep time on track every 13ish hours, and accounts for Daylight Savings Time automatically! This time, I experimented with edge lighting the acrylic instead of backlighting, which allows for a thinner profile since I don't need as much distance from the wall for the LEDs to diffuse. 24 hour "Timelapse" of the clock. Warning for rapidly spinning Seconds light. Aside: Photographing this project proved troublesome and delayed this post by a few days. While the LEDs (in my opinion) look good to the human eye, my camera has a much harder time with them. They peak on the sensor and start to look bad at low exposure levels, far below what is needed to light the scene. If you have any advice about dealing with this, please contact me! Reading the Clock Once again, I wanted to play with a different way to read the device than normal clocks. I haven't invented the LED clock here, nor the sun-themed clock, but I had a lot of fun. Hours - Red Minutes - Orange Seconds Marker - Yellow Following the sun theme, I wanted to use warm colours for the lights. I decided to assign the colours by ascending frequency. Hours, like red, are lowest frequency, and seconds, like yellow, are highest. Supporting this, I made the red arc for hours widest, the orange next widest, and so forth. This also servers a second purpose. Everything is represented by one set of 40 lights, so markers can overlap. Seconds overlaps Minutes and Hours, and Minutes overlaps Hours. By making Minutes narrower than Hours, and Seconds narrower than Minutes, when they overlap all markers remain visible. For people who can't see warm colours well, here's a palette swap, which sort of makes it look like a porthole: <img loading="lazy" decoding="…

WebP & WebM Adobe Plugins
type: item
creator: cass-e
date: 2021-06-07T18:07:00Z
subject: Resources
subject: adobe
subject: video
description: WebP (WebP Wikipedia entry) & WebM (WebM Wikipedia Entry) are open source image & video formats respectively that allow greater image compression than traditional formats like JPEG and PNG. They're backed by Google, and most modern browsers support them (caniuse on WebP support). Support outside of browsers is still growing. When I last tried a… Continue Reading WebP & WebM Adobe Plugins The post WebP & WebM Adobe Plugins appeared first on Cass-E Design.
encoded: WebP (WebP Wikipedia entry) & WebM (WebM Wikipedia Entry) are open source image & video formats respectively that allow greater image compression than traditional formats like JPEG and PNG. They're backed by Google, and most modern browsers support them (caniuse on WebP support). Support outside of browsers is still growing. When I last tried a few months ago, WordPress didn't seem to natively recognize .webp files. They now work fine. Despite growing support, many Adobe programs still don't recognize or export to these formats, requiring you to use external converters. These formats are important for small media-heavy sites like cass-e.net because they can help reduce server bandwidth and load times. So it's a little frustrating when processing these files requires extra steps. I came across this plugin by fnord adding WebM exports to Adobe Media Encoder while getting my recent physical project ready for posting. I planned to include a few short videos demoing functionality, and I wanted to use either animated .webp or .webm files. The project was running a few days later than I'd hoped, so I was on the lookout for time-saving measures and I ran into their plugin, allowing me to export directly to that format from Premiere. It worked well! I also appreciate that their plugins are open source. fnordware Check it out on their website, or check it out on the Adobe plugin page. fnord also has a (beta) Photoshop plugin adding WebP support on GitHub here although it hasn't been updated since 2017, and I haven't tested it. WebM Project While doing research for this post I came across WebPShop, a Photoshop plugin adding WebP Support on the WebM project GitHub. My recent post with short demo videos that take advantage of this plugin's direct export capability: Wireless Two-Way Office Doorbell The post WebP & WebM Adobe Plugins appeared first on Cass-E Design.

Wireless Two-Way Office Doorbell
type: item
creator: cass-e
date: 2021-06-03T12:30:00Z
subject: Maker
subject: arduino
subject: c++
subject: esp
subject: esp8266
subject: wireless
description: I built a wireless two-way office doorbell! It gives my father a do-not-disturb indicator for when he's on calls and lets him respond when I ring without having to mute. It utilizes ESP-NOW with two ESP8266s. I styled these after some of the intercoms in Star Trek: The Original Series for a few reasons. Firstly,… Continue Reading Wireless Two-Way Office Doorbell The post Wireless Two-Way Office Doorbell appeared first on Cass-E Design.
encoded: I built a wireless two-way office doorbell! It gives my father a do-not-disturb indicator for when he's on calls and lets him respond when I ring without having to mute. It utilizes ESP-NOW with two ESP8266s. I styled these after some of the intercoms in Star Trek: The Original Series for a few reasons. Firstly, my father and I have watched a lot of Star Trek together. Secondly, trek devices had abstract & tactile interfaces which compel me. For example, buttons are coloured & shaped, not labeled. This is mostly because they're props, but it inspires me to think about the different ways we interact with tech. Here, 7 LEDs, 4 buttons, 2 microcontrollers, and 1 speaker can tell me when my father's in a call, and when I can bug him about dinner. And I'm hopeful the functionality is pretty intuitive. I believe the functionality of my device is substantially different from the functionality depicted in the show, and I've made some alterations to the design. Still: I DO NOT OWN STAR TREK, NOR WAS THIS PROJECT AFFILIATED WITH PARAMOUNT IN ANY WAY. Paramount owns the design for their intercoms. If you represent Paramount or an affiliate and you'd like me to remove these images, please contact me. For more details on this fancy two way office doorbell, and more pictures, read on: Client/Visitor (Doorbell) The client has one button for "May I come in?" which I call Request. Description: A demo of pressing the Request button on the client device. Hub/Occupant (Feedback) The Hub sits upright on your desk for visibility & easy access. When someone outside hits Request, it plays a beep from a MicroSD card, allowing the user to change or disable the beep. The hub has 3 buttons, ordered closest to farthest / bottom to top, by how often I expect they'll be used. ⬤ - Yes: Least often. A circle for Accept! ◻ - Wait: Most often. The square is for stop or pause. ◖ - No: Second most often. A down arrow which points to the Do-Not-Disturb light. Description: A demo of the buttons on the Hu…

p5.js WordPress Legacy Update
type: item
creator: cass-e
date: 2021-03-21T18:32:33Z
subject: Plugin
subject: javascript
subject: p5.js
subject: p5jswp
subject: php
subject: wordpress
description: Someone contacted me recently about the p5.js WordPress Plugin I created for this site, and I've started looking into a rework that's both Gutenberg friendly & supports more features. In the meantime, I've decided to update and publish the current version of my plugin under the title 'p5js-wp-legacy'. To recap, this plugin creates a Shortcode,… Continue Reading p5.js WordPress Legacy Update The post p5.js WordPress Legacy Update appeared first on Cass-E Design.
encoded: Someone contacted me recently about the p5.js WordPress Plugin I created for this site, and I've started looking into a rework that's both Gutenberg friendly & supports more features. In the meantime, I've decided to update and publish the current version of my plugin under the title 'p5js-wp-legacy'. To recap, this plugin creates a Shortcode, [p5jswp]. This shortcode allows users to embed a p5.js script safely alongside other content, using an iframe like the p5.js web editor. Included with the plugin is a copy of p5.js. Other libraries can be included per p5.js sketch via the shortcode. The plugin is currently available on GitHub, under GPL v2 or later. Once I've tested it and I'm fully comfortable it's in a release state I'll upload it to the Plugin Directory. Wordpress Plugin allows local hosting & embedding of p5.js scripts directly in posts & pages using iframes & shortcode. Legacy version uses shortcodes & has maximum compatibility. https://github.com/cass-e-design/p5js-wp-legacy 0 forks. 2 stars. 0 open issues. Recent commits: readme improvements, Cass-E Design Allow multiple scripts with script attribute, Cass-E Design Parsing fixes-Fixed double decode/encode of HTML Entities-added multiline striping for libraries attribute-readme changes, Cass-E Design More readme changes, Cass-E Design ReadMe updatesExplain changes to JavaScript & CSS filtering, general improvements, Cass-E Design Updates Somehow last time I did this, I missed out on the srcdoc attribute, which explicitly exists to let you specify the content of an iframe on the server/parent side. Just about every browser supports it besides Internet Explorer, which means all the browsers - and maybe more - that p5.js supports. So I've dropped the complicated iframe-isolation-url-passing-stuff I was doing before in favour of the srcdoc attribute, and been able to add a few more features. This is far from everything I could want, but it's significantly better than it was before. New Features For an in-dep…

p5.js Off Axis Projection
type: item
creator: cass-e
date: 2021-03-19T07:09:21Z
subject: Digital
subject: Interactive
subject: p5.js
description: I started playing with p5.js & off axis projection recently, and I wanted to put together my demo and thoughts. Using Off Axis Projection, we can render content on a screen which appears to be truly 3-dimensional to the viewer. In order to give the impression of true 3D, we need to match the content… Continue Reading p5.js Off Axis Projection The post p5.js Off Axis Projection appeared first on Cass-E Design.
encoded: I started playing with p5.js & off axis projection recently, and I wanted to put together my demo and thoughts. Using Off Axis Projection, we can render content on a screen which appears to be truly 3-dimensional to the viewer. In order to give the impression of true 3D, we need to match the content to the user's perspective. My goal here has been to do this as accessibly as possible, using portable code anyone can run in a browser. My demo is down below! I created a scene in Blender, and baked the lighting & textures using the Cycles renderer. Then I exported the scene to render in p5.js. This means that the content of the scene is more or less constrained to be static, but a regular browser should be able to explore relatively high fidelity scenes. It's a work in progress. You'll probably have to click on the sketch to get any response, and if you don't have a camera, you'll have to uncheck the 'tracking' box underneath to use your mouse instead. Demo <iframe sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms allow-modals allow-downloads" style="width: 100%; max-width: 100%; height: 700px; border: none;" srcdoc=" "> <!--/noptimize>--> Space Image out the window credit to Felix Mittermeier on Pexels Details: The project contains a second canvas that displays an overview of the contents, along with a representation of the viewer position. It also contains 3 sliders and a checkbox. Checkbox is used to enable/disable head tracking, allowing you to simulate the head position with the cursor. Sliders are X, Y, and Z respectively, and allow the user to offset the view from the head tracking position I used the JavaScript library headtrackr (see dependencies), which is an older head tracking library. It cleverly aimed to make head tracking more performant on the browser by only performing actual head tracking occasionally, and using cheaper tracking every tick for greater fidelity. What Is Projection Projection in rendering is the process…

Two Desks
type: item
creator: cass-e
date: 2020-09-12T16:05:00Z
subject: Digital
description: Welcome to my home studio! I've developed a habit - through extensive clutter - of working at two separate desks. I've found it helps put me in different headspaces. My project desk on the right is usually covered in project materials, while my computer desk barely houses my computer and office clutter. I've divided the… Continue Reading Two Desks The post Two Desks appeared first on Cass-E Design.
encoded: Welcome to my home studio! I've developed a habit - through extensive clutter - of working at two separate desks. I've found it helps put me in different headspaces. My project desk on the right is usually covered in project materials, while my computer desk barely houses my computer and office clutter. I've divided the room to keep almost all working electronics on the 'digital' side, including clocks. Largely because they take up too much space. As a result, I can spend hours working at my project desk without knowing what time has passed. And I can spend hours at my computer desk too, knowing exactly what time has passed. It's difficult to say which I like more. Nonetheless, I've come to prefer to have two separate desks if I can squeeze them in. I value the division of tasks by space. Project completed in April 2020 soon after quarantine started. I intended the style to be an homage to artist Malika Favre with solid blocks of opaque colour and simple shapes. The post Two Desks appeared first on Cass-E Design.

ForkAwesome (& FontAwesome)
type: item
creator: cass-e
date: 2020-09-04T16:05:00Z
subject: Resources
subject: iconography
subject: typography
description: I just learned about ForkAwesome, a free and community driven branch of FontAwesome 4.7 that apparently started in February, 2018[2.1]. According to their website and the ForkAwesome GitHub[2], they branched FontAwesome from version 4.7 because of "concerns regarding the development ... and the direction" of version 5. They are attempting to maintain a community driven… Continue Reading ForkAwesome (& FontAwesome) The post ForkAwesome (& FontAwesome) appeared first on Cass-E Design.
encoded: Deprecated: A fork of the iconic font and CSS toolkit https://github.com/ForkAwesome/Fork-Awesome 152 forks. 1,350 stars. 157 open issues. Recent commits: revert readme status to deprecated, douginamug Merge pull request #438 from ForkAwesome/WisTex-patch-1Update README.md, GitHub Update README.mdUpcoming changes to Fork Awesome., GitHub clearly state deprecation, Doug add deprecation banner to website, Doug I just learned about ForkAwesome, a free and community driven branch of FontAwesome 4.7 that apparently started in February, 2018[2.1]. According to their website and the ForkAwesome GitHub[2], they branched FontAwesome from version 4.7 because of "concerns regarding the development ... and the direction" of version 5. They are attempting to maintain a community driven version of the project (ForkAwesome GitHub, [2]). When ForkAwesome split from FontAwesome, it had only 655 icons, and it's now grown to over 700. For those not aware of FontAwesome, it's an online repository/collection of icons that you can link and add into any web platform (like websites or electron apps) with just a few lines of code. It is now approaching version 6, and has over 5,000 icons. They've added multiple icon sizes, duotone, better support for colours, stacking, and more. It's a truly incredible resource. Please tell me if you'd like me to write more about it! FontAwesome/FortAwesome/Fonticons, Inc. FontAwesome was started by Dave Gandy around 2012ish[2.1]. It's an easy online repository of icons for use in a multitude of online projects, with millions of users. Gandy maintained it on github directly until at least the 4.7 release in October 2016. It's my understanding that the project accepted community contributions until shortly before then. This period seems to be the model that ForkAwesome wants to emulate. Over time, the community and iconset grew. Gandy started Fonticons, Inc. in May of 2015 (OpenCorporates, [3]). In late October 2016, Gandy launched Font Awesome 5's Kickstart…

The Anvil Studio
type: item
creator: cass-e
date: 2020-07-15T18:38:44Z
subject: Digital
subject: vector
description: I had the privilege of visiting The Anvil Studio, an art gallery and studio in Pottstown, PA. They offer art lessons, which is how I learned about them. It's a really incredible space. From the second I walked in the door I knew I wanted to remember it, so I asked to take some photos.… Continue Reading The Anvil Studio The post The Anvil Studio appeared first on Cass-E Design.
encoded: I had the privilege of visiting The Anvil Studio, an art gallery and studio in Pottstown, PA. They offer art lessons, which is how I learned about them. It's a really incredible space. From the second I walked in the door I knew I wanted to remember it, so I asked to take some photos. When I wanted a location to illustrate, this building came to mind immediately. I'm not affiliated with The Anvil Studio in any way, nor was I paid for this piece. Since I illustrated this piece, I've learned they're in the process of moving to a new location. Keep an eye out for an illustration of the new location, and check them out if you're in the area! The post The Anvil Studio appeared first on Cass-E Design.