Gertjan de Jong — ©
v0.01 — stardate
Captain's log

AI and the Future of Artistic Creation:

Navigating the Shift from Visual to Language-Based Expression

For a lot of creatives, creating is primarily a visual process. You sketch — look at what you've created and make adjustments based on that. But what if we were able to bypass the visual part, by using text-to-image AI?

Some say that language is the most direct way of control because it's closest to thinking. But I think many creators would argue otherwise. They want to turn off their thinking, get out of their heads and into their intuïtion. They want less reason and more 'happy accidents'.

I'm wondering: in the coming decades we might only create via text prompts. Will this mean that we lose our ability to visually associate?

  1. More user friendly, but less fun :-) pixelpillow.nl.

Captains log

Date
Done
Learned
Hr
03-10-2021
Scribble animations & home onload
Debugged scribble animations.
Isolating timelines makes debugging way faster.
2
Added home onload animation.
Trigger after assets load, not just DOMContentLoaded.
1
26-07-2021
Reader page
Connected Airtable API to new 'reader' page.
Airtable paginates results — need to handle the offset or you'll miss records.
3
Designed and styled the page.
Design with a fixed dataset first, hook up the API after.
2
24-07-2021
Maker page resize
Added onResize event to maker page so titles stay centered.
GSAP breaks CSS positioning.
1
05-07-2021
Date script
Wrote script to automatically display stardate and copyright date.
JS months are zero-indexed. Classic.
2
24-06-2021
Photo selection & title animations
Photo selection and editing.
Less photos, more impact.
2
Title animations.
Conflict between CSS positioning and GSAP is still tricky.
1
23-06-2021
Draggable photos
Made photos draggable.
Went easier than expected.
1
19-06-2021
ScrollTrigger & responsive styling
Implemented ScrollTrigger on maker page.
scrub ties animation progress to scroll position — good for parallax stuff.
3
Responsive fluid styling.
Fluid sizing + CSS custom properties = much less breakpoint juggling.
2
13-06-2021
Stylesheet structure
Refactored stylesheet structure using @import (postcss-import plugin).
Split files are so much easier to navigate than one giant CSS file.
1
Base styling for maker page.
Layout first, cosmetics later. Saves a lot of rework.
2
12-06-2021
CSS & layout refactor
Structured style.css by separating layout, typography and cosmetics.
Separation of concerns in CSS makes debugging way faster.
2
Updated layout content wrapper for more flexibility and added utility classes.
Keep utility classes single-purpose or they get unpredictable fast.
1
10-06-2021
PostCSS & Git
Configured PostCSS to compile all CSS files. Updated config in package.json and eleventy.js.
A glob (*.css) in the build command saves having to list every file manually.
2
Added mixin support to PostCSS via postcss-mixins.
Works like Sass mixins. No need to switch preprocessors.
1
Figured out how to stage files individually and make separate commits in Git.
Cleaner commits, less chaos in the history.
1
30-05-2021
GSAP tooling
Added GSAP code hinting and linting to VS Code.
Autocomplete for GSAP methods saves a surprising amount of time.
1
29-05-2021
Animation & positioning
Researched animation layout, positioning and performance. Did Codepen experiments.
Differences between animating left/top/right/bottom vs translateX/translateY, and how this translates to GSAP values.
3
22-05-2021
Changelog layout and animation
Animated changelog width and position based on vw.
Use the same positioning system in GSAP as in your stylesheet, otherwise unexpected effects. Don't set left: 100vw in CSS and then use x: 300 in GSAP.
1
Fixed scrolling changelog layover (codepen) using GSAP DrawSVG plugin.
Using only opacity for a layover is a bad idea — the element stays clickable when invisible. Always place an actual DOM element on top.
2
Designed homepage scribbles.
Colors are hard.
1
27-03-2021
SVG animations homepage
Attempted to implement SVG animations in Eleventy.
Failed. Eleventy appears to modify SVG markup during build. To be continued.
2
Animated 'scribbles' SVGs (codepen) using GSAP DrawSVG plugin.
DrawSVG cannot animate external SVGs. Inline SVGs cannot be used as CSS backgrounds or pseudo-elements.
2
Designed homepage scribbles.
Colors are hard.
1
22-03-2021
CSS Grid
Styled changelog table using CSS Grid.
CSS Grid positioning.
2
Designed changelog table.
What looks simple in design is sometimes hard in practice.
1
11-03-2021
Templating
Implemented Nunjucks templates and partials for footer, header, content and changelog.
Terminal error messages save a lot of time — if you actually read them. Both .md and .html files work as a base. What frontmatter is.
3
Researched templating languages.
How Nunjucks and Liquid work and how to set up a basic structure.
1
25-02-2021
Motion!
Animated menu, changelog and links.
GSAP x:0 is not absolute 0 — it's 0 from the element's starting position in the DOM. If CSS sets left: 100px, GSAP x:0 animates to 100px.
4
22-02-2021
Link animations & stagger
Animated Captain's log link.
How to remove an event listener using removeEventListener.
2
Added stagger animation to changelog.
GSAP stagger animates a list in sequence with barely any code.
1
18-02-2021
Setting up typographic foundation
Implemented fonts and styling for responsive typography.
Nothing new.
2
Set up a fluid typography system. Worked on homepage text and styling.
How to use clamp() to scale type fluidly between a min and max.
4
17-02-2021
Setting up personal site framework
Set up Eleventy as static site generator.
How to configure Eleventy using the terminal.
4
Gitlab setup.
What an SSH key is and why you need one. How to commit directly from VS Code.
2

Signed by supervisor