Transition to Electronics

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 r = 100;
// thi runs onces
function setup() {
  createCanvas(400, 400);
  background(0);
  console.log("setup");
  
}
// this runs continuously 
function draw() {
  background(0,10);
  stroke(r,0,200);
  
 
  let d = dist(mouseX,mouseY,pmouseX,pmouseY);
  
  let w = map(d,0,70,0,30);
  
  strokeWeight(w);
 console.log("draw");
 
}

function mousePressed(){
 r = random(0,255);
  console.log("pressed");
}

function mouseDragged(){
  
   line(mouseX,mouseY,pmouseX,pmouseY);
  console.log("dragged");
}

let x = 200;
let y = 200;

let speed = 2;

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
background(0,10);
let l = keyIsDown(LEFT_ARROW);

let r = keyIsDown(RIGHT_ARROW);
  
  if (l === true){
    x-= speed;
  }
  
  if(r === true){
    x+= speed;
  }
  
  
  let up = keyIsDown(UP_ARROW);

let down = keyIsDown(DOWN_ARROW);
  
  if (up=== true){
    y-=speed;
  }
  
  if(down === true){
    y+=speed;
  }
  
  
  if(y>200){
   background("red");
    text("game over! press any key to restart",x,y);
    noLoop();
  }

  
  circle(x,y,20);
 

}

function keyPressed(){
  loop();
}

let x = 250;
let y = 125;
let w = 125;
let h = 70;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  

  let hover = false;
    
  if(mouseY>y && mouseY<y+h && mouseX>x && mouseX < x + w){
    hover = true;
  }
  else {
    hover = false;
  }
  
  
  
  // button functionality
  if(hover && mouseIsPressed){
    stroke("blue");
    fill("purple");
  }
  else if (hover){
    stroke("black")
    fill("green"); 
  }
  else {
    stroke("black");
    noFill();
  }
  
  rect(x,y,w,h);
  
    stroke("black");
  fill("white");
  circle(mouseX,mouseY,5);
  
  
}

let x = 250;
let y = 125;
let w = 125;
let h = 70;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  

  let hover = false;
    
  if(mouseY>y && mouseY<y+h && mouseX>x && mouseX < x + w){
    hover = true;
  }
  else {
    hover = false;
  }
  
  
  
  // button functionality
  if(hover && mouseIsPressed){
    stroke("blue");
    fill("purple");
  }
  else if (hover){
    stroke("black")
    fill("green"); 
  }
  else {
    stroke("black");
    noFill();
  }
  
  rect(x,y,w,h);
  
    stroke("black");
  fill("white");
  circle(mouseX,mouseY,5);
  
  
}

let x = 250;
let y = 125;
let w = 125;
let r = w/2;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  

  let hover = false;

   let d = dist(mouseX,mouseY,x,y);
   console.log(d, r);
  
  if(d < r){
    hover = true;
  }
  else {
    hover = false;
    
  }
  
  // button functionality
  if(hover && mouseIsPressed){
    stroke("blue");
    fill("purple");
  }
  else if (hover){
    stroke("black")
    fill("green"); 
  }
  else {
    stroke("black");
    noFill();
  }
  
  circle(x,y,w);
  
    stroke("black");
  fill("white");
  circle(mouseX,mouseY,5);
  
  
}

let x = 200;
let y = 200;

let targetX = 200;
let targetY = 200;

let speed = 2;

let lerpV = 0.01;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  for(let h = 0; h<height;h+=10){
    line(0,h,x,y);
    line(width,h,x,y);
  }
  circle(targetX,targetY,20);
  
  x = lerp(x,targetX,lerpV);
  y = lerp(y,targetY,lerpV);
  if(keyIsDown(DOWN_ARROW)){
    targetY+=speed;
  }
   if(keyIsDown(UP_ARROW)){
    targetY-=speed;
  }
   if(keyIsDown(LEFT_ARROW)){
    targetX-=speed;
  }
   if(keyIsDown(RIGHT_ARROW)){
    targetX+=speed;
  }
  
}

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
  }
}