Posts

Animation with JavaScript

An Animation Experiment
JavaScript is still a bit new to me, and I have yet to dive into the <canvas>.  I wanted to explore animation on web pages with vanilla Javascript. This seemed like a great opportunity to experiment, and share it for others to use.

If you haven't seen some of my older posts, I do have experience with python GUI libraries like tkinter and pygame, so I had some basic knowledge on my hands before playing with this code.


If you'd rather just dive in with your web dev tools or fork the github repo and play, here are the links:

webpage:https://nelliesnoodles.github.io/JS_Animation/
repo: https://github.com/nelliesnoodles/JS_Animation

Breakdown of the JavaScript
When I write my javascript, I organize it the same way I would a python file.
At the top most are the functions called and used by the functions below them. At the bottom of the file will be the functions that get everything moving.
If a function doesn't require the use of any other function …

Setting up the Javascript Experiment part 3: the Search

Image
Where ya been Nellie?

I had the code working and written up for this part of the blog for a bit now, but wanted it incorporated into the finished app so the readers can see it in action before looking over the code.

Image: screenshot of Favorite Fonts Chingu prework project.  Much like google fonts catalog page, it will allow you to surf through, search through, and play with different fonts available through the google fonts API.



The full github repo:
https://github.com/nelliesnoodles/Favorite_Fonts_Chingu_V15_prework

Try it out!
https://nelliesnoodles.github.io/Favorite_Fonts_Chingu_V15_prework/

The reason:

Once I had the search algorithms worked out, there wasn't a whole lot of modification that needed to be done to work it into the javascript file for my favorite fonts project.  And since I had played with it and worked it thoroughly in the Experiment, I could see where different elements of the project needed to be included and modified to make the search work with the larger go…

Setting up the JavaScript Experiment, Part 2

Image
What we did first:

https://camelcasenoodles.blogspot.com/2019/12/setting-up-javascript-experiment.html

What's Next:

Now we need to start setting up a search algorithm.  The user will type into the Search input and look for a matching word/string.   For this part, we are only going to get it finding strings who's first letters match and giving us back a list of those matches in the console with console.log.
You can see what the log is doing if you go to your developer tools in the browser and opening up the tab for console.   Pictured below is what those steps are with Chrome.  On firefox they are very similar steps.

Step 1:  find the tools
Usually in the top right corner next to the address bar

Step 2:  Open web development in the list,  In chrome, it is linked to the first menu's "more tools" list item.  Image: The open tools, with the drop menus for 'more tools' and 'development tools' selected.

Step 3: Select the Developer tools and the extra ana…

Setting up a Javascript experiment.

Image
Setting up a JavaScript Experiment

Whenever I do an experiment for JavaScript, I set up an html file, and a javascript file.
*The css file is just because I want it to be pretty, totally optional, but don't go overboard it isn't necessary for the experiment*

Pictured below is the current project I'm working on, and I need to figure out how the 'Search' input works in google fonts.  I'm not going to be able to duplicate what google does to make this happen, so I need to find a way to do it myself.  I'm clueless as I write this, but that is where the experiment comes in.



With Python, I'd run all the experiments in the command prompt / powershell / terminal.  Python does what it's gonna do in the system, that is where the process is run.  *Let's ignore Django exists yeah?

Javascript on the other hand will have different reactions in a Browser, because the browser carries out it's own rules and interpretation of the code then the terminal would.…

Python, a map, and a maze

Image
Python terminal maze
So I was browsing the Learn Code the Hard Way Forum and came across the concept of making a map of x y coordinates, and realized I've never actually attempted something of that nature.



So,  I fired up that Visual Studio Code ,  and had at it. 
I'm trying to figure out why I've never attempted it before.  I think I might have just decided I wasn't ready for it and skipped on to less complicated things,  but today I really could see the fun in making a maze.  While running this prompt, for screen readers, to turn off the ascii just comment out the print_ascii() calls before and in the while loop.



*The ascii map as imaged above may not print pretty in your command/terminal if the font is not the same as mine.  Change it however you want.*

There are a ton of things you could modify and change.  For example, adding a system clear screen so that the map and instructions only appear at the top.
You could add ascii colors, or shapes with ascii codes.
You c…

python statistics normal distribution continuous density

Image
Normal Distribution: Stats Class Code.



I was attempting to write the different formula's I would need for a normal distribution curve and the calculations we'd need for class.  There is a bit of success and a bit of failure in the code.  I may tweek it a bit more, so that someone could enter the a and b,  size of the curve, and the area range they want and it does the deviation, and mean calculations also, but this is enough for now.

As always, drop a comment if you see anything wrong, or that needs improvement.  Take the code, practice, break it, build it, have fun learning.

Lessons learned:
Now for this bit of code, I was sure I could use the formula I found in this Khan video to write my own python function to find the probability in a range under a curve.

Turns out, no, the math is way more complex for a continuous function.
I am leaving my function and the way it uses the formula in the code block.
I made an effort, but it failed.  I am under the assumption that scipy'…