Forem: Marc Mintel

I created a whole macOS app with Flutter just using AI, here is my report

Marc Mintel — Thu, 02 Jan 2025 10:59:42 +0000

Building My First MacOS App: 100% AI-Created Render Manager

For the first time ever, I ventured into creating an app for MacOS, and the craziest part? It was entirely built by AI. I didn't write a single line of code myself. Of course, my background in software development was invaluable in guiding the process, but it’s absolutely insane what’s possible with AI today.

Why a Render Manager?

Rendering complex 3D scenes in Blender is a demanding process, and existing render managers often lack the specific features or flexibility needed for personal workflows. As a Blender user on MacOS, I struggled to find a solution that integrated seamlessly with my tools, offered customizability, and streamlined rendering tasks. This app was born out of necessity, and its development highlights both the capabilities and limitations of AI-assisted programming.

About the App

The app is a render manager specifically made for MacOS. Why? Because I couldn’t find an existing solution that met my needs. Here’s what it does so far:

📦 Drag and Drop: Easily add Blender files to the render queue.
🔐 Blender Addon: Integrates directly with Blender’s render menu for seamless file addition.
🔅 Configurable Settings: Full control over render configurations.
⏹ Mid-Process Stop: Ability to halt rendering at any point.
🔧 Custom Output Paths: Define output paths and naming patterns.
🔄 Auto Retry: Retries failed renders automatically with customizable attempts.
🌐 Network Rendering: Distribute workloads across multiple machines.
🚀 TurboRender Support: Compatibility with advanced features like Temporal Denoising.
📱 Telegram Integration: Remote monitoring and control via Telegram.
⚙️ Command-Line Parameters: Support for custom Blender CLI commands.
🏠 Factory Settings: A troubleshooting mode for resetting configurations.
🎯 Scene Selection: Select scenes and cameras per project.
📁 Organized Outputs: Flexible file organization using pattern variables.
🔍 Real-Time Monitoring: Track render progress live.
📊 Detailed Logs: Comprehensive render logs and error reporting.
🎮 Frame Control: Define start, end, and step values for frame ranges.
🎨 Multi-Scene Support: Manage individual settings for multiple scenes.
🔄 Automatic Data Fetching: Seamlessly retrieves scene data.
📸 Camera Selection: Choose cameras for specific scenes.

Building with AI: Insights and Tips

Patience Is Key

Working with AI requires a lot of patience. It’s also not cheap—each request incurs a cost, and the AI often makes errors. Without version control like Git, the process would be chaotic. Sometimes, the AI replaces sections of code with placeholder comments, so reverting changes is critical. Using Git or similar tools is non-negotiable when relying heavily on AI-generated code.

Splitting Tasks

When working with AI, break down your tasks into small, manageable chunks. This minimizes misunderstandings and helps the AI focus on specific objectives. Restarting chats frequently to maintain instruction clarity also helps.

Debug Logs Are Crucial

It’s essential to let AI create as many debug logs as possible. You’ll often find yourself copying logs into the AI to provide context for what went wrong. This iterative debugging process is vital for resolving issues efficiently.

Where AI Excels

Refactoring: AI handles refactoring impressively well, turning messy code into clean, maintainable structures.
File Splitting: Breaking down large files into smaller ones is essential for managing AI costs and reducing errors.
Prototyping: Quickly generating boilerplate code or testing ideas is where AI shines.

Challenges

Instruction Fatigue: The longer a chat continues, the more the AI seems to ignore custom instructions. Restarting the chat frequently and focusing on small, manageable tasks helps.
Test-Driven Development (TDD): TDD didn’t work as smoothly as expected. However, when this improves, coding with AI will likely reach a whole new level, enabling faster iteration with automated unit tests and quick fixes.

Cost Management

AI tools incur costs for every request. To keep expenses under control:

Plan Ahead: Draft clear, concise instructions before interacting with the AI.
Optimize Code: Use modular design to reduce the complexity of individual AI tasks.
Test Locally: Minimize back-and-forth iterations by testing generated code locally.

Moving Forward

If you’re a Blender user on MacOS, this app might be interesting for you. Since it’s built with Flutter, I plan to port it to Windows and Linux soon. Expanding the app’s reach will involve addressing cross-platform nuances and optimizing performance.

Tools and Setup

I utilized VS Code alongside Cline and Claude for this project. These tools provided a collaborative environment for AI-assisted coding, although their performance varied. Integrating a robust IDE setup and automation tools can significantly streamline AI development workflows.

Final Thoughts

Despite its challenges, this experience has been incredibly rewarding. AI-driven development has its hiccups, but the speed and efficiency of creating an entire app are unparalleled. If you’re considering using AI for your projects, I’d say give it a shot—just remember to bring patience and a solid backup system!

