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.
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.
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.
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 Pimoroni module). Adafruit PyPortal Tytano Adafruit PowerBoost 1000C (You could probably use a smaller LiIon charger/PowerPath, this is what I had on hand, and what the supports fit). Small Lithium Ion battery (mine is used, don't know strict capacity. ~800mAh?) (Please be very careful with Lithium Ion batteries, even small ones. They can cause fires when used improperly). 5mm Power Switch Wire (mine is 30 AWG) and a soldering iron. Hardware Required: 4 M3x~16mm bolts (up to 18mm should work) Optional: 2-6 M2x~6mm bolts (up to 8mm should work) I say “2-6” because while the design includes 6 bolt holes for securing the internals, I ended up friction-fitting the thermal camera module and only using two exterior bolts to secure the Powerboost Required: Hot Glue for securing battery, power switch, and anything else you want to glue. Source Code + Model The Firmware can be found on Github. The firmware is pretty bare-bones, but the newest versions are written to support expansion and I do want to revisit this if I find the time. The model can be found on Printables, along with more specific instructions for printing and wiring. Questions If you're familiar with an open thermal image format that's compatible with a camera of this resolution (32x64), please let me know! Finally, Please enjoy this image of my dog, taken with the camera: <img fetchpriority="high" decoding="async" width="1024" height="768" src="https://cass-e.net/media/20220730_225614-1024x768.jpg" alt="" class="wp-image-1323" srcset="https://cass-e.net/media/20220730_225614-1024x768.jpg 1024w, https://cass-e.net/media/20220730_225614-300x225.jpg 300w, https://cass-e.net/media/20220730_225614-768x576.jpg 768w, https://cass-e.net/media/20220730_225614-1536x1152.jpg 1536w, https://cass-e.net/media/20220730_225614-2048x1536.jpg 2048w, https://cass-e.net/media/20220730_225614-1320x990.jpg 1320w" sizes="(max-width: 1024px) 100vw, 1024px" /> A thermal image of my dog. Taken with the camera! As always, thanks for reading! And a thanks again to the members of my patreon, who got a few sneak previews of this project in advance, including the above image. They really help me have time to do more stuff like this. The post Steampunk Thermal Camera appeared first on Cass-E Design.
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.
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="async" src="https://cass-e.net/media/SunClockPreview-Blue-1024x1024.jpg" alt="" class="wp-image-1245" width="512" height="512" srcset="https://cass-e.net/media/SunClockPreview-Blue-1024x1024.jpg 1024w, https://cass-e.net/media/SunClockPreview-Blue-300x300.jpg 300w, https://cass-e.net/media/SunClockPreview-Blue-150x150.jpg 150w, https://cass-e.net/media/SunClockPreview-Blue-768x768.jpg 768w, https://cass-e.net/media/SunClockPreview-Blue.jpg 1080w" sizes="auto, (max-width: 512px) 100vw, 512px" /> Palette Swapped LEDs to Blue/Green. Blue light illustrates my problems photographing this project! Sun Clock Design Designing this clock was a lot of fun. I went into this with absolutely no preconceptions of what it should look like, and my original ideas looked significantly different than my end result. My favourite part was designing the display method for the time. My favourite part of the physical end-product though is the gold filament. In my opinion, it makes the design. The Original Design The original concept was much bigger, in black, and had two rings of LEDs. One for backlighting, and one to tell the time. I wanted to experiment with some kind of moving part, but I didn't want to use it for timekeeping. The LED ring for the clockface would have been totally exposed, while the backlight played shifting colours (sort of like An Abstract Hug). I purchased LEDs while still designing the clock, which explains why I didn't use more densely packed LEDs with greater resolution. A larger design would have required significantly more of them, running the energy cost up and requiring a larger transformer. I consolidated to one LED ring for a few reasons. The Final Design I consolidated to a smaller LED sun clock and only one LED ring for several reasons. It was cheaper, more power efficient, and the original design was pretty ridiculous at 16-17" in diameter. The diffusion panel was a better look for the front, and leaving the back open for backlighting & diffusion saved weight and material. While I've used acrylic once before, I hadn't tried edge-lighting and I was eager to see how it compared. In addition, I would have needed to break the quadrants down even more to print them. I had to print the outer ring in 4 interlocking quadrants, because the project is much larger than my printer bed. Each quadrant covered nearly the whole print area. Some of my patrons on Patreon, to whom I'm very grateful, got to see a WIP Preview of this project including some print timelapses for a few of the sections. Didn't-Quite-Works One aspect of the design which didn't work entirely as I wanted was the backlighting. I had intended for there to be more of it, radiating out from the back of the clock in rays, but for once I overestimated the WS2812b. On many projects I run them at barely 25%, so I tend to assume they're capable of infinite brightness. Sadly they aren't, especially in red. <img loading="lazy" decoding="async" width="1024" height="360" src="https://cass-e.net/media/SunClockRenderRays-1024x360.jpg" alt="Preview render with more backlighting" class="wp-image-1246" srcset="https://cass-e.net/media/SunClockRenderRays-1024x360.jpg 1024w, https://cass-e.net/media/SunClockRenderRays-300x106.jpg 300w, https://cass-e.net/media/SunClockRenderRays-768x270.jpg 768w, https://cass-e.net/media/SunClockRenderRays.jpg 1080w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /> Hopeful preview render with more backlighting. Another was the readability of the clock! It's readable, it's aesthetically pleasing, and I'm proud of it for being weird, but it's not the kind of instant to-the-minute read you might get from a standard analog clock. At least, not without experience. Learned for Next Time WS2812b do not have infinite brightness The 1khz interrupt I was using from the RTC to track milliseconds interfered with the LED control signal, resulting in flickering LEDs. As a result, I had to guesstimate milliseconds, which I think has worked okay. Triple check ballpark print durations early in the process to improve scheduling Turning the WiFi back off on the ESP8266 may not be as straightforward as one might hope RTCs may not account for milliseconds; They're great for timestamps, alarms, etc., but not as great for analog clocks. Bill of Materials Wemos D1 Mini ESP8266 DS3231 RTC Pi Breakout 1 MicroUSB Cable (Power/Programming) 40x WS2812b Addressable LEDs roughly 9in2 Acrylic Wire Solder Hot Glue ~240g of PLA Filament Tools 3D Printer Wire Cutters/Strippers Soldering Iron PlatformIO & C++ Sander(s) The post LED Sun Clock appeared first on Cass-E Design.
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.
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.
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.
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 Hub. If you hold the 'No' button, it enables Do Not Disturb. Description: A demo of Do-Not-Disturb Mode on the Hub. Both units show the lights in sync. When Request is pressed, both devices flash blue. When Decline is pressed, both devices flash red. This reinforces the functions with use. Goals Hub/Occupant can indicate when they're busy Client/Visitor should be able to request entrance unobtrusively Hub/Occupant should be able to respond easily and quietly Implementation Painting I didn't have PLA that matched the light blue, so I took the opportunity to try painting PLA. I used acrylic over a white primer, and this had mixed results. It made the devices look wooden rather than plastic, but I was hoping the paint would be smoother. While I sanded the PLA significantly before and slightly after priming, the paint remained fragile. Microcontrollers & Firmware This project is powered by two ESP8266 microcontrollers, programmed in C++. I used PlatformIO, but stuck with the Arduino framework. They communicate via ESP-NOW, which was fairly painless to implement once I got over the gotchas. ESP-NOW already includes features like receive-confirmation, so I built a minimal shared communication library with message structures and a few fun features. Communication Protocol I addressed potential communication interruptions in a few ways. State-based messages This way I can safely ignore lost messages, and only the latest message is needed. It also means that state can't get "stuck" if an intermediate message is lost, only if the devices lose communication for extended periods. A buffer which continues to re-send the last message until confirmation If the latest update has failed to go through, it'll keep trying. This prevents state from getting stuck, as above. keep-alive messages The devices will naturally check if they're connected once a minute. If they're disconnected, there's an error status light that plays. This way, the user knows if there's an issue (ie. the target device goes offline) before they try to send something. ESP-NOW Gotcha #1 At least in the Arduino framework, you have to call esp_now_set_self_role() or you'll get absolutely no feedback from esp_now calls. No send errors, no nothing. Learned for Next Time To get even diffusion of LEDs, the client device could have been thicker. The ESP8266 (Or at least this D1 Mini breakout) had barely enough GPIO. ESP-NOW is pretty easy to use if you can work inside the 250 byte packet limit. I should come up with a cooler project name than 'doorbell' I intended this for use within speaking distance, like waving. My father's actually deployed the hub/client much farther apart. This usage has suggested a few features: Notification sounds at the client/visitor side (symmetric functionality) Improved the message loss handling to address the larger distance I've already done some of this An external/non-PCB antenna for greater reliability Bill of Materials 2x Wemos D1 Mini ESP8266 2 MicroUSB Cables (Power/Programming) 7x WS2812b Addressable LEDs 4x Omron B3F-4155 Buttons Speaker DFRobot DFPlayer MicroSD Card M3 Bolt Wax Paper (Diffuser) Wire Solder Primer Acrylic Paint ~100g of PLA Filament Tools 3D Printer Wire Cutters/Strippers Soldering Iron PlatformIO & C++ This is the first post in the new Maker category! You can expect more projects in this category in the future. The post Wireless Two-Way Office Doorbell appeared first on Cass-E Design.
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.
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-depth description of features & usage guide, check the GitHub. I'm updating the documentation and changelog there as the plugin evolves. This is a description of how I've made certain features work rather than a usage guide. Inline JavaScript Inline JavaScript has been tricky, but it's feature I consider largely necessary for using something as convenient as p5.js with WordPress. There were two barriers in the way, but they solved eachother. The content of the attributes of a shortcode is stored as HTML instead of plaintext. Any multiline attribute contains and tags. The only way to strip this out, short of parsing the JavaScript, is to strip all and tags, even any that might be there intentionally. WordPress (WP) doesn't like special characters, so all the special characters have to be encoded. WP will encode any unencoded content on save. But if WP has to do so, it will unencode "s, which will break Shortcode parsing. Browsers don't support HTML Entities as valid JavaScript characters. Helpfully, the iframe will decode HTML entities naturally when it interprets the srcdoc attribute. And because everything is encoded in the editor, the only raw HTML present on the server side is created by WordPress and can safely be stripped out. I'd still like not to require the user encoding their scripts manually / in the editor, but ironically it might make things harder. Other New Features Inline CSS Inline CSS for the interior of the iframe, much like Inline Javascript. Libraries Include multiple JavaScript libraries via URL in the head. Manual Width/Height Specify the HTML width/height attributes. Other Classic Features Not Inline JavaScript: JavaScript file(s) can be included in the body via URL via the script attribute. Caption: The p5.js script is placed inside a figure, so this attribute specifies a caption. Supports HTML. You can find more usage information on the GitHub page. You can find my original post about the plugin here. Go forth and make p5.js wordpress content! Other fun stuff! Autoptimize Compatibility: When first released, I found a "bug" that Autoptimize stole CSS/JS out of iframe srcdocs. See issue #356 on the Autoptimize GitHub. I've updated the plugin with the recommended workaround, so it should be compatible with Autoptimize. The post p5.js WordPress Legacy Update appeared first on Cass-E Design.
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.
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 <!--/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 of creating a 2d representation for coordinates in a 3d world. Typically on computers we render 3d scenes with perspective or orthographic projection. As Wikipedia points out, these are really categories, but I've seen these words used most often to describe the same basic ideas. <img loading="lazy" decoding="async" width="512" height="512" src="https://cass-e.net/media/p5js-off-axis-projection-perspective.png" alt="" class="wp-image-900" srcset="https://cass-e.net/media/p5js-off-axis-projection-perspective.png 512w, https://cass-e.net/media/p5js-off-axis-projection-perspective-300x300.png 300w, https://cass-e.net/media/p5js-off-axis-projection-perspective-150x150.png 150w" sizes="auto, (max-width: 512px) 100vw, 512px" /> Perspective rendering is the one you're probably most familiar with. It represents objects more or less like a camera. There's usually one vanishing point, and distant things recede in size according to the Field of View. Most video games take advantage of perspective rendering. More on Wikipedia <img loading="lazy" decoding="async" width="512" height="512" src="https://cass-e.net/media/p5js-off-axis-projection-ortho2.png" alt="" class="wp-image-901" srcset="https://cass-e.net/media/p5js-off-axis-projection-ortho2.png 512w, https://cass-e.net/media/p5js-off-axis-projection-ortho2-300x300.png 300w, https://cass-e.net/media/p5js-off-axis-projection-ortho2-150x150.png 150w" sizes="auto, (max-width: 512px) 100vw, 512px" /> Orthographic is the second most common. It's like perspective, but with no adjustment over depth. It's frequently used to generate to-scale plans, charts, diagrams, or even 3D decals, that want for an image without perspective warping. More on Wikipedia These aren't the only ways that people represent 3D space. There are other methods and subcategories of projection, and also 'faked' 3d styles included in games or rendering environments that don't truly support 3D. Off Axis Projection The Problem: How do you render something so that it looks 3d to the viewer. Typical projection is designed to make things appear 3d relative to eachother, and not the medium itself. These also almost always considers the screen the origin, or assumes that the viewer will be in a same basic position in front of the screen. As Robert Kooima points out in his paper Generalized Perspective Projection (see citations) this is usually good enough, although not in our case. He goes on to describe in general terms the concept of Off Axis Projection, with his use case of multiple screens for Virtual Reality. The Solution: Anamorphosis, and viewer tracking. Anamorphosis is creating an image that looks correct from one position, or requires other special viewing conditions (ie. special glasses). One well known and entertaining example of Anamorphosis is The Ambassadors by Hans Holbein the Younger, painted in 1533. You've probably heard of it: The Ambassadors, Hans Holbein the Younger, 1533 Image credit Wikipedia When the painting is viewed from the correct position Image credit Wikipedia There's a fun (unsubstantiated) story about The Ambassadors being hung in a narrow stairway, so that the skull would seem to jump out when the viewer position became perfect, and scare the daylights out of them. The painting's Wikipedia page mentions it. So if we can create an image that looks 3D from the correct position, and match that correct position to the viewer's position, we can do it! The technique to do this has been explored by Robert Kooima & others - the creators of headtrackr used it to make a game as Øygard notes in his tumblr post on the subject (see citations). Off Axis Projection is essentially unlinking the vanishing point from the center of perspective rendering, so that you can move the camera and perspective around to match the user while still rendering the same content. Michal Szkudlarek & Maria Pietruszka's paper Head-Coupled Perspective in Computer Games (see citations) was integral to my understanding of how to set up the projection matrix I needed in the time I had available, and my related algorithms in the code are modified versions of theirs. Why p5.js? Live Rendering My goal with this project has been to make this runnable in as many places (and for as many people) as possible. This technology requires live tracking the viewer and rendering to match their perspective, and therefore live rendering. I believe p5.js fits that goal best for now. It's quick to load, accessible on many mobile devices, and relatively cheap in terms of performance. With this setup you can (in theory) tape a tablet to the wall, and you have a gallery installation. To get this running on as many devices as possible, we process everything we can beforehand. Lighting & textures are baked and compressed, so all the script has to do is track the viewer, project the scene, and display it. This allows us a lot of flexibility in how we do these steps, and it gives us extra performance budget for head tracking, which isn't cheap. In addition, the actual content & quality of the scene is relatively independent from the way we display it, so it could be ported to other engines like three.js or even Unity. Because of this work, I hope my demo should run in your browser right now! Although the head tracking might be a bit laggy on some phones. If it doesn't, please feel free to contact me with any information you can provide so I can try to address the issue. Limitations As I've noted elsewhere, this technology has several severe limitations. With the use of head tracking, this only really works from the perspective of one viewer (and perhaps other viewers standing exceptionally close). Head tracking is expensive, and limited to what can be recognized by the system's camera, which is limited by lighting in the environment, quality of the camera, etc. It works best at short-medium ranges. The fidelity of the content and the quality of the head tracking are limited by the resources of the system. Dependencies This project would not have been possible without a pre-existing javascript Head Tracker I could pair it with. I was lucky to find @auduno's headtrackr, and lucky that it worked so well for my purposes. Citations Kooima, R. (2009). Generalized perspective projection. J. Sch. Electron. Eng. Comput. Sci, 6. src Øygard, A. M. (2012, June 15). Head Tracking with WebRTC. auduno.tumblr.com. src Szkudlarek, M., & Pietruszka, M. (2013). Head-coupled perspective in computer games. src More Reading Artist Michael Kozlowski has been working on a series of '3d' pieces using headtracking and Unity, as well as a series of piecs using Lenticular Lenses Bachelor thesis Virtual Reality: A Study of Perspective by Miartin Holst Erichson and Peter Hillebrandt Poulsen. I found their demo on youtube whikle I was creating my demo, but didn't find their paper until I was writing this up. An implementation which generates Robert Kooima's generalized perspective projection matrix (I have not tested or checked this) Youtube channel Code Parade has a few videos about projection for different coordinate systems (Spherical, Hyperbolic), which are pretty interesting. The post p5.js Off Axis Projection appeared first on Cass-E Design.
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.
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.
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.
A fork of the iconic font and CSS toolkit Being revived. 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 Kickstarter[4]. Notably, he and his new company redesigned all 600+ icons, and started requiring payed licenses. The licenses were tiered by page view counts and offered access to new premium features. Premium content included over a thousand new icons, and new icon styles, like outlined vs. solid. You can find a more complete list of changes in the FontAwesome 5 Upgrade Guide. They reference a 4 person team in kickstarter announcements[4], so I think it's likely that they created the FortAwesome GitHub organization around this time as well. The creators of ForkAwesome believe that not every change in 5.0 was positive. ForkAwesome & Concerns regarding FontAwesome development ForkAwesome's readme states: "Following concerns regarding the development of Font Awesome, the PR [Pull Request] Freeze since Oct 2016 and the direction Fort Awesome is taking with the version 5.0 of their project, we are forking Font Awesome (4.7), in order to build on this amazing tool Dave Gandy has given us, while at the same time allowing this project to be run by a distributed community of contributors." ForkAwesome GitHub README.md, quoted September 4th, 2020[2] In 2014, FontAwesome stopped accepting community contributed icon[7.2]. With the release of FontAwesome 5, they also stopped sharing their build process because it included payed icons[7.4.2]. The FontAwesome GitHub repository became as GitHub user xuv predicted, "a file hosting service for the free compiled version of this project,"[7.4.1] although it still houses icon requests & bug reports. I can't find many specific criticisms of ForkAwesome besides some negative reactions to their no-submissions policy, and positive reactions to ForkAwesome's release & progress for being community driven and permissively licensed. However, its growth, the number of GitHub issues it's accrued, and the references to it which do exist on the web lead me to believe that it's been positively received. The timeline, as far as I can tell: On February 3rd 2018, GitHub user @xuv created a fork to make a Pull Request adding the mastodon icon to FontAwesome. They noted that FontAwesome had already stopped accepting icons, but felt that Mastodon deserved to be included, and did the legwork to put it into the existing version (Font Awesome 4). February 4th 2018, @xuv's Pull Request was closed, with a reiteration that icon submissions were not being accepted. @xuv kept the fork open to distribute to other users who wanted access to a version including the Mastodon icon. @xuv also posts their concerns about community contribution in the FontAwesome 5 Update Issue.[7.4.1] February 4th 2018, @xuv's first commit to ForkAwesome, updating the name.[2.1] They also joined the ForkAwesome GitHub organization. Some Benefits ForkAwesome is completely free for commercial use, open source, and licensed under OFL.[1] As the website notes, it's friendly to open source projects. FontAwesome at the time of writing offers their free license to projects with under 10 thousand pageviews a month, and only one seat/editor. GitHub user trnwh comments about ForkAwesome logo coverage, pointing out that ForkAwesome contains logos from free and/or open source projects like archive.org, Arch Linux, xmpp, and others that FontAwesome "refuses to add." (Please Note: I couldn't find any reference to support actively "refusing" to add these icons. There are thousands of icon requests on the FontAwesome github page. A few have been open for almost 8 years. These have varying amounts of community/developer feedback). The Mastodon icon mentioned above has since been added to FontAwesome[7.3], while others have not. Criticisms I have seen but not confirmed criticisms that ForkAwesome 4 takes longer to download on websites. This may be especially true now that at time of writing, FontAwesome works with 'kits' and only downloads subsets of the font based on usage, where ForkAwesome aims for maximum freedom and compatibility and downloads the whole font. In conclusion, check out ForkAwesome! These articles are a result of my own research, and if you have a correction, addition, or other comment I'd be more than happy to hear it at my contact page. Credit will of course be provided. References ForkAwesome Website ForkAwesome GitHub ForkAwesome's first commit, changing the readme by user xuv on February 4 2018 OpenCorporates entry on Fonticons, Inc. FontAwesome 5 Kickstarter FontAwesome 5 Upgrade Guide FontAwesome GitHub Organization: Fort Awesome FontAwesome GitHub FontAwesome apparent first commit on February 17 2012 FontAwesome GitHub Commit 71efac0, Feb 3rd 2014, no longer accepting icon requests FontAwesome GitHub Issue#10897, Feb 3rd 2014, requesting the Mastodon icon in FontAwesome. @xuv leaves his fork containing the Mastodon icon open for other users. FontAwesome GitHub Issue#12199, "Upgrading the master branch to Font Awesome 5" FontAwesome GitHub Issue #12199, @xuv concerns about community contribution FontAwesome GitHub Issue#12199, Maintainer comment on private build process GitHub user trnwh comment about ForkAwesome logo coverage The post ForkAwesome (& FontAwesome) appeared first on Cass-E Design.
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.
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.