Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Every sketch has two special variables that keep the current position of the mouse. The X position of our mouse is stored in the mouseX variable, and mouseY constains the Y.
Let's draw two circles at a fixed position and other two, smaller circles, that always move in the direction of the mouse. The effect should be that of two googly eyes following the mouse.
Knowing when our mouse coordinates are inside of the boundaries of a UI element allows us to implement a primitive hoover effect functionality in our button.
Observe how the visual effect in this interaction is entirely determined by a change of color. In this second example I decided not to use black and white to draw the edges of the button and instead used different shades in the pink tint, from a bright pink to a dark, almost brownish tone. What effect does this have in how you perceive the button? How would these two buttons feel to the touch if they were objects and you could run your finger through them?
Use your mouse wheel on the canvas in this sketch to observe how it affects the movement of our square.
The mousewheel serves different purposes when we are in different interfaces, and this can play with people's expectations. For example when we are browsing the web we expect the mousewheel to scroll up and down as we move it. But when we are in a zooming interface, like the one in miro.com, we expect the mousewheel to zoom in and out. Sometimes the mousewheel is used in combination with a modifier key such as
All p5js sketches keep a special key variable with the value of the last keyboard letter pressed. Click on the canvas and press a letter in your keyboard to see the result of this sketch.
In the following sketch we move the triangle around with the standard gaming keys w, a, s and d. In this example we use the keyIsDown() function call from p5js to identify if a key has been pressed. To determine which key we need to give that function a keycode, which is a number that identifies your key in a keyboard. To find out which keycode a key in your keyboard has you can use this online tool.
Most touchscreens support multiple touch points so instead of a using a single variable like p5js uses for the mouse position, touch points are saved in a javascript list called touches. A list is zero indexed meaning the the first element in a list is at position 0, so if we want to get the x position of the first finger detected in the touch screen, we need to access it like this touches[0].x, and if we want the y component of that position, we get it like this touches[0].y. To iterate through all the fingers currently touching the screen, we can use a for loop like in this example.