final

// var main;

// var mainImg;

// function preload() {

//   mainImg = loadImage('main.jpg');

// }

// function setup() {

//   // createCanvas(400, 400);

//   // main = createSprite(width/2, height/2);

//  main = createSprite(width, height);

//   main.addImage(mainImg);

// }

// function draw() {

//   background(255);

//   main.position.x = mouseX;

//   main.position.y = mouseY;

//   if (mouseIsPressed) {

//     main.rotation += 2;

//   }

//   drawSprites();

// }

​

// CTRL B= autoformatting

// 

​

//1. display image on screen

var bg;

​

var zoom = 1.00;

//attempting scene manager

var mgr; //scene manager object

var data;

​

function preload(){

  data=loadJSON(".json"); 

  print(data.);

function setup() {

  // The background image must be the same size as the parameters

  // into the createCanvas() method. In this program, the size of

  // the image is 720x400 pixels.

  bg = loadImage("alley2.jpg");

  createCanvas(1024, 680);

  rectMode(CENTER);

}

​

function draw() {

  background(bg);

//2. display text instructions

fill(250);      

textSize(100);

text("START", 350, 400);

​

//3. Key press to start zoom

​

function keyTyped(){

  // bg.resize(700, 600);

  //3a. image is to get larger up until certain size

  // if (key === 'a') {

  // createCanvas(1024, 680);

  // } else if (key === 'b') {

  //   creatCanvas(200,400);

  // }

if (key === 'spacebar') {

  translate(width/2,height/2);

  fill(0);

  scale(zoom);

  rect(0, 0, 50, 50);

  zoom += 0.1

  } else {

  background(bg);

​

//3b. manage which point zoom in happens (whats the referecne point). -> rectMode or imageImage... 

}

}

//use json to call data with story points 

​

}