Feathered edge Ellipse p5.js - javascript

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.

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

HTML5 Motion detection, grabbing and scrolling

I have followed a couple of tutorials (http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html, http://www.html5rocks.com/en/tutorials/canvas/notearsgame/) and spliced the two together to create a game (https://github.com/gazzwi86/HTML5-Motion-Detection). While I have a few things to work out with the blending to improve the quality of the detection, I was wondering how I would go about detecting grabbing and swipe gestures, say for navigating a web page.
Could you point me in the direction of some examples or outline the principles so that I may try it myself.
I wouldn't go for it. It would require huge processing on client side to be quite good detection.
You can simply track moving objects(like hand) with some threshold(you can simply blur to get rid of noise). The background of user mostly will stay the same, so you can ignore it too.
Then convert image to black and white and try to have your moving object as one polygon.
What I would go to experiment after - set up a little neural network and train it myself by moving my hand.
Well that's just my 2 cents on how I would try to implement it. It would be really nice to hear from you later how did you do that and what the results are :)

Is processing.js a good option to implement this idea?

I've been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:
And so far I have this (I know it's far away from what I need, but just playing around)
http://jsfiddle.net/dburelax/XY8CA/9/
I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks
P.S: I have no idea how to make the character move within the tiles any suggestions are welcome :)
I'd say light years away. But don't take it as sarcasm; let me explain.
What I see when I look at the gif is an engine that supports block "primitives".
Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:
A map background
A gif of sprites for the character (without his back or sideway, but let's just forget that for now).
With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.
After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I'll call them interchangeably now) in mixed sizes?
In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had "fog of war" and allowed vision only in adjacent boxes.
It's not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.
I don't know about you, but I wouldn't be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.
While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.
In the case I have offended, take but this and all is mended -- The Goblin
If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I've deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.

Drawing/manipulate a quadrilateral vector on an image using JavaScript

I am trying to develop a system that will render a preview of a what a product might look like with embossing.
In order to do this, I am essentially going to composite two images together. In order to do this correctly, I am building a system using mainly JavaScript that allows a background image to be chosen. Someone will then draw a quadrilateral on this image that represents the correct proportions of the composite image.
This image, which is rectangular, will be distorted to match the four coordinates that comprise this quadrilateral using Imagick.
The piece I'm a little hazy on is the JavaScript. It doesn't need to support multiple browsers, Webkit or FF is fine.
At a minimum, it should put a rectangular shape comprised of four points. These points can then be manipulated at will and a line would be drawn between the points to help the user visualize the effect.
This is a crude description, but the best I have. In a perfect world, I'd love to do something similar to this , but with more flexibility. http://jqueryui.com/demos/resizable/#aspect-ratio is also a good example of something similar to what I'm envisioning, but with less constrained transformations.
I've investigated Raphael.js, which looks promising too but I'm weary of reinventing the wheel.
Any thoughts? Am I missing any obvious JavaScript libraries/implementations that might be useful here?
EDIT: I ended up using Flash and this AS3 class: http://www.rubenswieringa.com/blog/distortimage
It was a pain, but I got it working. I'm leaving this up in case someone wants to opine on a javascript technique.

Categories