Let me know if you’re interested in trying the app or if you have any feedback. The future of coding is here, and it’s looking pretty exciting.

How to create Scroll-Linked Animations with React and Framer Motion 💃🏻🕺🏻

Marc Mintel — Wed, 01 Mar 2023 13:15:06 +0000

Scroll-linked animations are a popular technique that links animation to the user's scrolling on the page. As you scroll down the page, different elements will animate in or out, giving your website a unique and dynamic feel.

In this tutorial, we'll be using React and Framer Motion to create a scroll-linked animation. Framer Motion is a powerful animation library that makes it easy to create fluid and beautiful animations with React. We'll also be using TypeScript, a popular language that adds strong typing to JavaScript and can help catch errors before runtime.

The Code

Here's the TypeScript code we'll be working with:

import { motion, useScroll, useTransform } from 'framer-motion'
import { useElementViewportPosition } from '../hooks/useElementViewportPosition'
import React, { useRef, PropsWithChildren } from 'react'

export const ScrollReveal: React.FC<PropsWithChildren<{
  offset?: number
  distance?: number
}>> = ({ offset = 0, distance = 50, children }) => {
  const ref = useRef(null)
  const { position } = useElementViewportPosition(ref, offset)
  const { scrollYProgress } = useScroll()
  const opacity = useTransform(scrollYProgress, position, [0, 1])
  const y = useTransform(scrollYProgress, position, [distance, 0])

  return (
    <motion.div
      ref={ref}
      style={{
        opacity,
        y,
      }}
    >
      {children}
    </motion.div>
  )
}

And here's the code for the useElementViewportPosition hook that we'll be using:

import { useState, useEffect, RefObject } from 'react'

export function useElementViewportPosition(
  ref: RefObject<HTMLElement>,
  offset = 0,
) {
  const [position, setPosition] = useState([0, 0])

  useEffect(() => {
    const update = () => {
      if (!ref || !ref.current) return
      const pageHeight = document.body.scrollHeight
      const start = ref.current.offsetTop
      const end = start + ref.current.offsetHeight

      setPosition([(start + offset) / pageHeight, (end + offset) / pageHeight])
    }

    update()

    document.addEventListener('resize', update)

    return () => {
      document.removeEventListener('resize', update)
    }
  }, [offset, ref])

  return { position }
}

How It Works

So, how do these two pieces of code work together to create those scroll-linked animations? Let me break it down for you.

First, we're importing motion, useScroll, and useTransform from Framer Motion, and useElementViewportPosition from our own custom hook. We're also importing some stuff from React.

import { motion, useScroll, useTransform } from 'framer-motion'
import { useElementViewportPosition } from '../hooks/useElementViewportPosition'
import React, { useRef, PropsWithChildren } from 'react'

Next, we're defining a new component called ScrollReveal. This component takes two optional props: offset and distance, which we'll explain in a bit. It also takes some children that we'll animate as the user scrolls.

