Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38349 > unrolled thread

Webpage background JS non-stop animation idea

Back to article view | Back to comp.lang.javascript

Contents

  Webpage background JS non-stop animation idea robamman2020@hotmail.com - 2020-04-02 09:47 -0700
    Re: Webpage background JS non-stop animation idea robamman2020@hotmail.com - 2020-04-02 10:00 -0700
      Re: Webpage background JS non-stop animation idea luserdroog <luser.droog@gmail.com> - 2020-04-02 12:35 -0700
        Re: Webpage background JS non-stop animation idea minajaich@gmail.com - 2020-04-02 18:37 -0700
        Re: Webpage background JS non-stop animation idea Arno Welzel <usenet@arnowelzel.de> - 2020-04-03 10:06 +0200
          Re: Webpage background JS non-stop animation idea "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-04-03 10:53 -0700
            Re: Webpage background JS non-stop animation idea minajaich@gmail.com - 2020-04-03 13:58 -0700
    Re: Webpage background JS non-stop animation idea Andrew Poulos <ap_prog@hotmail.com> - 2020-04-03 13:34 +1100
      Re: Webpage background JS non-stop animation idea minajaich@gmail.com - 2020-04-02 20:13 -0700
        Re: Webpage background JS non-stop animation idea Andrew Poulos <ap_prog@hotmail.com> - 2020-04-03 17:24 +1100
          Re: Webpage background JS non-stop animation idea minajaich@gmail.com - 2020-04-03 00:35 -0700
          Re: Webpage background JS non-stop animation idea minajaich@gmail.com - 2020-04-03 00:40 -0700

#38349 — Webpage background JS non-stop animation idea

If somebody is interested of this idea, then he or she can program it and paste us the link.

How to do it:

Make for example 12 shapes of characters.
With random number generator pick a place on screen and draw the shape.
Then find next shape and position, that does not match first one.
Make a smooth points moving from one shape to another.
Then find next position and continue the process until the webpage stays open.



Kristjan Robam
Tel: 372 6861327
E-mail: ro ba m man 20 2 0@ ho t mai l . co m
(Remove spaces)

Also, if you are interested of getting this programmed by myself, then please contact me and we'll see how much it would cost for you.

[toc] | [next] | [standalone]

#38350

And also I'm interested myself too of this solution. So if somebody knows how to do that very fast, then I would be very thankful !

With best wishes,
Kristjan Robam

neljapäev, 2. aprill 2020 19:47.56 UTC+3 kirjutas robamm...@hotmail.com:
> If somebody is interested of this idea, then he or she can program it and paste us the link.
> 
> How to do it:
> 
> Make for example 12 shapes of characters.
> With random number generator pick a place on screen and draw the shape.
> Then find next shape and position, that does not match first one.
> Make a smooth points moving from one shape to another.
> Then find next position and continue the process until the webpage stays open.
> 
> 
> 
> Kristjan Robam
> Tel: 372 6861327
> E-mail: ro ba m man 20 2 0@ ho t mai l . co m
> (Remove spaces)
> 
> Also, if you are interested of getting this programmed by myself, then please contact me and we'll see how much it would cost for you.

[toc] | [prev] | [next] | [standalone]

#38351

On Thursday, April 2, 2020 at 12:00:55 PM UTC-5, robamm...@hotmail.com wrote:
> And also I'm interested myself too of this solution. So if somebody knows how to do that very fast, then I would be very thankful !
> 
> With best wishes,
> Kristjan Robam
> 
> neljapäev, 2. aprill 2020 19:47.56 UTC+3 kirjutas robamm...@hotmail.com:
> > If somebody is interested of this idea, then he or she can program it and paste us the link.
> > 
> > How to do it:
> > 
> > Make for example 12 shapes of characters.
> > With random number generator pick a place on screen and draw the shape.
> > Then find next shape and position, that does not match first one.
> > Make a smooth points moving from one shape to another.
> > Then find next position and continue the process until the webpage stays open.
> > 
> > 
> > 
> > Kristjan Robam
> > Tel: 372 6861327
> > E-mail: ro ba m man 20 2 0@ ho t mai l . co m
> > (Remove spaces)
> > 
> > Also, if you are interested of getting this programmed by myself, then please contact me and we'll see how much it would cost for you.

