Presentations and Discussions on artist's internet presence.
Homework
Prepare a presentation on a favorite artist's internet presence.
See assignments tab for details.
Examples
let x = 200;
let y = 200;
let w = 200;
let r = w / 2;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
let d = dist(mouseX, mouseY, x, y);
if (d < r) {
fill("blue");
} else {
fill("red");
}
circle(x, y, w);
strokeWeight(2);
point(x, y);
line(mouseX, mouseY, x, y);
}
let px = 0;
let py = 0; // declare both in one line
let counter = 0; // keep track of number of frames
let counterLimit = 400; // number of frames (~30 per second) before clearing out canvas
// setup runs once when you hit play
function setup() {
createCanvas(400, 400);
background(150, 100, 100);
}
// runs continuously thereafter
function draw() {
background(150, 100, 100, 10); // r,g,b,a (alpha, which means opacity)
// 1. draw with current mouse state
line(mouseX, mouseY, px, py);
// 2. then we store previous mouse state for the next frame
px = mouseX; // previous mouse X state
py = mouseY; // previous mouse Y state
// counter is a little loop between 0 and 100
counter++;
if (counter > counterLimit) {
// clear canvas
background(150, 100, 100);
// reset the counter
counter = 0;
}
}
let px = 0;
let py = 0; // declare both in one line
let counter = 0; // keep track of number of frames
let counterLimit = 100; // number of frames (~30 per second) before clearing out canvas
// setup runs once when you hit play
function setup() {
createCanvas(400, 400);
background(150, 100, 100);
}
// runs continuously thereafter
function draw() {
background(150, 100, 100, 10); // r,g,b,a (alpha, which means opacity)
// 1. draw with current mouse state
line(mouseX, mouseY, px, py);
let d = dist(mouseX, mouseY, px, py); // distance between current and previous mouse state
// 2. then we store previous mouse state for the next frame
px = mouseX; // previous mouse X state
py = mouseY; // previous mouse Y state
// distance to sw mapping
let sw = map(d, 0, 20, 20, 0); // map() with extrapolate beyond the output range
sw = constrain(sw, 1, 100);
strokeWeight(sw);
// sensistive to movement
if (d == 0) {
// counter is a little loop between 0 and 100
counter++;
} else {
counter = 0;
}
if (counter > counterLimit) {
// clear canvas
background(150, 100, 100);
// reset the counter
counter = 0;
}
}
let mummyImg; // placeholder for our image
// gamestate variable
let gameOver = false; // false by default, will be triggered to true by losing conditions
// mummy position
let x = 0;
let y = 0;
let easing = 0.05; // speed with which p5 minimizes the distance between the target (mouseX) and the current X position
let playerD = 40; // player diameter
// stagger code that needs to run before setup
function preload() {
mummyImg = loadImage("/assets/p5img/mummy.png");
}
// setup runs once when you hit play
function setup() {
createCanvas(400, 400);
background(150, 100, 100);
x = random(width);
y = random(height);
}
// runs continuously thereafter
function draw() {
if (gameOver == true) {
background("red");
text("game over", width / 2, height / 2);
noLoop();
} else {
background(150, 100, 100);
}
// draw my character
circle(mouseX, mouseY, playerD);
let xDiff = mouseX - x;
x += xDiff * easing;
let yDiff = mouseY - y;
y += yDiff * easing;
// draw mummy character
image(mummyImg, x, y, 20, 20); // image variable, top left corner x and y and then width and height
let d = dist(mouseX, mouseY, x, y);
// if the distance between the player and the mummy is less than the radius of the player, then trigger game over state
if (d < playerD / 2) {
gameOver = true;
}
}
function mousePressed() {
gameOver = false;
loop();
background(150, 100, 100);
x = random(width);
y = random(height);
}
let x = 200;
let y = 200;
let w = 100;
let h = 50;
let score = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
let hover = mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h;
if (hover && mouseIsPressed) {
fill("blue");
x = random(width);
y = random(height);
score++;
console.log("score " + score);
} else if (hover) {
fill("green");
} else {
fill("red");
}
rect(x, y, w, h);
}
let w = 50; // the diameter of the cricle. half the diameter = radius
function setup() {
createCanvas(400, 400);
noStroke();
}
function draw() {
background(220);
circle(200, 200, w);
// use the system variable mouseIsPressed in order to return a true/false data (BOOLEAN) variable true or false. off or on, 0 + 1 ,
let d = dist(200, 200, mouseX, mouseY);
let hover = d < w / 2;
if (hover == true && mouseIsPressed) {
fill("magenta"); // button press behavior
} else if (hover && mouseIsPressed == false) {
fill("red");
} else {
fill("blue"); // default behavior
}
// print(mouseX, mouseY);
}
// 1. default behavior -- for IF the mouse is NOT over the circle AND it is NOT clicked.
// 2. hover behavior for IF the the mouse is over the circle AND it IS NOT clicked
// 3. button press behavior for IF Fthe mouse is over the cricle AND it IS clicked
let x = 100;
let y = 100;
let w = 100; // width of circle is its diameter
let h = 200;
let r = w / 2; // radius is width / 2
function setup() {
createCanvas(400, 400);
noStroke();
}
function draw() {
background(220);
let hover = mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h; // TRUE if the distance between mouse and circle center is less that the circle's radius
if (hover && mouseIsPressed) {
fill("green"); // special behavior, hover AND pressed behavior!
} else if (hover && mouseIsPressed == false) {
fill("purple"); // hover NOT pressed
} else {
fill("blue"); // default behavior! if not pressed AND not hover
}
rect(x, y, w, h);
}
const w = 150;
const h = 200;
const x = 100;
const y = 100;
function setup() {
createCanvas(400, 400);
noStroke();
fill(0);
}
function draw() {
// check for hover over rectangle
let hover = mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h;
if (hover === true && mouseIsPressed === true) {
background(34, 12, 100);
fill(100, 32, 64);
} else if (hover === true) {
background(34, 12, 100);
fill(255);
} else {
background(100, 32, 64);
fill(34, 12, 100);
}
rect(x, y, w, h);
}
const r = 100;
const x = 300;
const y = 100;
function setup() {
createCanvas(400, 400);
noStroke();
fill(0);
}
function draw() {
let distance = dist(x, y, mouseX, mouseY);
let hover = distance < r;
if (hover === true && mouseIsPressed === true) {
background(34, 12, 100);
fill(100, 32, 64);
} else if (hover === true) {
background(34, 12, 100);
fill(255);
} else {
background(100, 32, 64);
fill(34, 12, 100);
}
circle(x, y, r * 2);
}
let x = 0;
let y = 0;
let easing = 0.2;
let px = 0;
let py = 0;
function setup() {
createCanvas(400, 400);
background(0);
stroke(255);
strokeWeight(10);
fill(255, 150); // 2 values: 1st greyscale, 2nd opacity/transparency
}
function draw() {
if (mouseX > 266) {
stroke(0, 200, 100);
} else if (mouseX > 133) {
stroke(150, 23, 10);
} else {
stroke(255);
}
if (mouseIsPressed === true) {
background(0);
}
let destX = mouseX;
let destY = mouseY;
x += (destX - x) * easing;
y += (destY - y) * easing;
// slower is heavier weight and faster is lighter weight
let distance = dist(x, y, px, py); // in terms of pixels 0-400
let weight = map(distance, 0, 20, 1, 30, true); //strokeWeight -- pixels
strokeWeight(weight);
line(x, y, px, py); //x1,y1,x2,y2
py = y;
px = x;
}
function setup() {
createCanvas(400, 400);
background(0);
stroke(255);
strokeWeight(10);
}
function draw() {
if (mouseIsPressed === true) {
// slower is heavier weight and faster is lighter weight
let distance = dist(mouseX, mouseY, pmouseX, pmouseY); // in terms of pixels 0-400
//nsole.log(distance);
let weight = map(distance, 0, 30, 30, 1, true); //strokeWeight -- pixels
strokeWeight(weight);
fill(255, 150); // 2 values: 1st greyscale, 2nd opacity/transparency
// circle(mouseX,mouseY,30);
line(mouseX, mouseY, pmouseX, pmouseY); //x1,y1,x2,y2
}
}