Dino Creature

A shapely fellow

Source Code for this Sketch

let bodyColor = null
let shadowColor = null

function setup() {
	createCanvas(600, 600, P2D, canvas)
	colorMode(HSL)
	angleMode(DEGREES)

	bodyColor = color(35, 100, 50)
	shadowColor = color(30, 100, 40)
}

function roundedTriangle(x1, y1, x2, y2, x3, y3, r, color) {
	fill(color)
	strokeWeight(0)
	triangle(x1, y1, x2, y2, x3, y3)

	stroke(color)
	strokeWeight(r * 2)
	line(x1, y1, x2, y2)
	line(x2, y2, x3, y3)
	line(x1, y1, x3, y3)
}

function nestedTriangle(x, y, size, deg) {
	push()
	translate(x, y)
	rotate(deg)
	roundedTriangle(0, 0, 0-size/2, size, size/2, size, size/4, color(35, 100, 50))
	noStroke()
	fill(50, 100, 50)
	triangle(0, 0, 0-size/2, size, size/2, size)
	pop()
}

function eye(x, y, size, deg) {
	push()
	translate(x, y)
	rotate(deg)
	roundedTriangle(0, 0, 0-size/2, size, size/2, size, size/4, color(100))
	noStroke()

	fill(250, 100, 40)
	triangle(0, size/2, 0-size/6, size*1.25, size/6, size*1.25)
	pop()
}

let knee = [368, 481]
let kneeBack = [348, 465]
let ankle = [351, 500]

function draw() {
	background(45, 40, 85)

	// Back scales
	for(let i = 0; i < 7; i++) {
		nestedTriangle(295+20*i, 390-20*i, 20, 70)
	}
	// Tail
	for(let i = 0; i < 4; i++) {
		nestedTriangle(195+25*i, 367+i*8, 20, 20)
	}

	// Torso
	roundedTriangle(250, 450, 400, 450, 450, 250, 10, bodyColor)
	// Tail
	roundedTriangle(250, 450, 275, 425, 170, 390, 10, bodyColor)

	// Head
	roundedTriangle(450, 250, 500, 300, 440, 320, 10, bodyColor)
	// Jawline
	noStroke()
	fill(shadowColor)
	triangle(441, 330, 438, 336, 420, 321)

	// Nose
	fill(0)
	triangle(489, 299, 496, 307, 498, 302)
	triangle(491, 293, 498, 301, 502, 298)

	// Arm
	roundedTriangle(400, 350, 435, 389, 449, 375, 10, shadowColor)
	// Fingers
	nestedTriangle(433, 384, 10, -35)
	nestedTriangle(440, 378, 10, -45)
	nestedTriangle(445, 371, 10, -58)

	// Leg
	roundedTriangle(321, 442, 366, 455, knee[0], knee[1], 10, shadowColor)
	roundedTriangle(knee[0], knee[1], ankle[0], ankle[1], kneeBack[0], kneeBack[1], 10, shadowColor)
	roundedTriangle(360, 525, 382, 525, ankle[0], ankle[1], 10, shadowColor)
	// Kneecap
	roundedTriangle(knee[0], knee[1], 366, 455, kneeBack[0], kneeBack[1], 6, bodyColor)

	// Toes
	nestedTriangle(362, 521, 10, 5)
	nestedTriangle(372, 521, 10, -5)
	nestedTriangle(382, 521, 10, -15)

	// Wall eyes
	eye(456, 260, 10, -130)
	eye(435, 290, 13, 40)
}

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