sigmasternchen/queermandelbrot
1
0
Fork 0
mirror of https://github.com/sigmasternchen/queermandelbrot synced 2025-03-15 07:58:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add menu for colorscheme

Browse source
This commit is contained in:
sigmasternchen 2024-12-13 13:34:09 +01:00
parent 33d976d2ae
commit 59d3a37686
3 changed files with 72 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
dist/index.html vendored
View file

@ -10,10 +10,45 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
#menu {
position: absolute;
top: 0px;
left: 0px;
font-size: 2vh;
font-family: sans-serif;
}
ul {
padding: 0px;
margin: 0px;
}
li {
list-style-type: none;
}
li a {
display: inline-block;
padding: 0.5vh 0 0.5vh 2vh;
width: 10vh;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.5s, color 0.5s, padding-left 0.5s;
}
li a:hover, a.selected {
padding-left: 4vh;
color: black;
background-color: rgba(255, 255, 255, 0.5);
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="mandelbrot" width="600" height="400"></canvas> <canvas id="mandelbrot" width="600" height="400"></canvas>
<div id="menu">
<ul>
<li><a class="rainbow" href="?rainbow">Rainbow</a></li>
<li><a class="trans" href="?trans">Trans</a></li>
<li><a class="lesbian" href="?lesbian">Lesbian</a></li>
</ul>
</div>
<script src="./queermandelbrot.js"></script> <script src="./queermandelbrot.js"></script>
</body> </body>
</html> </html>

7
src/canvas.mjs
View file

@ -34,4 +34,9 @@ export const requestAnimationFrame = (callback) => {
window.addEventListener("message", eventListener) window.addEventListener("message", eventListener)
window.postMessage(null); window.postMessage(null);
}; };
//window.requestAnimationFrame;
export const getQueryString = () => window.location.search;
export const addClassToQuerySelector = (querySelector, className) =>
document.querySelector(querySelector)?.classList?.add?.(className);

37
src/queermandelbrot.gleam
View file

@ -87,9 +87,12 @@ fn animate_for_each(
} }
} }
fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) { fn redraw(
let colorscheme = Lesbian ctx: Context2D,
canvas_width: Int,
canvas_height: Int,
colorscheme: ColorScheme,
) {
set_size(ctx, canvas_width, canvas_height) set_size(ctx, canvas_width, canvas_height)
clear(ctx) clear(ctx)
@ -105,7 +108,6 @@ fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) {
get_inner_width() == canvas_width && get_inner_height() == canvas_height get_inner_width() == canvas_width && get_inner_height() == canvas_height
}, },
list.each(_, fn(x) { list.each(_, fn(x) {
io.debug(x)
list.range(0, canvas_height - 1) list.range(0, canvas_height - 1)
|> list.each(fn(y) { |> list.each(fn(y) {
let pad_horizontal = let pad_horizontal =
@ -157,10 +159,27 @@ fn redraw(ctx: Context2D, canvas_width: Int, canvas_height: Int) {
pub fn main() { pub fn main() {
let ctx = get_context("mandelbrot") let ctx = get_context("mandelbrot")
let query_string = get_query_string()
redraw(ctx, get_inner_width(), get_inner_height()) let colorscheme = case query_string {
"?trans" -> Trans
"?lesbian" -> Lesbian
"?rainbow" | _ -> Rainbow
}
on_resize(fn() { redraw(ctx, get_inner_width(), get_inner_height()) }) io.debug(colorscheme)
case colorscheme {
Rainbow -> add_class_to_query_selector("a.rainbow", "selected")
Trans -> add_class_to_query_selector("a.trans", "selected")
Lesbian -> add_class_to_query_selector("a.lesbian", "selected")
}
redraw(ctx, get_inner_width(), get_inner_height(), colorscheme)
on_resize(fn() {
redraw(ctx, get_inner_width(), get_inner_height(), colorscheme)
})
} }
type Context2D type Context2D
@ -188,3 +207,9 @@ fn set_size(ctx: Context2D, width: Int, height: Int) -> Nil
@external(javascript, "./canvas.mjs", "requestAnimationFrame") @external(javascript, "./canvas.mjs", "requestAnimationFrame")
fn request_animation_frame(callback: fn() -> Nil) -> Nil fn request_animation_frame(callback: fn() -> Nil) -> Nil
@external(javascript, "./canvas.mjs", "getQueryString")
fn get_query_string() -> String
@external(javascript, "./canvas.mjs", "addClassToQuerySelector")
fn add_class_to_query_selector(query: String, class: String) -> Nil