hi people!! I'm Issi and this is my main tumblr blog. I'm 20+ years old, my pronouns are she/her, I'm black american and a pansexual woman. I also have a neocities site as my main platform on the internet :D
This blog will be filled with fandom posts, graphics for webmasters, and my art. I have a sideblog for sims 3 content that I will be running too (its empty now though).
As a summary, im mostly into anime, rock music, art, html & css, and casual games.
Ima just be blunt, I'm extremely far left. I'm still in the process of reading Theory TM, so its hard to call myself a communist but i am certainly getting there. I obviously dont tolerate bigotry of any kind. I do reblog political posts!
I began using tumblr when I got into phantom of the opera in 2023 because the community is most active here. It's not my primary fandom anymore but I still hold the fandom dear to my heart and will continue to reblog stuff about it occassionaly!
Current fandoms:
Attack on Titan (Shingeki no Kyojin)
Yu Yu Hakusho
Sims
Fullmetal Alchemist
POTO
visit my personal website to see way more content :p
✿ Glow of Honeydew is an 18+ lesbian visual novel about an immature voyeuristic girl, her cute mysterious roommate, and strange flowers.
✿ Glow of Honeydew is a game by PlanetAngelSoup, a lesbian team consisting of @ophanimkei, @starbage, and basicbean!
✿ The Steam edition comes with several goodies such as an artbook, the full soundtrack, and blender files!
finally reading the fma manga and ed is the protagonist of all time. he’s the softest lil guy. he’s a rabid raccoon. he is the scourge of the military. everyone wants to adopt him. he’s a pacifist. he bites. he gets giddily happy at the birth of a child. his speech is punctuated with sarcastic hearts. he’s a generational talent. he will walk directly into a trap eyes open head empty. he is a foul mouthed little rat. he makes friends everywhere he goes. he’ll dig up any grave and turn over any stone and kick anyone’s ass to get his brother back. he refuses to believe his brother cares about him the same way. he makes this face:
I love thrifting I love ebay I love second-third-fourth hand clothes I love garage sales I love diy-ing and crafting I love giving clothes new life I love outfit repeating I love visible mending I love wearing/repairing the same item til its threads I love patches I love customization I love local libraries I love physical media I love burning cds for my friends I love shopping small!!
people who express seething, violent hatred towards cyclists: you make people feel unsafe as fuck! you're allowed to be annoyed with cyclists. some of us are dicks who need to learn the road rules. but anytime I see someone "joke" about hitting cyclists with their car I feel a little bit sick to my stomach.
feels like as soon as my feet are on the pedals of my only reliable mode of transport, I become a target for people driving a terrifyingly fast and heavy car. when I was barely a toddler, my dad had to go on rallies to raise awareness about the fact that people on bikes are PEOPLE who do not deserve to be KILLED BY DRIVERS.
he had slogans trying to remind people that he was a dad with a 2 year old son at home, because both him and his friends have had drivers swerve at them any time they got on their bicycles. I just find how "normal" it is to want to kill cyclists pretty fucking scary.
"it's just a joke" yep! but jokes are rooted in ideas that you are reinforcing. you can laugh about how annoying cyclists are without sounding like you want us to get life ending injuries for inconveniencing you.
ive had friends say to my very face that they would run over a cyclist, knowing that my bike is my only independent transportation. thats how normalized this disgusting attitude is. every time i ride i have to hype myself up for a minute because the attitude towards cyclists has broken my dignity down to nothing when it comes to being on the road. im lucky to not have any aggressive encounters yet, but its inevitable and im constantly on my guard and embarrassed on the road
some stuff I made for Valentine’s Day! I tried to keep it generic though so it can be used all year round :-) I hope to make more but no promises! Smaller versions will be in reblogs <3
im watching rose of versailles. i like rosalie. im posting this sketch as an excuse to talk about the show.
yall had me thinking this was some super gay shit T_T still a great show so far. im on episode 35 so Im not done, maybe something crazy will happen. but so far, they havent explored the queer aspects of it as much as i thought it would. thats okay! the queerness is still there, its just deep in subtext and im not smart enough to figure it out on my own lmaoo
ok spoiler time
I REALLY LIKED ANDRE AND NOW I CANT LOOK AT HIM D: he was literally my favorite character until *that* episode.
im also not liking oscar as much as i thought i would aahhhaha. i feel like the french background characters talking about how much they hate nobles lol. its just, shes had so many potential radicalization moments to realize how aristocrats (including herself!) oppress the people. She takes absolutely no action and does no introspection on how she is an accomplice to the people's suffering. She accepts the status quo even when its ugly reality stares her in the face. im not sure how im supposed to like her in spite of this.
now that andre fucking sucks, who am i gonna root for???
i gotta stop consuming media about rich people and royalty it pisses me off. if someone knows of a show similar to rose of versailles that isnt about rich ppl, yall should recommend it to me! (i already watched rgu)
i decided to make this tutorial to teach you how to program in javascript. wait wait! don't run away yet! i know that coding might feel scary or often is used to make websites slow and bloated, but it doesn't have to be that way!
at the end, we're going to use this to make an interactive web stamp that reacts to moving the mouse
to get started, i'm going to assume a basic familiarity with code as a concept, but you don't have to know any javascript. if you've done some intermediate-level html+css, or if you've used something like Scratch, that should be good enough. i'm going to explain everything as we go along
i strongly recommend a computer (or at least something with a physical keyboard) for this, but a phone technically works too
once again, we're going to be using mozilla's playground: https://developer.mozilla.org/en-US/play
> beginner code <
if you've written code before and know about syntax and variables, feel free to skip this section
the first line of code you will want to write is: console.log("Hello, world!");
put this into the box labeled "JavaScript", wait for the page to refresh, and look in the "Console". some text will show up there.
the bit inside the quotation marks is called a "string", and it's how you put text into your program. this is just like using quotation marks in css, or in html attributes. you can change this string to something else, and the computer remembers what you put there, but the computer is dumb and doesn't know anything else about it. it only does exactly what you tell it to do
what we're telling the computer to do is to run "console.log". this is called a "function call". think of a function like a machine (or a factory) that you can put stuff (inputs) into. here, we're putting "Hello, world!" (or "farts") into "the console.log machine". you don't have to know how this works inside, so you can focus your attention on what it does for you. as an analogy, think about how you don't have to know how a recycling plant works, you just have to know that you give them your paper and plastic to be recycled
to call a function, you use () parentheses symbols. if there is more than one input, you separate them with commas (there's only one input here, so we don't have a comma)
at the end of every line, i recommend that you write a ; semicolon. this tells the computer "this step is finished. now we're on to the next step." if you don't tell the computer this, javascript will try to guess where each step ends. it uses some rules to guess, but i can never remember what they are. unless you want the computer to keep guessing what you mean, tell it what you mean explicitly. remember, computers are dumb. you are smart.
finally, one more thing you absolutely need to know before we can do something interesting: variables
when we write the word "let", it tells the computer to create a variable. "let" is an example of a keyword, a word which has special meaning to the computer. (if you've seen older tutorials, they often use "var" instead. the difference between "var" and "let" is very complicated and we won't go over it now, but they both create variables)
a variable is basically a place for the computer to put some information. except, we've stuck a label on it. imagine a box with "x" written on it in sharpie. inside this box, we've put a piece of paper with "Hello, world!" written on it
after creating this variable, the computer moves on to the next step (remember? semicolon ; !). in this next step, we take what's inside the variable "x" and give it to the "console.log" function
except, in the analogy, we actually make a copy of the piece of paper. the box still has another copy inside of it. this is also really complicated (values vs references), and so once again we're going to skip over it for now
in the last line, we add "x" to "x" and then put that into "console.log". in javascript, we can add strings to strings, not just numbers like in math. when we do that, it joins them together. this is why the console shows "Hello, world!Hello, world!"
notice that there isn't a space between the two copies! the computer does exactly what we told it to do, and we didn't tell it to put a space, and so it didn't
> canvas <
we now need to go back to html real quick and add a <canvas> element, like this: <canvas id="canvas" width="400px" height="200px"></canvas>
in the javascript, write this: let canvas = document.getElementById("canvas"); console.log(canvas);
we don't see anything on the page, but the console should show some output like [object HTMLCanvasElement]
what we're doing here is that we took "canvas" and gave it to the "document.getElementById" function. that function gave us back an output, and we put that output into the "canvas" variable
imagine you have an assistant that you ask "please go into the page, and find me the element with id 'canvas' ". this assistant wanders off, rummages around, eventually finds the canvas, and gives it back to you. you don't have to know where or how that happened, you just know that your assistant found what you were looking for
finally finally finally, we're finally getting somewhere! replace the console.log (which we only needed for testing) with this:
let draw = canvas.getContext('2d');
draw.fillRect(10, 10, 20, 30);
we've made a rectangle!
you might be wondering... what on earth was the point of all that? that was so much work, it'd be easier to open mspaint and draw a rectangle by hand!
and you're right! this here is a big problem with learning to code. it takes a ton of work to even get started. the point of code, though, is that computers are really good at doing things repeatedly, very fast, and without getting bored:
this code uses a "for loop", which is a special set of instructions to tell the computer "do this repeatedly"
we're not going to use for loops in the rest of this tutorial, so go look it up on your own!
> saving the output <
i don't know about any other browsers, but at least in firefox on desktop, you can right-click on the canvas to save it as a PNG. it automatically saves with transparency too!
> adding interactivity <
here, we're going to add interactivity to our page. replace the fillRect line with the following code:
now, move your mouse over the canvas and watch what happens! (you can't move the mouse if you're on a phone, but you can tap on the canvas to make little squares)
two important concepts that need to be explained here
first of all, when you write something.somethingElse, the "somethingElse" is called a property which belongs to "something"
this means that we're telling the "document" (a variable which magically exists and refers to the whole page) to find ("getElementById") for us the "canvas" element. then we're asking the canvas for the ability to draw 2d. and then we also ask the canvas to add an event listener to detect when the mouse is moving. inside of that (inside the curly braces {} ), we tell "draw" to fill in a rectangle
the second thing is that (e) => { ... } syntax. this is called an arrow function and is one of the ways to create brand-new functions of our own. when the mouse moves, the browser takes information about the mouse (what we've called "e") and calls our function with it. this happens again and again whenever the mouse keeps moving
> bugs, and debugging <
unfortunately, our code currently has a problem (what programmers call "bugs"). if we, for example, add some stuff to the page above the canvas, this happens:
unfortunately, the x and y coordinates that we get from mouse events is relative to the page, not to the element. it was only working correctly before because the canvas was in the corner.
this is okay! don't panic!
we need to copy-paste this code to fix it:
let mouse_x = e.x - e.currentTarget.offsetLeft;
let mouse_y = e.y - e.currentTarget.offsetTop;
draw.fillRect(mouse_x, mouse_y, 10, 10);
this code subtracts the position of the canvas from the position of the mouse, which gives us the mouse position relative to the canvas
also, in case we don't want to keep all previous squares, we can use clearRect:
by now we've already made two simple programs! a really basic drawing program, and a program where something follows the mouse around
> migrating to neocities <
before we can move on to making the stamp I promised at the beginning, we should put our code on a real web host like neocities. this is because we're going to want to be able to upload our own images
for now, create a new page (or open an existing page for editing). copy the html canvas element into the page, and then (this is really important!) at the end of the page, right before you write </body>, write <script></script>
then copy-paste your javascript between the script tags. it should look like this
now if you view your new page you should see the same square following the mouse cursor. except now it's on your page!
> interactive web stamp <
as promised, something to tie all this together
in your neocities dashboard, upload a stamp base image and an image to draw on top. we're going to be using the following two images here:
it should look something like this in your dashboard
now, inside your html, inside a <div> tag, add two <img> tags to load these images. later on in the javascript we'll use these images
for testing, refresh your page and make sure that the images load
we don't want these images to actually show up like this, but we're required to put them in <img> tags (because the rules say so), so to get around this we add style="display: none" to the div to hide them
now, inside our javascript, we want to use document.getElementById again:
// Get the images we want to draw with
let stamp = document.getElementById("stamp");
let shyguy = document.getElementById("shyguy");
and finally, change the canvas size to the usual web stamp size, 99px by 56px
make sure your code looks like this:
now visit your page, and move the mouse around over the canvas! you now have a stamp, but it moves!
> final bug <
right now the stamp appears blank until you move the mouse for the first time. to fix that, we want to draw the images one time when they finish loading. to do that, we add this code:
// Draw the images when the page finishes loading addEventListener("load", () => {
draw.drawImage(stamp, 0, 0);
draw.drawImage(shyguy, 16, 10)
});
and now you have a debugged web stamp!
> going further <
maybe try changing the code to draw the shy guy layer centered around the mouse instead of to the bottom-right
try adding more effects
see if you can figure out how to respond to mouse clicks
don't be afraid to look things up or ask for help! happy hacking!
please say thanks if you liked it! please please also tell me if there's something you didn't understand, so that i can learn to get better at explaining!
