sketch.js

var squaresConfig = {
	r1x: {
		stroke: false,
		setting: [0, 0, 430, 430, 150, 150, 150, 100],
		check1Setting: null,
		sound: "",
		move1Setting: "",
		move2Setting: ""
	},
	r1: {
		stroke: true,
		setting: [15, 15, 400, 195, 0, 10, 15, 100],
		check1Setting: [255, 0, 0, 100],
		sound: "rect_r1.wav",
		move1Setting: "",
		move2Setting: ""
	},
	r2: {
		stroke: true,
		setting: [15, 220, 400, 95, 10, 10, 0, 100],
		check1Setting: [0, 0, 0, 100],
		sound: "rect_r2.wav",
		move1Setting: "",
		move2Setting: ""
	},
	r3: {
		stroke: true,
		setting: [15, 325, 400, 10, 0, 0, 0, 100],
		check1Setting: [0, 200, 200, 100],
		sound: "rect_r3.wav",
		move1Setting: "",
		move2Setting: ""
	},
	r4: {
		stroke: true,
		setting: [15, 335, 400, 25, 0, 10, 15, 100],
		check1Setting: [0, 102, 0, 100],
		sound: "rect_r4.wav",
		move1Setting: "",
		move2Setting: ""
	},
	r5: {
		stroke: true,
		setting: [15, 360, 400, 50, 15, 10, 0, 100],
		check1Setting: [10, 0, 200, 100],
		sound: "rect_r5.wav",
		move1Setting: "",
		move2Setting: ""
	},


	r1a: {
		stroke: false,
		setting: [20, 16, 14, 193, 255, 255, 255, 20],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1a.wav",
		move1Setting: [16, 415, .6],
		move2Setting: ""
	},
	r1b: {
		stroke: false,
		setting: [115, 16, 7, 193, 255, 255, 255, 40],
		check1Setting: [255, 255, 0, 50],
		sound: "rect_r1b.wav",
		move1Setting: [16, 415, .3],
		move2Setting: ""
	},
	r1c: {
		stroke: false,
		setting: [220, 16, 4, 193, 255, 255, 255, 35],
		check1Setting: [255, 255, 0, 100],
		sound: "rect_r1c.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.6]
	},
	r1d: {
		stroke: false,
		setting: [340, 16, 10, 193, 255, 255, 255, 30],
		check1Setting: [255, 255, 0, 70],
		sound: "rect_r1d.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.5]
	},
	r1e: {
		stroke: false,
		setting: [75, 16, 12, 193, 255, 255, 255, 45],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1e.wav",
		move1Setting: [16, 415, .7],
		move2Setting: ""
	},
	r1f: {
		stroke: false,
		setting: [185, 16, 5, 193, 255, 255, 255, 40],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1f.wav",
		move1Setting: [16, 415, .3],
		move2Setting: ""
	},
	r1g: {
		stroke: false,
		setting: [255, 16, 10, 193, 255, 255, 255, 30],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1g.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.5]
	},
	r1h: {
		stroke: false,
		setting: [390, 16, 7, 193, 255, 255, 255, 20],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1h.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.4]
	},

	r1i: {
		stroke: false,
		setting: [101, 16, 6, 193, 255, 255, 255, 20],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1i.wav",
		move1Setting: [16, 415, .6],
		move2Setting: ""
	},
	r1j: {
		stroke: false,
		setting: [16, 16, 8, 193, 255, 255, 255, 40],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1j.wav",
		move1Setting: [16, 415, .3],
		move2Setting: ""
	},
	r1k: {
		stroke: false,
		setting: [65, 16, 3, 193, 255, 255, 255, 50],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1k.wav",
		move1Setting: "",
		move2Setting: ""
	},
	r1l: {
		stroke: false,
		setting: [165, 16, 11, 193, 255, 255, 255, 30],
		check1Setting: [255, 255, 0, 80],
		sound: "rect_r1l.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.7]
	},
	r1m: {
		stroke: false,
		setting: [205, 16, 6, 193, 255, 255, 255, 20],
		check1Setting: [255, 255, 0, 80],
		sound: "",
		move1Setting: [16, 415, .7],
		move2Setting: ""
	},
	r1n: {
		stroke: false,
		setting: [350, 16, 8, 193, 255, 255, 255, 40],
		check1Setting: [255, 255, 0, 80],
		sound: "",
		move1Setting: [16, 415, .5],
		move2Setting: ""
	},
	r1o: {
		stroke: false,
		setting: [225, 16, 4, 193, 255, 255, 255, 50],
		check1Setting: [255, 255, 0, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.4]
	},
	r1p: {
		stroke: false,
		setting: [305, 16, 10, 193, 255, 255, 255, 20],
		check1Setting: [255, 255, 0, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.6]
	},

	r2a: {
		stroke: false,
		setting: [101, 221, 36, 93, 255, 255, 255, 8],
		check1Setting: [110, 0, 230, 100],
		sound: "rect_r2a.wav",
		move1Setting: [16, 415, .3],
		move2Setting: ""
	},
	r2b: {
		stroke: false,
		setting: [17, 221, 28, 93, 255, 255, 255, 4],
		check1Setting: [100, 0, 230, 80],
		sound: "rect_r2b.wav",
		move1Setting: [16, 415, .4],
		move2Setting: ""
	},
	r2c: {
		stroke: false,
		setting: [65, 221, 32, 93, 255, 255, 255, 5],
		check1Setting: [100, 0, 220, 90],
		sound: "rect_r2c.wav",
		move1Setting: [16, 415, .7],
		move2Setting: ""
	},
	r2d: {
		stroke: false,
		setting: [165, 221, 39, 93, 255, 255, 255, 4],
		check1Setting: [110, 0, 210, 80],
		sound: "rect_r2d.wav",
		move1Setting: [16, 415, .5],
		move2Setting: ""
	},
	r2e: {
		stroke: false,
		setting: [205, 221, 37, 93, 255, 255, 255, 6],
		check1Setting: [106, 0, 230, 80],
		sound: "",
		move1Setting: [16, 415, .6],
		move2Setting: ""
	},
	r2f: {
		stroke: false,
		setting: [345, 221, 34, 93, 255, 255, 255, 7],
		check1Setting: [110, 0, 190, 80],
		sound: "",
		move1Setting: [16, 415, .2],
		move2Setting: ""
	},

	r2g: {
		stroke: false,
		setting: [225, 221, 29, 93, 255, 255, 255, 8],
		check1Setting: [100, 0, 210, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.8]
	},
	r2h: {
		stroke: false,
		setting: [324, 221, 30, 93, 255, 255, 255, 6],
		check1Setting: [120, 0, 200, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.6]
	},
	r2i: {
		stroke: false,
		setting: [205, 221, 39, 93, 255, 255, 255, 5],
		check1Setting: [100, 0, 190, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.7]
	},
	r2j: {
		stroke: false,
		setting: [350, 221, 28, 93, 255, 255, 255, 7],
		check1Setting: [110, 0, 180, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.4]
	},
	r2k: {
		stroke: false,
		setting: [231, 221, 34, 93, 255, 255, 255, 4],
		check1Setting: [100, 0, 190, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.3]
	},
	r2l: {
		stroke: false,
		setting: [305, 221, 38, 93, 255, 255, 255, 6],
		check1Setting: [110, 0, 190, 80],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.5]
	},

	r4a: {
		stroke: false,
		setting: [17, 336, 50, 23, 110, 110, 110, 10],
		check1Setting: [102, 204, 0, 100],
		sound: "rect_r4a.wav",
		move1Setting: [16, 415, .6],
		move2Setting: ""
	},
	r4b: {
		stroke: false,
		setting: [310, 336, 50, 23, 110, 110, 110, 10],
		check1Setting: [102, 204, 0, 100],
		sound: "rect_r4b.wav",
		move1Setting: [16, 415, .3],
		move2Setting: ""
	},
	r4c: {
		stroke: false,
		setting: [145, 336, 50, 23, 110, 110, 110, 10],
		check1Setting: [102, 204, 0, 100],
		sound: "rect_r4c.wav",
		move1Setting: [16, 415, .2],
		move2Setting: ""
	},
	r4d: {
		stroke: false,
		setting: [270, 336, 50, 23, 110, 110, 110, 10],
		check1Setting: [102, 204, 0, 100],
		sound: "rect_r4d.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.6]
	},
	r4e: {
		stroke: false,
		setting: [70, 336, 50, 23, 110, 110, 110, 10],
		check1Setting: [102, 204, 0, 100],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.5]
	},
	r4f: {
		stroke: false,
		setting: [230, 336, 50, 23, 110, 110, 110, 10],
		check1Setting: [102, 204, 0, 100],
		sound: "",
		move1Setting: "",
		move2Setting: [16, 415, -.3]
	},

	r5a: {
		stroke: false,
		setting: [17, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 100, 0, 80],
		sound: "rect_r5a.wav",
		move1Setting: [16, 415, .4],
		move2Setting: ""
	},
	r5b: {
		stroke: false,
		setting: [110, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 110, 0, 75],
		sound: "rect_r5b.wav",
		move1Setting: [16, 415, .5],
		move2Setting: ""
	},
	r5c: {
		stroke: false,
		setting: [275, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 105, 0, 90],
		sound: "rect_r5c.wav",
		move1Setting: [16, 415, .4],
		move2Setting: ""
	},
	r5d: {
		stroke: false,
		setting: [350, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 115, 0, 100],
		sound: "rect_r5d.wav",
		move1Setting: [16, 415, .6],
		move2Setting: ""
	},

	r5e: {
		stroke: false,
		setting: [35, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 60, 0, 80],
		sound: "rect_r5e.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.9]
	},
	r5f: {
		stroke: false,
		setting: [105, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 90, 0, 80],
		sound: "rect_r5f.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.7]
	},
	r5g: {
		stroke: false,
		setting: [225, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 100, 0, 90],
		sound: "rect_r5g.wav",
		move1Setting: "",
		move2Setting: [16, 415, -.5]
	},
	r5h: {
		stroke: false,
		setting: [350, 361, 14, 48, 110, 100, 100, 20],
		check1Setting: [255, 100, 0, 85],
		sound: "",
		move1Setting: "",
		move2Setting: [6, 415, -.4]
	}
}

