0

I need to write a code on Khan Academy that lets me change images I have coded by pressing a key. To do this, I need to use keyTyped function, but I don't know how to make it work.

Also, I cannot use loops; I just need to write a function that lets me pick between different images by pressing a key. Below is a code of one image that I have. 

//image: Kishin
var x = 180;
var y = 170;
var widthEllipse = 300;
var heightEllipse = 300;
var widthX = 80;
var heightY = 180;

background(94, 30, 30);
// bigger ellipse
fill(0, 0, 0);
ellipse(x + 20, y + 20, widthEllipse, heightEllipse);

//smaller ellipses
fill(148, 0, 0);
ellipse(130, 150, widthX - 50, heightY - 40);
ellipse(200, 230, widthX - 50, heightY - 40);
ellipse(270, 150, widthX - 50, heightY - 40);

// smallest ellipses
fill(0, 0, 0);
ellipse(130, 150, 30, 35);
ellipse(200, 230, 30, 35);
ellipse(270, 150, 30, 35);
Anthony Boyac
  • 17
  • 1
  • 6

2 Answers2

0

Khan-Academy uses a JavaScript library called p5.js

I suggest you check out the documentation for the keyTyped() if you are unsure of its correct usage.

p5.js reference for keyTyped()

zuzurino
  • 13
  • 1
  • 4
  • The reference site contains many more examples for other functions too, great tool for when you're programming in Khan-Academy! – zuzurino Nov 22 '16 at 05:49
0

The keyTyped function is called whenever a key is pressed. So from there, you can check what key was typed using the variable: "key". Each key on your keyboard is associated with a number according to the ASCII table and "key" holds the number of the key pressed. Example code would look like:

keyTyped = function() { if(key === 40) { //down key background(255, 255, 255); //clear the screen //draw image } else if.... //add more keys for the other images }

Binit Shah
  • 61
  • 5