It all seems pretty straightforward except for snagging the character paths
from a font. I know how to do it in PostScript but not JS.

[toc] | [prev] | [next] | [standalone]

#38353

neljapäev, 2. aprill 2020 22:35.36 UTC+3 kirjutas luserdroog:
> On Thursday, April 2, 2020 at 12:00:55 PM UTC-5, robamm...@hotmail.com wrote:
> > And also I'm interested myself too of this solution. So if somebody knows how to do that very fast, then I would be very thankful !
> > 
> > With best wishes,
> > Kristjan Robam
> > 
> > neljapäev, 2. aprill 2020 19:47.56 UTC+3 kirjutas robamm...@hotmail.com:
> > > If somebody is interested of this idea, then he or she can program it and paste us the link.
> > > 
> > > How to do it:
> > > 
> > > Make for example 12 shapes of characters.
> > > With random number generator pick a place on screen and draw the shape.
> > > Then find next shape and position, that does not match first one.
> > > Make a smooth points moving from one shape to another.
> > > Then find next position and continue the process until the webpage stays open.
> > > 
> > > 
> > > 
> > > Kristjan Robam
> > > Tel: 372 6861327
> > > E-mail: ro ba m man 20 2 0@ ho t mai l . co m
> > > (Remove spaces)
> > > 
> > > Also, if you are interested of getting this programmed by myself, then please contact me and we'll see how much it would cost for you.
> 
> It all seems pretty straightforward except for snagging the character paths
> from a font. I know how to do it in PostScript but not JS.

Hmm.... I was thinking about it. I think it would be better with transparent images. Maybe it's only needed to search it from google. I believe somebody has already done that in Javascript.

 
Kristjan
Tel: 372 6861327
E-mail: ro ba m man 20 2 0@ ho t mai l . co m
(Remove spaces)

[toc] | [prev] | [next] | [standalone]

#38360

luserdroog:

> On Thursday, April 2, 2020 at 12:00:55 PM UTC-5, robamm...@hotmail.com wrote:
[...]
>>> Make for example 12 shapes of characters.
>>> With random number generator pick a place on screen and draw the shape.
>>> Then find next shape and position, that does not match first one.
>>> Make a smooth points moving from one shape to another.
>>> Then find next position and continue the process until the webpage stays open.
[...]
> It all seems pretty straightforward except for snagging the character paths
> from a font. I know how to do it in PostScript but not JS.

Maybe using SVG may work:

<https://greensock.com/morphSVG>


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#38362

On Friday, April 3, 2020 at 3:06:50 AM UTC-5, Arno Welzel wrote:
> luserdroog:
> 
> > On Thursday, April 2, 2020 at 12:00:55 PM UTC-5, robamm...@hotmail.com wrote:
> [...]
> >>> Make for example 12 shapes of characters.
> >>> With random number generator pick a place on screen and draw the shape.
> >>> Then find next shape and position, that does not match first one.
> >>> Make a smooth points moving from one shape to another.
> >>> Then find next position and continue the process until the webpage stays open.
> [...]
> > It all seems pretty straightforward except for snagging the character paths
> > from a font. I know how to do it in PostScript but not JS.
> 
> Maybe using SVG may work:
> 
> <https://greensock.com/morphSVG>


I think a variation of ge1doot's approach is also reasonable:

<https://codepen.io/ge1doot/pen/NGjGZY>

[toc] | [prev] | [next] | [standalone]

#38364

reede, 3. aprill 2020 20:54.01 UTC+3 kirjutas Michael Haufe (TNO):
> On Friday, April 3, 2020 at 3:06:50 AM UTC-5, Arno Welzel wrote:
> > luserdroog:
> > 
> > > On Thursday, April 2, 2020 at 12:00:55 PM UTC-5, robamm...@hotmail.com wrote:
> > [...]
> > >>> Make for example 12 shapes of characters.
> > >>> With random number generator pick a place on screen and draw the shape.
> > >>> Then find next shape and position, that does not match first one.
> > >>> Make a smooth points moving from one shape to another.
> > >>> Then find next position and continue the process until the webpage stays open.
> > [...]
> > > It all seems pretty straightforward except for snagging the character paths
> > > from a font. I know how to do it in PostScript but not JS.
> > 
> > Maybe using SVG may work:
> > 
> > <https://greensock.com/morphSVG>
> 
> 
> I think a variation of ge1doot's approach is also reasonable:
> 
> <https://codepen.io/ge1doot/pen/NGjGZY>

