Schedule:
For our bouncing ball, we needed to detect when we were on the page or not. This same technique can be used to detect when a user has clicked on a button.
First we see if our mouse has rolled over the rectangle
function setup() {
createCanvas(400, 400);
rectMode(CORNER);
}
function draw() {
background(220);
rect(150,150,100,100);
if (mouseX >= 150 && mouseX <= 150+100 && mouseY >= 150 && mouseY <= 150+100) {
//if we've rolled over do something
fill(0);
} else {
fill(255);
}
}
How do we take this code and alter it so that the button changes color only when we press the mouse?
Answer: place the code inside a test for whether the mouseIsPressed
more advanced rollover button example code
Needed:
Spoilers:
//move player
if (keyIsPressed == true) {
if (keyCode == UP_ARROW) {
playerY = playerY - 5;
}
if (keyCode == DOWN_ARROW) {
playerY = playerY + 5;
}
}
Okay, we can draw ellipses, and rects, lines, points, triangles, or use beginShape() to make your own shape.
We can draw part of a circles with arc.
This is great. But sometimes you want to work with images directly. p5.js can load and display images: png, jpg, gif.
To do so, we need to do four things:
preload() function section to our code sketch and preload the image.image(imageVariableName,x,y);, usually in our draw function.Example
var fluffyCatImg; //the variable to hold our imageFile
function preload(){
fluffyCatImg = loadImage('cat.jpg');
}
function setup(){
createCanvas(200,200);
}
function draw(){
//this draws the fluffyCatImg at 0,0 in our sketch window
image(fluffyCatImg,0,0);
}
You can also optionally specify the image’s width and height.
image(fluffyCatImg,0,0,100,200);
//the image is drawin at 0,0 and is 100 wide, 200 high
File size impacts how fast your software loads. And since our code sketches live online in a web browser, they impact how fast your website or web app loads. Big files slow this down. You can compress images, but it’s helpful to understand the big 3 image file types, their advantages and disadvantages.
Kid Pix software, online. Remember, this is 30 years old! Click to launch, then you click to turn on sound and fullscreen. To exit out of fullscreen, press escape.
Read:
Watch:
Software like Adobe Photoshop appears at first to have infinite possibilities. In actuality it is constrained and specific. You can only do what the software allows you to do.
As long as artists have been making art, they have been inventing, designing, and altering their tools.
Becoming a programmer is often equated in our culture to developing magical powers or unlocking new abilities. Let’s embody this idea with the challenge to create our own art-making tools. For this assignment, consider what we have learned this semester, as well as the history of artist’s software tools.
In the p5js web editor, create your own custom art-making tool. Consider color, brushes, images, buttons, text.
Start on paper in your notebook. What is the purpose of the tool? What is the interface? How will someone know how to use your tool? Is your tool intended for you or for someone else? Start doing very simple sketching of the tool and its functionality.
Remember that someone can right click on the canvas to Save As > image. But you can also build in a button, mousePress or keypress for saving an image of the canvas with the save() or saveCanvas() command.