summaryrefslogtreecommitdiff
path: root/src/desktop/files/netpunk.tsx
blob: 7645495539460a167cace99b9135c92377760105 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { VirtualTextFile } from "$/apps/source";
import { Hr } from "../hr";
import { Link } from "../link";

export default {
    name: "Netpunk.txt",
    type: "text",
    content: (
        <>
            <h2>Netpunk (feat. Kasane Teto)</h2>
            <p>I think I started working on this about 2-3 years ago? Its been so long I dont remember! The oldest file on my PC with netpunk in the name is from 2024, so it mustve been something like that. It was around the time I got my first electric guitar, a Yamaha Pacifica 112J in light blue. Ive been practicing guitar ever since and its really hard, but a lot of fun as well. My fingers sure have grown extra layers of skin from all that playing.</p>
            <Link type="image" link="https://sunnexo.moe/ui/toolbox/hardware/pacifica.webp" alt="" />
            <p>
                This is also the first time Ive ever used a vocal synth! I love Teto so much Im kinda terrible at writing lyrics so Im really happy I got help from retraceyoursteps! She perfectly understood the type of girlfailure energy I wanted to write about. Read the lyrics below!
            </p>
            <p>A clumsy robot forgets about their girlfriends anniversary, scrambling to find something to do for the date, eventually concluding they should watch a movie. Of course the movie is in high demand, so the tickets have sold out. Ultimately they resort to piracy, and things spiral out of control</p>
            <Hr />
            <h2>Graphics</h2>
            <p>This was originally going to get a bigger music video, but the scope was a little bigger than I could handle on my own. Stellazium and I came up with a big storyboard, but unfortunately she got occupied with other work. I actually learned Blender and made a ton of assets using it, but they didnt end up getting used this time. Maybe theyll be useful for future projects though!</p>
            <p>Eventually I decided to reduce the scope of the video and make it more manageable for one person. I think it still ended up pretty nice, despite cutting out a bunch of our ideas.</p>
            <Link type="image" link="https://sunnexo.moe/music/netpunk/scene-1.png" alt="" />
            <Link type="image" link="https://sunnexo.moe/music/netpunk/storyboard.webp" alt="" />
            <Link type="image" link="https://sunnexo.moe/music/netpunk/props.webp" alt="" />
            <Link type="image" link="https://sunnexo.moe/music/netpunk/tree.webp" alt="" />
            <Link type="video" link="https://sunnexo.moe/music/netpunk/geonodes.mp4" />
            <Hr />
            <h2>Character design</h2>
            <p>We figured out the songs narrative, and I had to come up with a character design that reflected the clumsy idiotic nature of the protagonist. I brainstormed a bit with Avolicis and our initial iteration looked like this:</p>
            <Link type="image" link="https://sunnexo.moe/music/netpunk/character-1.png" alt="" />
            <p>I tried modeling this in Blender. Blender however, is way more difficult than it seems. Getting the mesh right was quite a challenge already, but then getting the rig working was even worse! To animate a 3D model it needs to have a skeleton (also called a rig). That skeleton will then deform the mesh when you move the bones around. This was far more work than I first thought, as I kept running into issues like the mesh not deforming correctly.</p>
            <Link type="image" link="https://sunnexo.moe/music/netpunk/character-2.png" alt="" />
            <p>The original design had a skirt but I had to ditch it because it wouldnt bend the way I expected. My friend Niko has a lot of experience with Blender so he was able to help me a lot with the technical stuff. Thanks to him I gained a ton of knowledge about the type of things that are easy or hard to do in Blender, and adjusted the 2nd iteration of the character accordingly.</p>
            <p>Ghosttra.in helped me a lot with the model revision, giving me feedback on the proportions, hairstyle and outfit design. This time we went for a crop top and bodysuit, along with shorter hair thats easier to animate.</p>
            <p>
                I also used{" "}
                <Link link="https://keyframechef.gumroad.com/l/StylizedFemaleBasemesh" type="link">a base mesh by KeyframeChef</Link>{" "}
                to make sure I would get the mesh deformation right. Using that as a starting point I sculpted the model more towards my reference. I recommend watching{" "}
                <Link link="https://youtu.be/T0uzPeADuqg" type="link">their video about low poly character creation!</Link>
            </p>
            <p>The character looks way better than before, and its easier to animate as well. Im very happy with the way this model turned out!</p>
            <Link type="image" link="https://sunnexo.moe/music/netpunk/sunnexo netpunk character ref.png" alt="" />
            <Link type="image" link="https://sunnexo.moe/music/netpunk/shader nodes.png" alt="" />
            <Link type="image" link="https://sunnexo.moe/music/netpunk/good frame.png" alt="" />
            <Hr />
            <h2>Textmode</h2>
            <p>
                Similar to{" "}
                <Link link="https://youtube.com/embed/1pG48TT3Kqo" type="link">Internet Exploders music video</Link>
                , I got help from humanbydefinition for the textmode graphics. They made{" "}
                <Link link="https://code.textmode.art/" type="link">a tool</Link>{" "}
                that lets me interpret videos as a grid of text symbols, also known as textmode art. I used this tool for the backgrounds in the music video, by feeding it footage from my camcorder, glitchy scenes I made in Blender and more.
            </p>
            <Link type="image" link="https://sunnexo.moe/music/netpunk/textmode.gif" alt="" />
            <Hr />
            <h2>Netpunk papercraft</h2>
            <p>To celebrate the release of my debut album Ive made something silly This may seem random, but Ive always wanted to design a papercraft figure from scratch. And now that Ive learned Blender I was finally able to do it!</p>
            <p>
                <strong>Big announcement:</strong> You can build one yourself too,{" "}
                <Link link="https://sunnexo.moe/papercraft" type="link">get the template here!!</Link>
            </p>
            <Link type="image" link="https://sunnexo.moe/music/netpunk/papercraft-3.jpeg" />
            <Link type="image" link="https://sunnexo.moe/music/netpunk/papercraft template preview.png" alt="" />
            <Hr />
            <p>
                Lyrics written by Sunnexo and retraceyoursteps, performed by{" "}
                <Link link="https://kasaneteto.jp/" type="link">
                    Kasane Teto SV
                </Link>
            </p>
<p>I just woke up</p>
<p>My head in the clouds</p>
<p>I've got one shot</p>
<p>To figure it out</p>
<p>But there's one problem</p>
<p>The tickets sold out</p>
<p>What the hell am I gonna do? (Oh god)</p>
<br/>
<p>I'm running on an empty charge</p>
<p>You know my heart is still at large</p>
<p>I can't believe I'm such a mess</p>
<p>My head is yearning for more rest</p>
<p>An anniversary forgot</p>
<p>Because I stayed in bed to rot</p>
<p>My mind is about to blow up</p>
<p>My time is running out</p>
<br/>
<p>(♫)</p>
<br/>
<p>Now I'm searching the internet</p>
<p>Gotta see if they have it yet</p>
<p>It's a new film, no resales found</p>
<p>Need to figure something out</p>
<p><br/></p>
<p>So I'm trying to pirate it</p>
<p>But this website looks kinda shit</p>
<p>Now out of options, I've got no choice</p>
<p>But to take this chance</p>
<p><br/></p>
<p>My antivirus uninstalled </p>
<p>I sense my data all dissolved</p>
<p>I can't believe I screwed this up</p>
<p>Can barely even make a sound</p>
<p>My head is feeling all abuzz</p>
<p>Because my code is all for naught</p>
<p>My mind is about to blow up</p>
<p>My time is rŗ̶̢̧͉̤̼̮͚͍̳̯̪͔̥̐̈́̄͒̌͗͆́̉́́͝ư̵̧͉͐̔̾̀͋̀̓̔̓͂͒̕͠n̷͚̬͉̦͒̐̈̈̌͌͂̉̑̃͛̒͝͠͝n̷̡̠͈̲̪͙̤͈͔̭͔̞͖̻͖̑̍́̍̒̉́̑̊̊̓͌̈̚ͅǐ̷͓n̵̢̙̉͐̆͑̈́͆͗̏̅͗̇̒̐ǵ̸͎̻̤̬͗̅̃̈̀̃̾̓ ̵̻̟̖̦̠̥̮̄͂̈́͛̉̎̌̽̒̕͘ő̵̞̯̱̼̼̭̲̘̳͑͛̆̅u̷̢͍̮̤̖̼̼̽̀́͒̆̂̃̒́̏̂̓͝͝͠͝t̶̨͇̮͓̦̯̞͍̬̮̯̞̼͖̊͌̈́̇̂̒̈́͋̚</p>
<br/>
<p>(̵̻̱̣́♫̷̦̈́̍͝)̸̺̓͑</p>
<br/>
<p>Alright I've got an idea</p>
<p>Think I know what I gotta do (oh yeah)</p>
<br/>
<p>I'm thinking of a better plan</p>
<p>I know the time I have at hand</p>
<p>I may have hit my head real hard</p>
<p>That might've made me really smart</p>
<p>So tickets for the local fair</p>
<p>A dinner date with time to spare</p>
<p>Some scented candles and the rest</p>
<p>Today will be the best</p>
<br />
<p>()</p>
        </>
    ),
    height: "70vh",
    width: "70vw",
} as VirtualTextFile;