Thanks for the references Arno and Michael.


Kristjan Robam
Tel. 372 6861327
E-mail: ro b am ma n 2 0 20 @h ot m a i l . c om
(Please remove empty characters)

[toc] | [prev] | [next] | [standalone]

#38355

On 3/04/2020 3:47 am, robamman2020@hotmail.com wrote:

> Make for example 12 shapes of characters.

What do you mean by "shapes of characters"? Do you mean:
- images that look like letters, or
- actual text (font family, size, colour....)

> With random number generator pick a place on screen and draw the shape.
> Then find next shape and position, that does not match first one.
> Make a smooth points moving from one shape to another.

If the shapes are all different size when does moving one shape to 
another end:
- when their centres align, or
- when their, say, left and top edges align, or
- it doesn't really matter, or
- something else
?

> Then find next position and continue the process until the web page stays open.

Does this mean that each time two shapes meet the earlier appearing 
shape is deleted?

So the action would be

1. 'A' appears
2. 'B' appears
3. 'A' moves to 'B'
4. 'A' disappears
5. 'C' appears
6. 'B' moves to 'C'
7. 'B' disappears
8. 'D' appears...

Is that correct?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38356

reede, 3. aprill 2020 5:34.44 UTC+3 kirjutas Andrew Poulos:
> On 3/04/2020 3:47 am, robamman2020@hotmail.com wrote:
> 
> > Make for example 12 shapes of characters.
> 
> What do you mean by "shapes of characters"? Do you mean:
> - images that look like letters, or
> - actual text (font family, size, colour....)
> 
> > With random number generator pick a place on screen and draw the shape.
> > Then find next shape and position, that does not match first one.
> > Make a smooth points moving from one shape to another.
> 
> If the shapes are all different size when does moving one shape to 
> another end:
> - when their centres align, or
> - when their, say, left and top edges align, or
> - it doesn't really matter, or
> - something else
> ?
> 
> > Then find next position and continue the process until the web page stays open.
> 
> Does this mean that each time two shapes meet the earlier appearing 
> shape is deleted?
> 
> So the action would be
> 
> 1. 'A' appears
> 2. 'B' appears
> 3. 'A' moves to 'B'
> 4. 'A' disappears
> 5. 'C' appears
> 6. 'B' moves to 'C'
> 7. 'B' disappears
> 8. 'D' appears...
> 
> Is that correct?
> 
> Andrew Poulos

I think you got it wrong. The second shape appears, when the points have moved to it from the first shape.


With best wishes,
Kristjan Robam

[toc] | [prev] | [next] | [standalone]

#38357

On 3/04/2020 2:13 pm, minajaich@gmail.com wrote:
> reede, 3. aprill 2020 5:34.44 UTC+3 kirjutas Andrew Poulos:
>> On 3/04/2020 3:47 am, robamman2020@hotmail.com wrote:
>>
>>> Make for example 12 shapes of characters.
>>
>> What do you mean by "shapes of characters"? Do you mean:
>> - images that look like letters, or
>> - actual text (font family, size, colour....)
>>
>>> With random number generator pick a place on screen and draw the shape.
>>> Then find next shape and position, that does not match first one.
>>> Make a smooth points moving from one shape to another.
>>
>> If the shapes are all different size when does moving one shape to
>> another end:
>> - when their centres align, or
>> - when their, say, left and top edges align, or
>> - it doesn't really matter, or
>> - something else
>> ?
>>
>>> Then find next position and continue the process until the web page stays open.
>>
>> Does this mean that each time two shapes meet the earlier appearing
>> shape is deleted?
>>
>> So the action would be
>>
>> 1. 'A' appears
>> 2. 'B' appears
>> 3. 'A' moves to 'B'
>> 4. 'A' disappears
>> 5. 'C' appears
>> 6. 'B' moves to 'C'
>> 7. 'B' disappears
>> 8. 'D' appears...
>>
>> Is that correct?
>>
>> Andrew Poulos
> 
> I think you got it wrong. The second shape appears, when the points have moved to it from the first shape.

