Review Unit 2
Progress
I was very quick into this unit, and had lots of fun experimenting, I went in to the paint project quite fast, but decided tot skip the light switch game as I noticed I had some trouble with this. This became a greater problem later on when I started feeling the pressure of time. Given this, I was not yet on the next unit and had to work longer on this. eventually I finished everything within the needed time and I am very happy that I succeeded. I hope you like the things I created, and even though I know this is not my best work yet, I did like this unit and am looking forward to the next one.
Light Switch Game
I had a lot to struggle with the light switch game, so it isn’t perfect, but I am satisfied, this is the code:
let A, B, C, D, E, F, G, H;
function setup() {
createCanvas(400, 400);
A = false;
B = false;
C = false;
D = false;
E = false;
F = false;
G = false;
H = false;
}
function draw() {
background('#0A2239');
textSize(20);
fill('#F5B841');
text('if the lamps turn green, you have won!', 10, 20);
text('to start again, hit the browser refresh.', 10, 50);
if((B == true)&&(C == true)&&(G == true)&&(H == true)&&(D == false)&&(E == false)&&(A == false)&&(F == false)){
fill('#53FF45');
text('Well Done!', 290, 70);
}
fill('#F4FF52');
if(B == true){
fill('#F4FF52');
} else {
fill('#132E32');
}
rect(110, 80, 30, 30);
rect(260, 80, 30, 30);
if(C == true){
fill('#F4FF52');
} else {
fill('#132E32');
}
rect(160, 80, 30, 30);
if(H == true){
fill('#F4FF52');
} else {
fill('#132E32');
}
rect(310, 80, 30, 30);
rect(210, 80, 30, 30);
if(G == true){
fill('#F4FF52');
} else {
fill('#132E32');
}
rect(60, 80, 30, 30);
if((B == true)&&(C == true)&&(G == true)&&(H == true)&&(D == false)&&(E == false)&&(A == false)&&(F == false)){
fill('#53FF45');
text('Well Done!', 290, 70);
rect(110, 80, 30, 30);
rect(260, 80, 30, 30);
rect(160, 80, 30, 30);
rect(310, 80, 30, 30);
rect(210, 80, 30, 30);
rect(60, 80, 30, 30);
}
if(A == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(60, 200, 30, 30);
if(B == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(145, 200, 30, 30);
if(C == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(225, 200, 30, 30);
if(D == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(310, 200, 30, 30);
if(E == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(60, 280, 30, 30);
if(F == true){
fill('#1D84B5');
} else if (F == false) {
fill(0);
}
rect(145, 280, 30, 30);
if(G == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(225, 280, 30, 30);
if(H == true){
fill('#1D84B5');
} else {
fill(0);
}
rect(310, 280, 30, 30);
}
function mouseClicked(){
if((mouseX > 60)&&(mouseX < 90)&&(mouseY > 200)&&(mouseY < 230)){
A = true;
} else if((mouseX > 60)&&(mouseX < 90)&&(mouseY > 200)&&(mouseY < 230)){
A = false;
}
if((mouseX > 145)&&(mouseX < 175)&&(mouseY > 200)&&(mouseY < 230)){
B = true;
} else if((mouseX > 145)&&(mouseX < 175)&&(mouseY > 200)&&(mouseY < 230)){
B = false;
}
if((mouseX > 225)&&(mouseX < 255)&&(mouseY > 200)&&(mouseY < 230)){
C = true;
} else if((mouseX > 225)&&(mouseX < 255)&&(mouseY > 200)&&(mouseY < 230)){
C = false;
}
if((mouseX > 310)&&(mouseX < 340)&&(mouseY > 200)&&(mouseY < 230)){
D = true;
} else if((mouseX > 310)&&(mouseX < 340)&&(mouseY > 200)&&(mouseY < 230)){
D = false;
}
if((mouseX > 60)&&(mouseX < 90)&&(mouseY > 280)&&(mouseY < 310)){
E = true;
} else if((mouseX > 60)&&(mouseX < 90)&&(mouseY > 280)&&(mouseY < 310)){
E = false;
}
if((mouseX > 145)&&(mouseX < 175)&&(mouseY > 280)&&(mouseY < 310)){
F = true;
} else if((mouseX > 145)&&(mouseX < 175)&&(mouseY > 280)&&(mouseY < 310)){
F = false;
}
if((mouseX > 225)&&(mouseX < 255)&&(mouseY > 280)&&(mouseY < 310)){
G = true;
} else if((mouseX > 225)&&(mouseX < 255)&&(mouseY > 280)&&(mouseY < 310)){
G = false;
}
if((mouseX > 310)&&(mouseX < 340)&&(mouseY > 280)&&(mouseY < 310)){
H = true;
} else if((mouseX > 310)&&(mouseX < 340)&&(mouseY > 280)&&(mouseY < 310)){
H = false;
}
if((mouseX > 120)&&(mouseX < 160)&&(mouseY > 355)&&(mouseY < 275)){}
}
This is the link to the page: https://editor.p5js.org/BrainyZebra5/full/97Mid6h8q and beneath you see the solution:
Paint Project
I am actually very proud of my paint project, I think it looks appealing and is user-friendly. I have many colors to choose from, including a random button, and also an eraser. There is also a possibility to clear the screeb by resetting it and there are different brush sizes.
var r, g, b, d, di1, di2, di3, di4, di5, di6, di7, x;
function setup() {
createCanvas(700, 400);
background('#386FA4');
noStroke();
fill('#ffffff');
rect(20, 20, 360, 360);
fill('#AFEEFE');
rect(400, 20, 280, 360);
fill(0);
textStyle(BOLD);
textSize(20);
text('pick a color', 410, 40);
fill('#D72638');
ellipse(420, 70, 30, 30);
fill('#FF8B47');
ellipse(460, 70, 30, 30);
fill('#FFEB33');
ellipse(500, 70, 30, 30);
fill('#0CCE6B');
ellipse(540, 70, 30, 30);
fill('#1BE7FF');
ellipse(580, 70, 30, 30);
fill('#996F9B');
ellipse(620, 70, 30, 30);
fill(0);
ellipse(660, 70, 30, 30);
text('random/current color', 410, 110);
text('eraser', 410, 170);
fill('#ffffff');
rect(410, 180, 260, 30);
fill(0);
text('small/medium/large', 410, 230);
rect(410, 240, 80, 30);
rect(500, 240, 80, 30);
rect(590, 240, 80, 30);
text('BrainyZebra5', 480, 365);
var button = createButton("reset");
button.position(408, 343);
button.style('font-size', '20px');
button.mousePressed(setup);
}
function draw() {
di1 = dist(mouseX, mouseY, 420, 70);
if (mouseIsPressed) {
if (di1 < 30/2) {
fill('#D72638');
}
}
di2 = dist(mouseX, mouseY, 460, 70);
if (mouseIsPressed) {
if (di2 < 30/2) {
fill('#FF8B47');
}
}
di3 = dist(mouseX, mouseY, 500, 70);
if (mouseIsPressed) {
if (di3 < 30/2) {
fill('#FFEB33');
}
}
di4 = dist(mouseX, mouseY, 540, 70);
if (mouseIsPressed) {
if (di4 < 30/2) {
fill('#0CCE6B');
}
}
di5 = dist(mouseX, mouseY, 580, 70);
if (mouseIsPressed) {
if (di5 < 30/2) {
fill('#1BE7FF');
}
}
di6 = dist(mouseX, mouseY, 620, 70);
if (mouseIsPressed) {
if (di6 < 30/2) {
fill('#996F9B');
}
}
di7 = dist(mouseX, mouseY, 660, 70);
if (mouseIsPressed) {
if (di7 < 30/2) {
fill(0);
}
}
if((mouseIsPressed)&&(mouseX > 410)&&(mouseX < 670)&&(mouseY > 120)&&(mouseY < 150)){
fill(r, g, b);
}
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
if((mouseIsPressed)&&(mouseX > 410)&&(mouseX < 530)&&(mouseY > 180)&&(mouseY < 210)){
fill('#ffffff');
}
if((mouseIsPressed)&&(mouseX > 410)&&(mouseX < 490)&&(mouseY > 240)&&(mouseY < 270)){
x = 5;
}
if((mouseIsPressed)&&(mouseX > 500)&&(mouseX < 580)&&(mouseY > 240)&&(mouseY < 270)){
x = 10;
}
if((mouseIsPressed)&&(mouseX > 590)&&(mouseX < 670)&&(mouseY > 240)&&(mouseY < 270)){
x = 20;
}
if((mouseIsPressed)&&(mouseX > 25)&&(mouseX < 375)&&(mouseY > 25)&&(mouseY < 375)){
ellipse(mouseX, mouseY, x, x);
}
rect(410, 120, 260, 30);
}Writing prompt
To start using my paint programme you have to select a color and the brush size you would like to start with. To after that start drawing you can simply press you mouse when it is within the white canvas. If you want to switch color simply click the desired color under the line: “colors”, and if you want a random color you’ll only have to click on the rectangle beneath the line:”random”, this bar also shows what your current selected color is. If you made a mistake you can easily use the eraser by clicking the white rectangle and if you want to start over you should click on the “reset button”, which is located in the loeft corner of the menu. In Beween drawing you can always change brush size by selecting between the three boxes which represent in order: small brush size, medium brush size, large brush size. I hope you enjoy drawing this way and have fun with all of your creations!
Rubrics
| Progress | 7 |
| Light switch game | 7 |
| Paint Project | 8.5 |
| Writing prompt | 9 |