The animation is here
Spiderman (waking everybody up)
This week I take a break from Asteroids to build Spiderman waking people up.
This project got progressively difficult for me. First I used the rect() function to build sky scrapers, then I start drawing out windows manually (square by square) so I can get the positions right.
var building = {
w : 100,
h : 600
}
function setup() {
createCanvas(600,600);
background(0);
}
function draw() {
//drawing building
strokeWeight(1);
fill(192)
rect(100, 300, building.w, building.h);
rect(200, 400, building.w, building.h);
rect(300, 100, building.w, building.h);
rect(400, 300, building.w, building.h);
windows();
}
function windows() {
var x = 110;
var y =
//drawing window
fill(255,255,1);
for (x = 110; x <= 190; x+=10) {
rect(x, 305, 5, 5);
}
rect(110, 305, 5, 5);
rect(120, 305, 5, 5);
rect(130, 305, 5, 5);
rect(140, 305, 5, 5);
rect(150, 305, 5, 5);
rect(160, 305, 5, 5);
rect(170, 305, 5, 5);
rect(180, 305, 5, 5);
rect(190, 305, 5, 5);
rect(110, 315, 5, 5);
rect(120, 315, 5, 5);
rect(130, 315, 5, 5);
}Next, I wrote a function to populate windows in one Sky scraper.
function windows() {
//drawing window
fill(255,255,1);
for (x = 110; x <= 190; x+=10) {
for (y = 305; y <= 590; y+=10){
rect(x, y, 5, 5);
}
}I wrote for-loops for every sky scrapers windows. Tried writing a grand unified for-loop and if-statement to populate windows for all sky scrapers in one block of code, but it didn’t work.
//drawing window
fill(255,255,1);
for (x = 110; x <= 190; x+=10) {
for (y = 305; y <= 590; y+=10){
rect(x, y, 5, 5);
}
}
for (x = 210; x <= 290; x+=10){
for (y = 405; y <= 590; y+=10){
rect(x,y,5,5);
}
}
for (x = 310; x <= 390; x+=10){
for (y = 105; y <= 590; y+=10){
rect(x,y,5,5);
}
}
for (x = 410; x <= 490; x+=10){
for (y = 305; y <= 590; y+=10){
rect(x,y,5,5);
}
}Next, I “draw” spiderman - as defined by a function “spiderellipse()” and make a function called windows() and building() which get called in draw().
function setup() {
createCanvas(600, 600);
}
function draw() {
background(0);
building(103, 300, 100, 600);
building(203, 400, 100, 600);
building(303, 100, 100, 600);
building(403, 300, 100, 600);
windows();
spiderellipse();
}
function windows() {
fill(0);
for (x = 110; x <= 190; x += 10) {
for (y = 305; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
for (x = 210; x <= 290; x += 10) {
for (y = 405; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
for (x = 310; x <= 390; x += 10) {
for (y = 105; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
for (x = 410; x <= 490; x += 10) {
for (y = 305; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
}
function spiderellipse() {
fill(255, 0, 0);
ellipse(mouseX, mouseY, 30, 30);
}
function building(x, y, w, h) {
strokeWeight(1);
fill(192)
rect(x, y, w, h);
}Now I want window lights to switch (window with fill yellow) on as Spiderman passes by, waking everyone up. I use if statements within for-loops, that doesn’t work. Next I try getting the spiderellipse() function to generate values to pass to the windows() function that doesn’t work either, I am doing something wrong. And then, I work on writing a separate function for lights-on which gets called. I do that incorrectly too. So I book an appointment and seek help from resident Laura Chen. She’s on the money. She helps me with the if statement (below). The revelation is with using area of the window in the if statement.
function windows() {
noStroke();
fill(0);
for (x = 110; x <= 190; x += 10) {
for (y = 305; y <= 590; y += 10) {
if (mouseX > x && mouseX < (x + 5) && mouseY > y && mouseY < (y + 5)) {
fill("yellow");
} else {
fill(0);
}
rect(x, y, 5, 5);
}Problem: the windows lights switch off when the mouse moves on. Which means people switch the light on when spiderman is infront of their window and as soon as he’s passed by they instantly switch it off. Not realistic.
Solution, which Laura introduced, was to create objects in windows in arrays so they stay on. I have a broad understanding of this code, but will be spending more time to understand the theory behind them. Here’s the final working version:
// array to resrote Window(object I created)
var allWindowsArray = [];
function setup() {
createCanvas(600, 600);
// create windows for 1st building
for (var x = 110; x <= 190; x += 10) {
for (var y = 305; y <= 590; y += 10) {
var newWindow = new Window(x, y); // create new Window object
// with different positions
allWindowsArray.push(newWindow); // restore the new Window object into array
}
}
}
function draw() {
background(0);
building(103, 300, 100, 600);
building(203, 400, 100, 600);
building(303, 100, 100, 600);
building(403, 300, 100, 600);
// windows();
// loop through all the Window objects inside the array
for (var i = 0; i < allWindowsArray.length; i++) {
// for each Window
// if mouse is inside it
if (mouseX > allWindowsArray[i].pX && mouseX < (allWindowsArray[i].pX + 5) && mouseY > allWindowsArray[i].pY && mouseY < (allWindowsArray[i].pY + 5)) {
// set the attribute sManPassedBy of Window to be true
allWindowsArray[i].sManPassedBy = true;
}
// draw the Window
allWindowsArray[i].display();
}
spiderellipse();
}
function windows() {
noStroke();
fill(0);
for (x = 110; x <= 190; x += 10) {
for (y = 305; y <= 590; y += 10) {
if (mouseX > x && mouseX < (x + 5) && mouseY > y && mouseY < (y + 5)) {
fill("yellow");
// console.log("!");
} else {
fill(0);
}
rect(x, y, 5, 5);
}
}
for (x = 210; x <= 290; x += 10) {
for (y = 405; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
for (x = 310; x <= 390; x += 10) {
for (y = 105; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
for (x = 410; x <= 490; x += 10) {
for (y = 305; y <= 590; y += 10) {
rect(x, y, 5, 5);
}
}
}
function spiderellipse() {
noStroke();
fill(255, 0, 0);
ellipse(mouseX, mouseY, 4, 4);
}
function building(x, y, w, h) {
strokeWeight(1);
fill(192)
rect(x, y, w, h);
}
// OBJECT
// Window
// need positionX & positionY to be created
function Window(posX, posY) {
// attributes, eg. name, age, love and hate
this.sManPassedBy = false;
this.pX = posX;
this.pY = posY;
// functions, eg. behaviors
this.display = function() {
noStroke();
if (this.sManPassedBy)
fill("yellow"); // once spider man has passed by, draw yellow
else
fill("black"); // default: draw black
rect(posX, posY, 5, 5);
}
}I wanted to do more. Build a better slinging spidey, but I couldn’t get to that this week
And it won’t yell.
// function preload() {
// mySound = loadSound('assets/js/Yell_Original.mp3');
// }is sadly not working.