Are you saying that there is only one shape that morphs into different 
shapes as it moves (a shape being some a collection of points)?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38358

reede, 3. aprill 2020 9:25.01 UTC+3 kirjutas Andrew Poulos:
> On 3/04/2020 2:13 pm, minajaich@gmail.com wrote:
> > reede, 3. aprill 2020 5:34.44 UTC+3 kirjutas Andrew Poulos:
> >> On 3/04/2020 3:47 am, robamman2020@hotmail.com wrote:
> >>
> >>> Make for example 12 shapes of characters.
> >>
> >> What do you mean by "shapes of characters"? Do you mean:
> >> - images that look like letters, or
> >> - actual text (font family, size, colour....)
> >>
> >>> With random number generator pick a place on screen and draw the shape.
> >>> Then find next shape and position, that does not match first one.
> >>> Make a smooth points moving from one shape to another.
> >>
> >> If the shapes are all different size when does moving one shape to
> >> another end:
> >> - when their centres align, or
> >> - when their, say, left and top edges align, or
> >> - it doesn't really matter, or
> >> - something else
> >> ?
> >>
> >>> Then find next position and continue the process until the web page stays open.
> >>
> >> Does this mean that each time two shapes meet the earlier appearing
> >> shape is deleted?
> >>
> >> So the action would be
> >>
> >> 1. 'A' appears
> >> 2. 'B' appears
> >> 3. 'A' moves to 'B'
> >> 4. 'A' disappears
> >> 5. 'C' appears
> >> 6. 'B' moves to 'C'
> >> 7. 'B' disappears
> >> 8. 'D' appears...
> >>
> >> Is that correct?
> >>
> >> Andrew Poulos
> > 
> > I think you got it wrong. The second shape appears, when the points have moved to it from the first shape.
> 
> Are you saying that there is only one shape that morphs into different 
> shapes as it moves (a shape being some a collection of points)?
> 
> Andrew Poulos

No as much as you want.


Kristjan Robam

[toc] | [prev] | [next] | [standalone]

#38359

reede, 3. aprill 2020 9:25.01 UTC+3 kirjutas Andrew Poulos:
> On 3/04/2020 2:13 pm, minajaich@gmail.com wrote:
> > reede, 3. aprill 2020 5:34.44 UTC+3 kirjutas Andrew Poulos:
> >> On 3/04/2020 3:47 am, robamman2020@hotmail.com wrote:
> >>
> >>> Make for example 12 shapes of characters.
> >>
> >> What do you mean by "shapes of characters"? Do you mean:
> >> - images that look like letters, or
> >> - actual text (font family, size, colour....)
> >>
> >>> With random number generator pick a place on screen and draw the shape.
> >>> Then find next shape and position, that does not match first one.
> >>> Make a smooth points moving from one shape to another.
> >>
> >> If the shapes are all different size when does moving one shape to
> >> another end:
> >> - when their centres align, or
> >> - when their, say, left and top edges align, or
> >> - it doesn't really matter, or
> >> - something else
> >> ?
> >>
> >>> Then find next position and continue the process until the web page stays open.
> >>
> >> Does this mean that each time two shapes meet the earlier appearing
> >> shape is deleted?
> >>
> >> So the action would be
> >>
> >> 1. 'A' appears
> >> 2. 'B' appears
> >> 3. 'A' moves to 'B'
> >> 4. 'A' disappears
> >> 5. 'C' appears
> >> 6. 'B' moves to 'C'
> >> 7. 'B' disappears
> >> 8. 'D' appears...
> >>
> >> Is that correct?
> >>
> >> Andrew Poulos
> > 
> > I think you got it wrong. The second shape appears, when the points have moved to it from the first shape.
> 
> Are you saying that there is only one shape that morphs into different 
> shapes as it moves (a shape being some a collection of points)?
> 
> Andrew Poulos

Basically the idea of the smooth moving is that first it will take the outer points of the first shape and then they move to the second shape coordinate by coordinate into the most centre first. And when there is less points in first shape, then it will add them automatically to second after the filling of the first ones. And if more then they will just dissappear after first points(characters) moving.


With best wishes,
Kristjan Robam

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web