INTERACTIVE 3D MODEL

Tuesday, April 29, 2025

Quick update to announce successful deployment of interactive 3d model!

Built using Blender and Three.js.

LIVE LINK

OPTIMIZING ANIMATION ASSETS FOR THE WEB

Tuesday, April 29, 2025

We consider storage size and CPU cost for GIF files and animating JPEGs and PNGs using JavaScript.

STORAGE SIZE:

Images on the web use compression; JPEGs use lossy (reduced file size) and PNGs use lossless. GIFs use a form of lossless called LZW.

Being lossless, GIFs and PNGs are similar in file size. JPEGs are smaller. A quick case study:

3 second 300px x 300px animation

GIF: less than 3MB
PNG: less than 2MB
JPEG: less than 600KB

CPU COST

Because GIFs run natively in browser, they have a very low CPU cost. JavaScript animation for JPEG or PNG files can be optimized, but will always require some CPU for memory churn.

Let's look at CPU cost in JavaScript animation for JPEGs and PNGs.

SCENARIO 1: Targeting an img element and swapping the src attribute every x number of milleseconds (high CPU cost).
SCENARIO 2: Using a canvas element and a drawImage method (low CPU cost, but work gets reallocated to GPU).

In the optimized second scenario, we have a very low CPU cost and the additional option to use a lossy compression (JPEG) to improve performance on mobile and low-power devices. As is usually the case in optimization, we must consider our use case and determine which of our optimizations meets our needs without compromising our minimum viable quality.

PORTFOLIO UPDATE: VIRTUAL PET

Friday, March 28, 2025

To improve the interactivity of the virtual pet, I added a 'play' behavior.

I first created a new animation in Blender.
I created a video file of the animation, and used Adobe Express to process it into .gif frames.

A side effect of Adobe Express' .gif conversion app is that it reduces brightness.
To account for this, I increased the source video's brightness beforehand.

The last step was to upload the file to my s3 bucket and connect it to the virtual pet.

LIVE LINK





CASE STUDY: EMBROIDERED QR CODE

Thursday, March 27, 2025

This case study describes the successful creation of an embroidered QR Code.

Using Adobe, I generated a digital QR code.

I imported this QR code into Embrilliance, a program for creating machine-readable embroidery files.
Embrilliance is vector-based, similar to Adobe's Illustrator program.

I determined the resolution tolerances by embroidering the QR code at incrementally smaller sizes.



CONFIGURING EMAIL IN AWS

Wednesday, March 26, 2025

Configuring an email address with your AWS-hosted domain is a simple and straightforward process.

These instructions require you to have your domain hosted in Amazon's Route 53.

In your AWS console, search for WorkMail.
Create an organization and name it something appropriate.
The name of your domain works fine for general purposes.
Default settings are fine as well.

Next, you will create a user and assign a name to the email address you are configuring.

WorkMail will automatically handle all domain permissions and configuration. Nice :)

To access and test your new inbox in the browser, navigate to: <your organization name>.awsapps.com/workmail and log in.

info@uiuxconcepts.com