Forem: SteinarV-design

Random positioning of particle emitter on screen with vanilla Javascript and GSAP.

SteinarV-design — Sun, 01 Jan 2023 03:24:15 +0000

About GSAP

GSAP (GreenSock Animation Platform) is a robust
high-performance JavaScript animation library.
Read more at: https://greensock.com/docs/

The html-file

Javascript-files

Diagram

SVG code detail

About Codepen

"Codepen" - https://codepen.io/ - is a social development environment - an online code editor for developers of any skill - that allows people to write code in the browser, and see the results of it as they build. Codepen is particularly useful for people learning to code.

View the full code for this pen at https://codepen.io/steinarV/pen/qByZGWw

Here is a link to my blog: https://steinarv.design/blog

Thanks for watching !

Import and animate an external SVG file with Javascript and Gsap.

SteinarV-design — Tue, 20 Dec 2022 01:30:49 +0000

About GSAP

GSAP (GreenSock Animation Platform) is a robust
high-performance JavaScript animation library.
Read more at: https://greensock.com/docs/

The html-file

The Javascript-file

Diagram

Code from the external SVG-file

<svg xmlns="http://www.w3.org/2000/svg" id="mysvg" viewBox="0 0 1460 930">
<style type="text/css">
    .st1{fill:#FFFFFF;}
    .st2{fill:#FC5B6B;}
</style>

<g id="m1" class="item m1">
    <path id="m1black" d="M348.7,666.5c-60.1,72.5-62.9,104-62.9,104c-2.1,15.3,8.6,20.8,8.6,20.8l2.6,0.8c1.6,0.3,1.6,1.6,1.6,1.6   c0.3,0.8-1.6,1.3-1.6,1.3c-27.3,0.5-28.6-27.3-28.6-27.3c-1-7.3,3.4-21.3,3.4-21.3c1.6-4.7,3.6-10.1,6.8-16.4   c10.4-21.3,39.8-60.6,39.8-60.6l-0.5-0.3c-54.6,62.4-71,85-71,85c-14.8,22.4-20.3,35.6-20.3,35.6c-1.6,2.6,0.3,4.9,0.3,4.9   c0.8,1,0,2.1,0,2.1c-0.5,1.3-3.4,0.3-3.4,0.3c-13.5-7.3-13.5-19.8-13.5-19.8c-1-4.7,6.8-19.8,6.8-19.8c30.4-57.2,58-95.2,58-95.2   l-0.5-0.5c-76.7,81.1-90.5,100.6-90.5,100.6c-17.4,24.4-16.6,33.3-16.6,33.3c0,1.8,1.3,4.7,1.3,4.7c0.8,1.6-1,2.9-1,2.9   c-1.6,1.3-3.9-0.8-3.9-0.8c-12.7-12.2-12.7-20.3-12.7-20.3c-3.6-5.5,13.5-30.9,13.5-30.9c49.7-69.9,54.9-78.5,54.9-78.5   c14.3-20.5,14.8-26.3,14.8-26.3c0.8-1.6-0.8-1-0.8-1c-33.3,12.5-63.7,36.9-63.7,36.9c-34.1,26.3-44.2,40-44.2,40   c-0.3,1,4.7,1.3,4.7,1.3c2.1-0.3,2.1,1.6,2.1,1.6c0.5,0.8-1.3,1.6-1.3,1.6c-10.1,4.7-16.4-1.3-16.4-1.3   c-8.8-7.5-11.7-15.6-11.7-15.6c-1.3-1.3,2.6-4.4,2.6-4.4c16.9-13.5,37.7-28.1,37.7-28.1c15.3-11.4,33.3-21.8,47.6-28.9   c23.7-11.4,34.6-13,34.6-13c7-1,12.5,3.9,12.5,3.9l4.9,4.7c5.5,5.2,3.4,14.8,3.4,14.8c-3.1,18.7-23.4,45.8-23.4,45.8   c-12.5,16.9-15.6,20-15.6,20l0.5,0.8l54.1-61.9l17.7-20.3c2.6-3.6,5.7-3.6,5.7-3.6c1.8-0.5,5.5,2.6,5.5,2.6 c8.6,7.5,11.4,10.4,11.4,10.4c3.9,3.6,0.3,9.1,0.3,9.1l-46.5,70.5l0.5,0.5c52.8-65.5,70.2-83.2,70.2-83.2c3.4-6.2,7.5-4.2,7.5-4.2   c8.3,5.2,15.3,12.5,15.3,12.5C354.1,661.1,348.7,666.5,348.7,666.5z"/>
    <path id="m1white" class="st1" d="M347.7,656.5c-60.1,72.5-62.9,104-62.9,104c-2.1,15.3,8.6,20.8,8.6,20.8l2.6,0.8   c1.6,0.3,1.6,1.6,1.6,1.6c0.3,0.8-1.6,1.3-1.6,1.3c-27.3,0.5-28.6-27.3-28.6-27.3c-1-7.3,3.4-21.3,3.4-21.3   c1.6-4.7,3.6-10.1,6.8-16.4c10.4-21.3,39.8-60.6,39.8-60.6l-0.5-0.3c-54.6,62.4-71,85-71,85c-14.8,22.4-20.3,35.6-20.3,35.6   c-1.6,2.6,0.3,4.9,0.3,4.9c0.8,1,0,2.1,0,2.1c-0.5,1.3-3.4,0.3-3.4,0.3c-13.5-7.3-13.5-19.8-13.5-19.8c-1-4.7,6.8-19.8,6.8-19.8   c30.4-57.2,58-95.2,58-95.2l-0.5-0.5c-76.7,81.1-90.5,100.6-90.5,100.6c-17.4,24.4-16.6,33.3-16.6,33.3c0,1.8,1.3,4.7,1.3,4.7   c0.8,1.6-1,2.9-1,2.9c-1.6,1.3-3.9-0.8-3.9-0.8c-12.7-12.2-12.7-20.3-12.7-20.3c-3.6-5.5,13.5-30.9,13.5-30.9   c49.7-69.9,54.9-78.5,54.9-78.5c14.3-20.5,14.8-26.3,14.8-26.3c0.8-1.6-0.8-1-0.8-1c-33.3,12.5-63.7,36.9-63.7,36.9   c-34.1,26.3-44.2,40-44.2,40c-0.3,1,4.7,1.3,4.7,1.3c2.1-0.3,2.1,1.6,2.1,1.6c0.5,0.8-1.3,1.6-1.3,1.6c-10.1,4.7-16.4-1.3-16.4-1.3   c-8.8-7.5-11.7-15.6-11.7-15.6c-1.3-1.3,2.6-4.4,2.6-4.4c16.9-13.5,37.7-28.1,37.7-28.1c15.3-11.4,33.3-21.8,47.6-28.9   c23.7-11.4,34.6-13,34.6-13c7-1,12.5,3.9,12.5,3.9l4.9,4.7c5.5,5.2,3.4,14.8,3.4,14.8c-3.1,18.7-23.4,45.8-23.4,45.8   c-12.5,16.9-15.6,20-15.6,20l0.5,0.8l54.1-61.9l17.7-20.3c2.6-3.6,5.7-3.6,5.7-3.6c1.8-0.5,5.5,2.6,5.5,2.6   c8.6,7.5,11.4,10.4,11.4,10.4c3.9,3.6,0.3,9.1,0.3,9.1l-46.5,70.5l0.5,0.5c52.8-65.5,70.2-83.2,70.2-83.2c3.4-6.2,7.5-4.2,7.5-4.2   c8.3,5.2,15.3,12.5,15.3,12.5C353.1,651.1,347.7,656.5,347.7,656.5z"/>
</g>
<g id="e" class="item e">
            <path id="eblack" d="M348.7,666.5c-60.1 . . . . . 6.5z"/>
            <path id="ewhite" class="st1" d="M347.7,6 . . . . . 7,656.5z"/>
</g>
/* more <g> </g> elements here*/
</svg>

About Codepen

View the full code for this pen at https://codepen.io/steinarV/pen/KKBKpPd

Here is a link to my blog: https://steinarv.design/blog

Thanks for watching !

Finite State Machine w. vanilla JavaScript example

SteinarV-design — Sun, 11 Dec 2022 04:36:48 +0000

Definition

The finite state machine can only have one single state active at the same time. This means that the machine has to transition from one state to another, in order to perform different actions.

Code excerpts

The state machine

const stateMachine = {
  state: 'localTime',
  transitions: {
localTime: {
      start() {
        this.state = 'stopWatch';
      },
      stop() {
        this.state = 'localTime';
      },
      setTab() {
        this.state = 'settings';
      },
      quotesTab() {
        this.state = 'quotes';
      },
      displayTab() {
        this.state = 'localTime';
      },
    },
    stopWatch: {
      start() {
        this.state = 'stopWatch';
      },
      stop() {
        this.state = 'localTime';
      },
      setTab() {
        this.state = 'stopWatch';
      },
      finish() {
        this.state = 'localTime';
      },
      quotesTab() {
        this.state = 'stopWatch';
      },
      displayTab() {
        this.state = 'stopWatch';
      },
    },
    settings: {
      start() {
        this.state = 'settings';
      },
      stop() {
        this.state = 'settings';
      },
      setTab() {
        this.state = 'settings';
      },
      quotesTab() {
        this.state = 'settings';
      },
      displayTab() {
        this.state = 'localTime';
      },
    },
    quotes: {
      start() {
        this.state = 'quotes';
      },
      stop() {
        this.state = 'quotes';
      },
      setTab() {
        this.state = 'quotes';
      },
      quotesTab() {
        this.state = 'quotes';
      },
      displayTab() {
        this.state = 'localTime';
      },
    },
  },
  dispatch(actionName) {
    const action = this.transitions[this.state][actionName];

    if (action) {
      action.call(this);
    } else {
      console.log('invalid action');
    }
  },
};

Diagram of the machine

How to transition between states

let code = ``

code = `
          <button class="stop" onClick="stopClicked()">Stop</button>

          <button class="quotes" onClick="quotesOnTop()">Quotes</button>

          <button class="settings" onClick="settingsOnTop()">Settings</button>

          <button class="display" onClick="displayOnTop()">Display</button>

          <button class="start" onClick="startClicked()">Start</button>
`;

function startClicked() {
  if (stateMachine.state === 'localTime') {
    stateMachine.dispatch('start');
  }
}

function stopClicked() {
  if (stateMachine.state === 'stopWatch') {
    stateMachine.dispatch('stop');
  }
}

const displayOnTop = () => {
  if (
    stateMachine.state === 'settings' ||
    stateMachine.state === 'quotes'
  ) {
    stateMachine.dispatch('displayTab');
  }
};

const settingsOnTop = () => {
  if (stateMachine.state === 'localTime') {
    stateMachine.dispatch('setTab');
  }
};

const quotesOnTop = () => {
  if (stateMachine.state === 'localTime') {
    stateMachine.dispatch('quotesTab');
  }
};

The function createPanels( ) creates 5 buttons - Stop, Quote, Settings, Display and Start. Clicking one of these buttons will change the state of the machine. You can only click on buttons that are active. Active buttons are dependent of the state of the machine.

Codepen

"Codepen" - https://codepen.io/ - is a social development environment, an online code editor for developers of any skill, that allows people to write code in the browser, and see the results of it as they build. Codepen is particularly useful for people learning to code.

View the full code for the state machine at
https://codepen.io/steinarV/pen/eYBowaw?editors=0010

Here is a link to my blog : https://steinarv.design/blog

Thanks for watching !

Responsive SVG animation w. vanilla Javascript

SteinarV-design — Sun, 20 Nov 2022 20:51:32 +0000

Code layout for my animation https://codepen.io/steinarV/pen/qBKPGmK :

Visit my blog https://steinarv.design/blog

Responsive SVG animation w. vanilla Javascript

SteinarV-design — Fri, 18 Nov 2022 18:22:28 +0000