var newOrigin = {
	x: 0,
	y: 0
}
// load all the sound files
function preload() {
	Object.keys(squaresConfig).forEach(function(key) {
		if (squaresConfig[key].sound != "")
			squaresConfig[key].soundFile = loadSound(`assets/sound/${squaresConfig[key].sound}`)
	})
}

function setup() {
	// canvas settings
	createCanvas(windowWidth, windowHeight)
	frameRate(30)
	background(0)
	colorMode(RGB, 255, 255, 255, 100);


	Object.keys(squaresConfig).forEach(function(key) {
		// console.log(squaresConfig[key].setting[0])
		squaresConfig[key].square = new Square(
			squaresConfig[key].setting[0],
			squaresConfig[key].setting[1],
			squaresConfig[key].setting[2],
			squaresConfig[key].setting[3],
			squaresConfig[key].setting[4],
			squaresConfig[key].setting[5],
			squaresConfig[key].setting[6],
			squaresConfig[key].setting[7])

		// set sound to squares that have sounds
		if (squaresConfig[key].sound != "")
			squaresConfig[key].square.setSound(squaresConfig[key].soundFile)
	})
	newOrigin.x = windowWidth / 2 - squaresConfig.r1x.square.w / 2
	newOrigin.y = windowHeight / 2 - squaresConfig.r1x.square.h / 2

}