export const ScrollReveal: React.FC<PropsWithChildren<{
  offset?: number
  distance?: number
}>> = ({ offset = 0, distance = 50, children }) => {

Inside this component, we're creating a new ref with useRef(null). We're also calling our useElementViewportPosition hook and passing in our ref and offset. This hook will return a value called position.

Breaking Down the Code

Now that we've seen the code in action, let's break it down line by line.

import { motion, useScroll, useTransform } from 'framer-motion'
import { useElementViewportPosition } from '../hooks/useElementViewportPosition'
import React, { useRef, PropsWithChildren } from 'react'

Here we have our imports. We're using Framer Motion, a popular React animation library, and importing motion, useScroll, and useTransform. We're also importing a custom hook called useElementViewportPosition from our ../hooks folder. Finally, we're importing React and a couple of types.

export const ScrollReveal: React.FC<PropsWithChildren<{
  offset?: number
  distance?: number
}>> = ({ offset = 0, distance = 50, children }) => {

This line exports a React functional component called ScrollReveal. It's defined as a function that takes a prop object with optional offset and distance properties, as well as the children prop. The component will use these props to determine how much to reveal and how far to animate.

const ref = useRef(null)

This line creates a React ref called ref that we'll use later to track the position of the component in the viewport.

const { position } = useElementViewportPosition(ref, offset)

This line calls the useElementViewportPosition hook we imported earlier, passing in our ref and offset props. The hook returns an object with a position property that we'll use to animate the component.

const { scrollYProgress } = useScroll()

This line calls another Framer Motion hook called useScroll, which returns an object with a scrollYProgress property that we'll use to animate the component.

useTransform does all the Magic!

The useTransform hook is part of the Framer Motion library, which is used in the ScrollReveal component.

The useTransform hook is used to create a relationship between the scroll position and an animated property of an element. In this case, it's used to adjust the opacity and y-position of the animated element (motion.div) as the user scrolls.

In more detail, useTransform takes three arguments: input, inputRange, and outputRange. The input argument is a value that changes over time, in this case the scrollYProgress from useScroll. The inputRange argument is an array that defines the range of the input value (e.g. [0, 1]), and the outputRange argument is an array that defines the range of values for the output (e.g. [distance, 0]).

const opacity = useTransform(scrollYProgress, position, [0, 1])
const y = useTransform(scrollYProgress, position, [distance, 0])

These lines use the useTransform hook to create two new variables, opacity and y, that we'll use to animate the component. The useTransform hook takes three arguments: a value to transform (in this case scrollYProgress), the range of the input values (position), and the range of the output values ([0, 1] for opacity and [distance, 0] for y).

return (
    <motion.div
      ref={ref}
      style={{
        opacity,
        y,
      }}
    >
      {children}
    </motion.div>
  )

Finally, we return a motion.div with our ref and two style properties, opacity and y, that we created using the useTransform hook. We also render the children prop inside the motion.div.

Conclusion

In this article, we've explored how to use TypeScript, React, and Framer Motion to create a scroll-linked animation. We've broken down the code line by line and explained what each part does. If you want to learn more about TypeScript, check out the official documentation. If you want to learn more about Framer Motion, check out the official documentation. Happy animating!

Unity DevLog #2: Basic environment

Marc Mintel — Fri, 08 Jan 2021 10:46:33 +0000

Hey there, so after I introduced my idea let's create a basic environment to get started.

Do your research

So what we need first is obviously a matchfield. A typical foosball matchfield is 120cm long and 68cm wide. That's the scale for my field so I know that one unit equals 1cm.

However don't do too much research: at the end I want to create a fun game and not just make a digital version of a real life foosball game. Real life is completely different so don't waste too much time on recreating every single piece. It's probably not important that the walls are exactly the same height as they should be according to some Foosball League regulations, it's more important that the overall gameplay is great and balanced.

Create the field

I used a simple Plane object and just added a green material on it. I then used cubes with the basic material to create the walls.

Refining it

So one of the first problems that come to my mind when I remember my last foosball match: the ball sometimes will just stand still, especially in the corners. So I went ahead and raised these corners just a tiny little bit so the ball will roll back to a player.

I quickly noticed this wasn't possible using a plane, so I removed it and added a cube. Then I noticed that you can't just grab a vertex and move it up. So I created a cube in blender and exported it as .fbx file.

Later I found out: you can use blender files directly with unity (that's awesome) and you can use ProBuilder to modify meshes.

Moving on

Yes that's a very basic environment but I don't want to waste too much time on this and focus on creating an MVP. The field is not that important for it, I can polish it later, add textures, lighting and most importantly: a goal.

Unity DevLog #1: Introducing the project

Marc Mintel — Wed, 06 Jan 2021 09:54:06 +0000

Hi all! I'm Marc and I'm currently learning Unity. The way I learn best is to first consume a whole lot of videos on a topic and then start a real project.

So why a public devlog?

To recap my learnings I will post most of the stuff here on dev.to. On the one hand those are general Unity learnings (you will find these in my "Digging into Unity" series) and on the other hand it's some kind of diary about the progress of my own project (this devlog).

This is by no means a perfect solution or way but I find devlogs of others even more interesting than a presentation of a finished project. With finished projects you are missing the most important parts: the thought process. How do you get from one thing to another?

Notice: my devlog will be a beginners devlog, I will run into the wrong direction here and there until I figure out a better way (or never if I don't and nobody tells me).

Introducing the project

So let's talk about the project. When I create something for learning it needs to be something that's real. If I just follow practical tutorials I won't turn on my brain.

So I need an idea that has potential to grow and where I can dive into deeper topics. Furthermore it's scope should not be too big, e.g. at this stage I don't want to deal with things like scaling and performance optimization or heavy visual effects and such.

The idea

I will create an online Foosball game. So I have been working for a few years in an internet agency that had a foosball table in the office and it was so fun to me. Unfortunately other agencies didn't allow them because they were too loud, also nowadays during Corona times you cannot enjoy playing such a game with others. So I want to recreate the emotional gameplay that you have when playing a real foosball game in a digital way.

What makes a foosball game great? The core mechanic of my game will definitely be great physics and controls. Foosball is a really fast skill based game. It should be easy to catch up but hard to master. Also it's a competitive game so multiplayer mode is essential. On the other hand you will also need a way to play solo to train your skills so there is also a need in creating an Enemy AI.

The basic game play should be straight forward: create the basic environment, add the figures, attach controls and physics and create a scoring system. That's it.

How can I grow this game? So you might say a foosball game is boring, but I doubt it. To extend the basic gameplay I could add an Enemy AI, maybe even using machine learning. I can add multiplayer gameplay, a ranking system and so much more. The controls are not that difficult so I could even imagine publishing this game cross platform.

Concept and planning

I know good projects need planning and a great concept, prototypes and market research. I don't care. I don't know if there are any great games like this already, I won't do any research as this will probably just lead to a point where I loose motivation. I focus on my game and I will add features and ideas step by step, it just needs to make fun and as long as I learn from it this project was a success.

That being said, I will see you on the next episode where I will setup the basic environment.

Digging into Unity: Scriptable Objects

Marc Mintel — Wed, 06 Jan 2021 06:34:34 +0000

Hey there, I'm Marc and I'm a professional web developer since a few years. It's time for something else so I decided to learn game development with C# and Unity. I'm going to use dev.to to keep my personal notes and summaries.

As I understand it so far a ScriptableObject is one of those things in Unity that you pick up pretty quickly but which is highly underestimated.

What's a ScriptableObject?

I find this name quite confusing, I've never heard of something like this in web development. I would say these are just objects that you can edit in Unity. But "just objects" is also a bit misleading, because they are not much different to MonoBehaviours. In fact they just don't have a transform and a GameObject, so they are not being updated each frame and therefor don't have a Start() or Update() method. You can add properties and methods to it but it won't execute any kind of update method on each frame.

Note: when you change the data of a ScriptableObject they are not reverted when you end the game. This has pros and cons of course.

How to create a ScriptableObject?

Create a new script and extend ScriptableObject instead of MonoBehaviour and remove the lifecycle methods Start and Update. The rest is up to you, e.g. you can add some public properties and methods.

using UnityEngine;

public class Foo : ScriptableObject {
    public float num = 1;
}

Create a ScriptableObject from GUI

You can annotate your ScriptableObject class with a CreateAssetMenu.

using UnityEngine;

[CreateAssetMenu(fileName = "Foo", menuName = "Bar/Foo")]
public class Foo : ScriptableObject {
    public float num = 1;
}

This will create a new entry in the context menu of Unity.

Note: when you create a new ScriptableObject the context menu it's saved as an .asset file.

Create a ScriptableObject from code

You can also create a ScriptableObject using its static method and store it in memory:

Foo mySO = ScriptableObject.CreateInstance<Foo>();

What can you do with a ScriptableObject?

Generally a ScriptableObject is known to keep data often used for configs.
But actually you can do so much with it that I am sure just scratched the surface. You can do whole architecture systems based on ScriptableObjects as they are so powerful. You can use them for Events or to "replace" Enums. Especially because designers can work with them without touching a line of code, but I will cover this in another article (once I figured out).

Using a ScriptableObject in a MonoBehaviour

You can simply reference a ScriptableObject from a MonoBehaviour by using it's type definition, e.g to use the ScriptableObject named Foo and store it in a variable named mySO.

public class NewBehaviourScript : MonoBehaviour
{
    Foo mySO;
}

That's it about ScriptableObjects. As I am still completely new on Unity take this with a grain of salt. The provided information are based on my own experiences and research. If you have something to add or correct please comment it.

Digging into Unity: Prefabs

Marc Mintel — Tue, 05 Jan 2021 15:40:08 +0000

So one of the first things that I encountered in Unity are so called Prefabs. What's that? What does it even mean?

What is a Prefab?

The word is short for prefabricated. A Prefab is a reusable asset that contains a GameObject, it's configuration, it's components and everything that's nested below it. You can see Prefabs as templates for GameObjects.

A Prefab is indicated by this little blue box icon. The arrow icon on the right will bring you to the Prefab editor, where you can edit the Prefab in isolation.

How to create a Prefab?

Just drag a GameObject from your Scene window into your Project window.

When to use Prefabs

The general rule of thumb is that you should almost always prefab your GameObjects, as you are most likely going to reuse them at any time in future. You can even prefab your camera and lighting, which is useful when you create multiple scenes.

What can you do with a Prefab?

Overriding

If you could just use a Prefab as it is it would not be that useful. That's why you can override it's configuration.

Overrides are marked as bold. If a Prefab is overridden it will always keep these overrides, even if you change that property in your Prefab. So if you override a property you are removing the sync. You can then apply your overrides to the Prefab to apply your changes to all instances or reset all overrides to revert your changes of the current instance to the Prefab configuration. Changes made in the Prefab editor are applied immediately.

Nesting

You can also nest Prefabs within Prefabs to combine them in various ways. Nothing else to say I guess.

Unpacking

Unpacking is the process of unlinking a GameObject from a Prefab. That doesn't delete the Prefab nor the GameObject, it just removes the syncing between those.

That's it about Prefabs. As I am still completely new on Unity take this with a grain of salt. The provided information are based on my own experiences and research. If you have something to add or correct please comment it.