Skip to main content

GraphMaker Project

View Project

 Made with pure JavaScript, HTML and CSS. No external libraries used. Not mobile-friendly yet.
GraphMaker.tk is a light weight web framework that can be used to draw mathematical functions on screen real time, allowing the user to understand and experiment with the behaviour of different functions in 2D space.



It is fast, reliable and easy to use. If you have found it hard to use, scroll down this page and you find the section on how to use this web application.

How it works

The way this works is simple and easy to explain, even though the entire project might look like a giant hard-to-make software program.
Everything begins with the converting of functions from user input into JavaScript legit functions using the Function(); Object.
All the functions are added in a huge array of functions that are all going to be drawn at the same time in the canvas.
Then another part of the program converts the values entered and received from the user-defined functions into canvas (x,y) coordinates.
The drawing gets the canvas x-coordinates from left to right and converts them into their corresponding numerical values, which are entered in the user functions and then the output canvas-y coordinates of them, in connection with the x-coordinates are used to draw the graph points on the canvas, which then are connected to which other with the Canvas stroke() method for drawing lines.

Usage and Documentation

The main control points of this web application are the four buttons listed one next to the other.



  • Add adds every time one more function form to the list of functions below the list of these buttons.
  • Draw, like the name says, it draws the functions on screen.
  • Help displays a list of the built-in functions(explained) you can use when declaring your functions.

  • Share button shares your drawing. You just copy the link and can place it anywhere you want even embed it to your own website.
You can find a description of this project in my portfolio as well: >>Here
Labels:

Comments

Post a Comment

Popular posts from this blog

Built my own FaceMash. Didn't end up well. [2018]

Ok, so we all know Mark Zuckerberg's Story from the movie "The Social Network". Before he launched Facebook he and his roommates built a site called FaceMash, which basically was about voting between college students on one another's hotness level. This soon turned viral and that's when he started thinking about building Facebook.


Being fascinated by his story I wanted to build something similar to Facemash as well, wanting to seeing what reactions it would cause on my friends. It wasn't that simple though as I wasn't planning to take 200+ individual pictures of internet people. Two reasons for that: 1) I am way to lazy to do such things and 2) I wanted to automate a process performing this action.

This idea came to my mind about two years ago, but at that time I didn't know how to write PHP or use APIs or do anything automated. This couple months, from October till now I've learned to use APIs of the four largest social networks: Twitter, Instagram…
1 comment
Read more

Simulation of Gravitational Pull in randomized Solar System

Launched in November 2017.
View Project
Displays a full solar system with planets doing circular movement due to gravity pull of the sun
Written entirely on JavaScript

How it works? I used an interval that repeats an algorithm for about 30 miliseconds. The algorithm spawns the point-planets with the position (random(0, canvas.width / 2) , canvas.height / 2) and a starting point towards the bottom of the canvas.

Than I used the formulas of my book that calculate the gravitational force with which the planets are pulled towards the sun performing circular orbits. The formula i used for gravitational force is F = planetMass * sunMass * gama / distance^2.

To make the orbits circular I set this force equal to circular force F = Mass * Speed / distance;
Through that I could define the starting speed of each planet.

If you want to see some weird planet orbits try changing the parameters of the browser window on your desktop or by rotating the phone screen if you're on mobile. This weird move…
Post a Comment
Read more