Random Alien Monster Generator - With Code!

Here is a fun beginner level tutorial on generating random alien monster characters using p5.js code. So every time you hit play on the p5.js editor, you will create a new, different looking alien monster.

For this tutorial, all you need is your laptop, a stable internet connection, and some quality time to spend on these cute creatures.

To watch a tutorial, click here below:

To make the learning simpler, the best way to get started is to create your free account on peblio and opening a p5js editor on your account. Watch the tutorial video to learn how to do this.

Once you sign up, click on the link below to find the materials required to start coding your alien monsters.

https://demo.peblio.co/profile/Paper%20Crane%20Lab/folder/rJF7RgqCP?autoRemix=true

To learn how to make the monster, first, let us go over how to code shapes and colors, and how the basic setup of the p5.js editor works. Use the cheat sheet we have generated to learn how to make different shapes like ellipses, rectangles and triangles along with learning how to color the shapes in.

You can find the cheat sheet along with some other learning resources below: https://demo.peblio.co/pebl/0yJPrLLWY

Now that you have familiarized yourself with the cheat sheet, let us make a basic alien monster.

Copy paste the code below in the editor, and play around with the numbers to change the size and color of your monster. Feel free to play around with the shapes also!

Code:

function setup() {
createCanvas(400, 400);

background("#ffd39e");

noStroke();

//legs

fill("#f1aa9b");

rect(160,190,15,30,10);

rect(190,190,15,50,10);

rect(220,190,15,40,10);

//body

fill("#48426d");

rect(150,50,100,150,20);

//eye

fill("#ffffff");

ellipse(200,100,60);

//inner eye

fill("#000000");

ellipse(200,100,30);

//mouth

fill("#fe2343");

ellipse(200,150,10);

}

function draw()

{ }

The random function in p5.js is a fun tool that allows for the computer to randomly pick a value between the given choices, every time the code is run.

For example, random (10,20) would allow for the computer to pick a number between 10 and 20.

To make the random alien monster generator, we will create random sizes for the body parts of the alien. For this, we shall replace any value used to define the shapes, by a random function as shown below.

You can copy paste the code below into your editor, or click on this link here to copy this code into your editor:

https://demo.peblio.co/pebl/CdSqIUCG6

Code:

function setup() {

createCanvas(400, 400);

background("#ffd39e");

noStroke();

//legs

fill("#f1aa9b");

rect(160,190,15,random(20,50),10);

rect(190,190,15,random(40,80),10);

rect(220,190,15,random(30,70),10);

//body

fill("#48426d");

rect(150,50,100,random(110,150),20);

//eye

fill("#ffffff");

ellipse(200,100,random(50,70));

//inner eye

fill("#000000");

ellipse(200,100,random(20,50));

//mouth

fill("#fe2343");

ellipse(200,150,random(7,16));

}

function draw()

{ }

Now that you have a rough understanding of how this works, play around and try to change other variables of shapes, or even colors with the random function to create truly random alien monsters every single time you hit play!

Add an extra eye maybe, or an ear, or arms and legs! Hey, it is your very own monster.

Feel free to let us know how your monsters turned out!

You can also check out our online course. It is a beginner friendly course, and covers p5 all the way from basics to image manipulation by clicking here below:

Paper Crane Lab Online Creative Coding Classes