89 lines
1.8 KiB
Markdown
89 lines
1.8 KiB
Markdown
### Van canvas switchen
|
|
```js
|
|
//Geschreven door Sam
|
|
//Is mischien een beetje een scuffed manier maar het werkt en het geeft een beetje de richting waar je op kan gaan
|
|
let canvasSwitch = true;
|
|
|
|
function setup(){
|
|
createCanvas(400, 400);
|
|
}
|
|
|
|
function draw(){
|
|
//draw a background every frame
|
|
background(220)
|
|
//switch canvas when spacebar is pressed
|
|
if (canvasSwitch == false){
|
|
canvas1();
|
|
}
|
|
|
|
if (canvasSwitch == true){
|
|
canvas2();
|
|
}
|
|
|
|
}
|
|
|
|
function keyPressed(){
|
|
if (keyCode === 32){ // 32 is the keyCode for the space bar
|
|
//if canvasSwitch is true, set it to false, vice versa
|
|
canvasSwitch = !canvasSwitch;
|
|
}
|
|
}
|
|
|
|
//draw a yellow circle on canvas 1
|
|
function canvas1(){
|
|
fill(255, 255, 0)
|
|
circle (200, 200, 50);
|
|
}
|
|
|
|
//draw a red circle on canvas 2
|
|
function canvas2(){
|
|
fill(255, 0, 0)
|
|
circle (300, 200, 50);
|
|
}
|
|
```
|
|
|
|
Wat ik later heb gevonden is een betere manier waarbij je een variabel een int maakt en dan een switch statement gebruikt. Dit is een stuk beter dan wat ik heb gedaan. Hieronder staat de code:
|
|
```js
|
|
|
|
let canvasSwitch = 0;
|
|
|
|
function setup(){
|
|
createCanvas(400, 400);
|
|
}
|
|
|
|
function draw(){
|
|
//draw a background every frame
|
|
background(220)
|
|
//switch canvas when spacebar is pressed
|
|
if (canvasSwitch == 0){
|
|
canvas1();
|
|
}
|
|
|
|
if (canvasSwitch == 1){
|
|
canvas2();
|
|
}
|
|
|
|
}
|
|
|
|
function keyPressed(){
|
|
if (keyCode == 32){ // 32 is the keyCode for the space bar
|
|
canvasSwitch = 1
|
|
}
|
|
if (keyCode == 16){ // 16 is the keyCode for the Shift key
|
|
canvasSwitch = 0
|
|
}
|
|
}
|
|
|
|
//draw a yellow circle on canvas 1
|
|
function canvas1(){
|
|
fill(255, 255, 0)
|
|
circle (200, 200, 50);
|
|
}
|
|
|
|
//draw a red circle on canvas 2
|
|
function canvas2(){
|
|
fill(255, 0, 0)
|
|
circle (300, 200, 50);
|
|
}
|
|
```
|