How to Script a Voice-Sensitive Robot Animation in p5.js

MakeUseOf | 11/8/2018 | Ian Buckley
cindy95240 (Posted by) Level 3
Click For Photo:

JavaScript is the language of the internet. Working in front-end development without it is impossible. For beginners, kids especially, it can be challenging to get used to the language’s syntax.

To complete novices, even installing and running a local server in the browser can be a stumbling block. What if there was a way to make something cool with JavaScript, without installing anything? Enter p5.js, a coding library designed with creativity in mind.

Sound - Head - Coding - Principles

Here’s how to make a sound reactive animated robot head using some simple coding principles.

What Is p5.js?

P5 - Js - Library - Los - Angeles

The p5.js library was created by Los Angeles Based artist Lauren MacCarthy. It is designed to provide a similar platform to Processing, for creative expression and art. Clear tools go along with well explained tutorials and reference documents to make it perfect for beginners.

Whether you are making animations, music, simple games, or even connecting to external hardware, p5.js can help.

Amazing - Hardware - Projects - Processing - P5

8 Amazing Hardware Projects With Processing and p5.js

DIY electronics is more than just Arduino and Raspberry Pi. In this rundown, we cover some of the coolest projects you can make with Processing and p5.js!

Browser - Window - Navigate - P5 - Js

To begin, open your browser window and navigate to the p5.js web editor. Before starting, there are two optional steps.

1. You must be signed in to p5.js to save your sketches, so making an account is advisable. Signing up is free, and you can use your Google or GitHub account to sign in if you wish.

Settings - Wheel - Right - Corner - Theme

2. Click on the settings cog wheel in the top right corner. Here you can alter the theme and text size for all of you dark theme lovers out there.

The p5.js editor combines a code editor, console, and output window in the same space. So far there are two functions already set up for you.

P5 - Js - Sketch - Elements - Setup

Every p5.js sketch begins with two elements. The setup() function, and...
(Excerpt) Read more at: MakeUseOf
Wake Up To Breaking News!
Sign In or Register to comment.

Welcome to Long Room!

Where The World Finds Its News!