Alien

An alien created with basic shapes

Source Code for this Sketch

class Timer{
	constructor(delay) {
		this.count = 0
		this.delta = 0
		this.delay = delay
	}

	update() {
		this.delta += deltaTime
		if(this.delta > this.delay) {
			this.count++
			this.delta %= this.delay
		}
	}
}

class Alien{
	constructor() {
		this.lights = new Timer(250)
	}

	radX(deg, r) {
		return cos(deg-90)*r
	}
	radY(deg, r) {
		return sin(deg-90)*r
	}

	eye(x, y) {
		let deg = round(abs(atan2(mouseX-width/2, mouseY-height/2+30)-180))

		// Stalks
		stroke(80, 100, 50)
		noFill()
		bezier(x, 0, x+this.radX(deg, 5), this.radY(deg, 10), x-this.radX(deg, 15), y-this.radY(deg, 20), x, y)

		// Eyeballs
		noStroke()
		fill(80, 100, 50)
		circle(x+this.radX(deg, 2), y+this.radY(deg, 2), 10)
		fill( 100)
		circle(x+this.radX(deg, 3), y+this.radY(deg, 3), 6)
		fill( 0)
		circle(x+this.radX(deg, 4), y+this.radY(deg, 4), 3)
	}

	draw() {
		this.lights.update()

		// Cockpit
		strokeWeight(1)
		stroke(200, 100, 50, .7)
		fill(200, 100, 50, .3)
		arc(0, -10, 100, 100, 170, 10)

		// Pilot
		let alienElevation = 16
		noStroke()
		fill(80, 100, 50)
		arc(0, -alienElevation, 40, 20, 180, 0)
		rect(0, -alienElevation, 40, 5, 0, 0, 5, 5)

		this.eye(-10, -45)
		this.eye(10, -45)

		// Hull
		strokeWeight(1)
		stroke(20)
		fill(40)
		for(let i = 0; i < 6; i++) {
			ellipse(0, 0, 120-i*20, 30)
		}
		rect(0, 0, 120, 10, 5, 5, 5, 5)

		// Hull lights
		for(let i = 0; i < 11; i++) {
			if(i%4 === this.lights.count) {
				fill(65, 100, 50)
			} else if ((i+1)%4 === this.lights.count) {
				fill(310, 100, 50)
			} else {
				fill(200, 100, 50)
			}
			circle(-50+i*10, 0, 5)

			if(this.lights.count >=4) {
				this.lights.count = 0
			}
		}
	}
}

let alien

function setup() {
	createCanvas(400, 400, P2D, canvas)
	colorMode(HSL)
	angleMode(DEGREES)
	rectMode(CENTER)
	noStroke()

	alien = new Alien()
}



function draw() {
	background(0)
	translate(width / 2, height / 2)
	rotate(10)
	alien.draw()
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches