BuboBubo/rsgp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OK, rename

Browse Source
This commit is contained in:
Raphaël Forment
2025-10-14 02:11:59 +02:00
parent 6116745795
commit dfb57a082f
6 changed files with 104 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,4 +1,4 @@
# poof # rsgp
Audio synthesis web application for generating random sound samples. Users generate sounds via different synthesis engines, mutate parameters, apply audio processors in multiple passes, and export as WAV. Built for musicians seeking unexpected textures and one-shots. Audio synthesis web application for generating random sound samples. Users generate sounds via different synthesis engines, mutate parameters, apply audio processors in multiple passes, and export as WAV. Built for musicians seeking unexpected textures and one-shots.
@ -39,8 +39,8 @@ pnpm build
## Docker ## Docker
```sh ```sh
docker build -t poof . docker build -t rsgp .
docker run -p 8080:80 poof docker run -p 8080:80 rsgp
``` ```
Opens on http://localhost:8080 Opens on http://localhost:8080

4
index.html
View File

@ -4,9 +4,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Poof: a sample generator" /> <meta name="description" content="RSGP: Random Sample Generator and Processor" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<title>Poof</title> <title>RSGP</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "poof", "name": "rsgp",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",

BIN
public/tutorial.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 972 KiB

2
src/App.svelte
View File

@ -532,7 +532,7 @@
<line x1="3" y1="18" x2="21" y2="18" /> <line x1="3" y1="18" x2="21" y2="18" />
</svg> </svg>
</button> </button>
<h1 class="app-title">Poof: a sample generator and processor</h1> <h1 class="app-title">RSGP: Random Sample Generator and Processor</h1>
<div class="controls-group"> <div class="controls-group">
{#if showPitchLock} {#if showPitchLock}
<div class="control-item pitch-lock-control"> <div class="control-item pitch-lock-control">

165
src/lib/components/WelcomeModal.svelte
View File

@ -21,39 +21,35 @@
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}
> >
<h1 id="modal-title">Poof: a sample generator</h1> <h1 id="modal-title">Random Sample Generator and Processor</h1>
<p class="description"> <div class="modal-columns">
Do you need to generate audio samples for your projects? Poof, it's <div class="modal-column gif-column">
already done! These are not the best samples you'll ever hear, but they <img src="/tutorial.gif" alt="Tutorial showing how to use RSGP" class="tutorial-gif" />
have the right to exist, nonetheless, in the realm of all the random and </div>
haphazardly generated digital sounds. Have fun, give computers some love! <div class="modal-column text-column">
</p> <ol>
<ul> <li class="description">
<li class="description"> Generate new samples using a diverse collection of synth engines.
Generate audio samples using various audio synthesis generators. Random </li>
parameters. <li class="description">
</li> Process samples using a growing list of tools and effects.
<li class="description"> </li>
Process each sound with with a growing collection of random effects. <li class="description">Export your samples as WAV files.</li>
</li> </ol>
<li class="description">Export your samples as WAV files.</li> </div>
</ul>
<div class="modal-links">
<p>
Created by <a
href="https://raphaelforment.fr"
target="_blank"
rel="noopener noreferrer">Raphaël Forment (BuboBubo)</a
>
</p>
<p>
Licensed under <a
href="https://www.gnu.org/licenses/gpl-3.0.html"
target="_blank"
rel="noopener noreferrer">GPL 3.0</a
>
</p>
</div> </div>
<p class="modal-footer">
Created by <a
href="https://raphaelforment.fr"
target="_blank"
rel="noopener noreferrer">Raphaël Forment (BuboBubo)</a
>
• Licensed under <a
href="https://www.gnu.org/licenses/gpl-3.0.html"
target="_blank"
rel="noopener noreferrer">GPL 3.0</a
>
</p>
<button class="modal-close" onclick={onclose}>Start</button> <button class="modal-close" onclick={onclose}>Start</button>
</div> </div>
</div> </div>
@ -98,7 +94,7 @@
background-color: #000; background-color: #000;
border: 2px solid #fff; border: 2px solid #fff;
padding: 1.25rem; padding: 1.25rem;
max-width: 500px; max-width: 800px;
width: calc(100% - 2rem); width: calc(100% - 2rem);
color: #fff; color: #fff;
max-height: 90vh; max-height: 90vh;
@ -108,60 +104,92 @@
} }
.modal-content h1 { .modal-content h1 {
margin: 0 0 0.5rem 0; margin: 0 0 1.575rem 0;
font-size: 1.75rem; font-size: 1.25rem;
font-weight: bold; font-weight: bold;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-align: center;
}
.modal-columns {
display: flex;
flex-direction: column;
gap: 1.575rem;
margin-bottom: 1.575rem;
}
.modal-column {
flex: 1;
}
.gif-column {
flex: 0 0 auto;
max-width: 420px;
}
.text-column {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.text-column ol {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 100%;
margin: 0;
padding-left: 2rem;
} }
.modal-content .description { .modal-content .description {
margin: 0 0 1rem 0; margin: 0;
line-height: 1.6; line-height: 1.6;
color: #e0e0e0; color: #e0e0e0;
font-size: 0.875rem; font-size: 0.875rem;
} }
.tutorial-gif {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid #444;
}
.modal-content ul { .modal-content ul {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
padding-left: 1.25rem; padding-left: 1.25rem;
} }
.modal-content ul li { .modal-content ul li {
margin-bottom: 0.5rem;
}
.modal-content ul li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.modal-links { .text-column ol li {
margin: 1.25rem 0; margin-bottom: 0;
padding: 0.875rem 0;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
} }
.modal-links p { .modal-footer {
margin: 0.375rem 0; margin: 0 0 1.575rem 0;
font-size: 0.8125rem; font-size: 0.75rem;
color: #bbb; color: #bbb;
line-height: 1.5; text-align: center;
} }
.modal-links a { .modal-footer a {
color: #646cff; color: #646cff;
text-decoration: none; text-decoration: none;
word-break: break-word;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.modal-links a:hover { .modal-footer a:hover {
color: #8891ff; color: #8891ff;
text-decoration: underline; text-decoration: underline;
} }
.modal-close { .modal-close {
margin-top: 1rem; margin-top: 0;
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
font-size: 1rem; font-size: 1rem;
@ -194,8 +222,8 @@
} }
.modal-content h1 { .modal-content h1 {
font-size: 2rem; font-size: 1.5rem;
margin: 0 0 0.75rem 0; margin: 0 0 1.575rem 0;
} }
.modal-content .description { .modal-content .description {
@ -213,32 +241,33 @@
} }
.modal-content h1 { .modal-content h1 {
font-size: 2.5rem; font-size: 1.75rem;
margin: 0 0 1rem 0; margin: 0 0 2.1rem 0;
}
.modal-columns {
flex-direction: row;
gap: 2.1rem;
margin-bottom: 2.1rem;
} }
.modal-content .description { .modal-content .description {
margin: 0 0 1.25rem 0; margin: 0;
font-size: 1rem; font-size: 1rem;
line-height: 1.7; line-height: 1.7;
} }
.modal-content ul { .modal-content ul {
margin: 0 0 1.25rem 0; margin: 0;
} }
.modal-links { .modal-footer {
margin: 1.75rem 0; margin: 0 0 2.1rem 0;
padding: 1.125rem 0; font-size: 0.875rem;
}
.modal-links p {
font-size: 0.9375rem;
margin: 0.5rem 0;
} }
.modal-close { .modal-close {
margin-top: 1.25rem; margin-top: 0;
padding: 0.875rem; padding: 0.875rem;
font-size: 1.125rem; font-size: 1.125rem;
} }