How to create a balance script based on the cursor position? - javascript

I'm trying to do something very similar to this game. http://i301.photobucket.com/albums/nn42/playonlineflashgame/HomeRun.swf
Although it's not a game, it's just a simple "balance" thing i'm trying to apply according to the movement of the cursor.
Same idea as the link i've provided up there where the guy starting swaying left and right according to where your cursor is. The think is that I've struggling to get the same smoothness like the effect you see in the game. Acceleration, innertia, gravity etc... not sure if it needs to be that complicated but the simpler the better.
So if anyone ever built or done anything like that who can help me out, I would appreciate for life?

Here is the general idea of what I would do for this problem.
http://jsfiddle.net/Q3UaA/

Related

canvas rotate left and right animation on fillRects

EDIT: Decided to add actual sprites and animations instead of using fillRects.
Currently drawing all this on a canvas.
I have an update function and a draw function.
Within the update function, i loop through all the people and update their positions slightly. Then I call the draw function which renders it onto the canvas.
Currently all the do is slide around the bounds of the map but I think it'll add a lot more polish to the game if the little guys have a small walking animation.
The people are all drawn with a fillRect() function. I figured a small animation where the people rotate side to side when moving would be a nice effect. However, i'm not sure how to go about this as well as best practices.
Do you guys have any idea on how to achieve this effect? It seems like if I want to do what im looking for, i would need to then keep track of more states within the people. eg. isTiltedLeft, isTiltedRight, tiltDuration, etc etc. This seems a bit complicated(?) but maybe this is the only way.
Since you don't have any specific code questions, you're generally on the right path. There's a lot of different states to manage, and you'll need to track each of them. If things seem complex, they sure can be. People spend lots of money to run games nicely. A lot of code needs to run very fast in order to make these experiences.
Common things I've found useful to know:
Use a sin wave to add a bounce to your animation.
Use Math.Atan2 to find the angle between two points
Understand how to convert between Radians and Degrees
Use Composition over inheritance as much as possible.
I'm always happy to chat about game dev, feel free to look up my contact info and reach out. Happy Coding!

Is it possible to change the sparkle shape into a circle for this sparkle trail cursor?

I'm still pretty new to coding and web development and am trying to recreate this effect but with a circle.
Original:
https://codepen.io/sarahwfox/pen/pNrYGb
So I changed the word sparkle - for example:
var sparkles=100;
to circle:
var circle=100
and that changed the shape but for some reason, it won't fall like before? Is this the correct way to go about this? I did change it throughout the script but I can't get it to fall like the other one.
https://codepen.io/kyannashanice/pen/YzQPoGe
I've not written much of my own javascript but would really like to incorporate this effect into my project. If someone would be able to help me or give me some resources that might help I would really appreciate it but realize that this may be a lot to ask.
I’m not clear what the circle effect you were hoping to see was but no, this isn’t at all the correct way, sorry!
All you really did by changing sparkles to circle the first time was effectively set the number of falling sparkles to zero, which is why they stopped falling.
There’s not much point changing variable names because they are really just labels. So for instance, if you changed every use of sparkles to circle you’re only really changing a label, not changing what the code does.
If you’re only just learning JavaScript it’s probably going to be beyond your capabilities trying to change the effect to something specific, but you could try playing with other values and seeing what happens.
Hope it helps! I think tinkering with other peoples scripts like this is a great way to start to understand coding.
UPDATE
The part of the code that animates the sparkles starts from line 140 - try tweaking some of that code.
For example on line 143, I changed it to stary[i]+=1+Math.random()*1; to make the sparkles drift down more slowly

Three.js - Dynamically "build/draw" TextGeometry

I want to simulate 3D text being drawn out or built inside my scene. The idea is to take the final score from a game and display it dynamically at the end of the game. If you don't know what I mean, imagine somebody graffiti-ing/tagging some numbers on a wall. The numbers don't pop in like they would if you typed them, but are constructed by building up each number.
Reference for graffiti-ing
I'm pretty sure that I want to use TextGeometry for this but I have absolutely no idea how I would go about making it appear dynamically and there aren't really any examples of this.
My only thought would be to hide each vertex in the TextGeometry and then make each vertex visible with a delay in between but I have no idea if that is anywhere near the right way to do it.
I know that it's possible to animate a line being drawn, but I'm going to need to use TextGeometry as I am using a specific font.
This JSFiddle is a great example of what I want, but with text instead of a line.
I don't have any code for this as I have no idea where to start, thanks in advance for your suggestions, any links/references/code examples are appreciated!

Feathered edge Ellipse p5.js

Im looking to create an ellipse with a feathered or soft edge, as if it has been drawn with a spray can. I cant get my head around it...?? :-i
Any Help will be truly appreciated.
You have to break this down further. Pretend you have a friend who has never seen anything drawn with a spray can, so they have no idea what that looks like. Your goal is to give your friend a piece of paper, a pencil, and a list of steps they can follow to create the effect even though they've never seen it before.
Write down a series of steps (in English, not in code) that your friend could follow using the pen and paper. Remember that your friend has never seen the effect before, so you have to be as specific as possible. Try to break steps down into smaller sub-steps whenever possible. Maybe try watching videos of the effect in slow motion to figure out exactly what's going on.
When you have the list of steps written down, that's an algorithm that you can think about implementing with code.
Even though this doesn't feel like programming, this process of breaking your main goal down into several smaller steps is at the core of programming (especially creative coding).
That being said, I can help you get started by offering several approaches you might want to play with.
Just use an image stamp. Draw the effect beforehand and then just draw that image to the canvas, optionally randomly rotating and coloring it.
Or draw a series of circles, maybe getting more transparent as they get further from the center.
Or draw a random dot within a random range at a random angle. Do this several times per frame.

moving object in html/css/javascript detecting collision with other objects

I want to make a moving man in css/html/javascript, also detect collisions with other objects. Any idea how to do it? or any pointers to the same will do great.
The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect.
Some design patterns should help you to make your code better.
Good luck.
Pretty much any basic game tutorial covers the topics you asked.
If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript.
to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever.
I am pretty sure you can figure out what to do if you follow these tips.

Categories