function draw() {
	//drawing settings
	background(0)
	smooth()
	push()
	translate(newOrigin.x, newOrigin.y)
	noStroke()
	squaresConfig.r1x.square.update()
	squaresConfig.r1x.square.mouseCheck3(newOrigin, 0, 0, 0, 100)

	//update

	Object.keys(squaresConfig).forEach(function(key) {


		//update
		if (squaresConfig[key].stroke == false) {
			noStroke()
			squaresConfig[key].square.update()
		} else {
			stroke(255)
			squaresConfig[key].square.update()
		}

		//mouse check1
		if (squaresConfig[key].check1Setting != null) {
			squaresConfig[key].square.mouseCheck1(newOrigin,
				squaresConfig[key].check1Setting[0],
				squaresConfig[key].check1Setting[1],
				squaresConfig[key].check1Setting[2],
				squaresConfig[key].check1Setting[3]
			)
		}

		//mouse check 2
		if (squaresConfig[key].sound != "") {
			squaresConfig[key].square.mouseCheck2(newOrigin)
		}

		//move1
		if (squaresConfig[key].move1Setting != "") {
			squaresConfig[key].square.move1(
				squaresConfig[key].move1Setting[0],
				squaresConfig[key].move1Setting[1],
				squaresConfig[key].move1Setting[2]
			)
		}

		//move2
		if (squaresConfig[key].move2Setting != "") {
			squaresConfig[key].square.move2(
				squaresConfig[key].move2Setting[0],
				squaresConfig[key].move2Setting[1],
				squaresConfig[key].move2Setting[2]
			)
		}


	})
	pop()
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight)
}