Introduction

applications चा वापर करून games तयार केले असतील, तर Introduction आणि Summary मध्ये तेही सांगता येईल.

Introduction

या अभ्यासामध्ये मी Interface आणि Application Programming याबद्दल माहिती घेतली. PictoBlox, ThingSpeak, Processing, Web Server, p5.js आणि Blockly यांचा वापर करून वेगवेगळे practical आणि games तयार केले. या applications च्या मदतीने programming, interface design आणि hardware-software connection याबद्दल माहिती मिळाली.

या अभ्यासामध्ये मी PictoBlox आणि Blockly वापरून block programming करून games तयार केले. Processing आणि p5.js वापरून simple games आणि interactive interface तयार केले. Web Server च्या मदतीने ESP32 control करण्याचा practical केला आणि ThingSpeak वर sensor data पाहण्याचा प्रयोग केला. या सर्व practical मुळे मला programming आणि application तयार करण्याचा चांगला अनुभव मिळाला.

Individual Assignment

Task

applications वापरून Interface तयार करणे आणि त्याच्या मदतीने simple games व interactive applications तयार करणे.

work

या Individual Assignment मध्ये मी Interface आणि Application Programming चा अभ्यास केला. PictoBlox, ThingSpeak, Processing, Web Server, p5.js आणि Blockly या applications चा वापर करून वेगवेगळे practical आणि simple games तयार केले. यामधून programming, interface आणि application तयार करण्याची basic माहिती मिळाली.

PictoBlox

PictoBlox म्हणजे काय?

PictoBlox हे एक block-based programming software आहे. यामध्ये वेगवेगळे blocks एकमेकांना जोडून program तयार करता येतो. त्यामुळे programming शिकणे सोपे जाते.PictoBlox चा वापर games, animation, robotics, Arduino, sensors आणि interactive projects तयार करण्यासाठी केला जातो.

मी PictoBlox मध्ये blocks वापरून simple game तयार केला. Game मध्ये player आणि objects तयार केले. Player ची movement control करण्यासाठी Motion आणि Control blocks वापरले. Sensing blocks वापरून object detect केले आणि score system तयार केला.Edit Post “Week – 5 Networking and Communications” ‹ DESIGN INNOVATION CENTER — WordPress

PictoBlox Interface मध्ये:

Stage – Game दिसण्याची जागा.
Sprite – Game मधील character.
Blocks Area – Program तयार करण्याची जागा.
Green Flag – Program सुरू करण्यासाठी.
Keys – Character control करण्यासाठी.

PictoBlox Working Process

Project Start – नवीन project सुरू केला.
Sprite – Game साठी character निवडला.
Blocks – आवश्यक blocks वापरून program तयार केला.
Input – Keyboard किंवा mouse वापरला.
Run – Green Flag वर click करून game सुरू केला.
Output – Program नुसार character move झाला.
Testing – Game चालवून program तपासला

PictoBlox चा interface आणि working process शिकलो. Blocks वापरून simple game तयार केला आणि keyboard व mouse च्या मदतीने character control केला. यामुळे मला basic programming, game logic आणि interface तयार करण्याची माहिती मिळाली.

Blockly

Blockly – Task

Blockly वापरून block programming शिकणे आणि blocks च्या मदतीने एक simple game तयार करणे हा मुख्य task होता. Game तयार करताना character movement, condition, loop आणि score यांचा वापर केला..

work

या Individual Assignment मध्ये मी Blockly चा अभ्यास केला. Blockly च्या interface मधील वेगवेगळे blocks वापरून simple game तयार केला. Movement, condition, loop आणि variable यांचा वापर करून game ची basic programming केली. यामधून block programming, game logic आणि interface तयार करण्याची basic माहिती मिळाली.

Blockly म्हणजे काय?

Blockly हे एक visual programming tool आहे. यामध्ये code type करण्याऐवजी वेगवेगळे blocks जोडून program तयार करता येतो.

Blockly चा वापर games, programming शिकण्यासाठी, robotics आणि simple applications तयार करण्यासाठी केला जातो.

Simple:
Blocks जोडणे → Program तयार करणे → Output मिळवणे

Blockly Interface

Blockly मध्ये program तयार करण्यासाठी वेगवेगळे भाग वापरले जातात.

Events / Actions – Input नुसार action देण्यासाठी.

Workspace – Blocks जोडून program तयार करण्याची जागा.

Block Menu – वेगवेगळे programming blocks निवडण्यासाठी.

Logic Blocks – True/False आणि condition तयार करण्यासाठी.

Loop Blocks – एखादे काम पुन्हा करण्यासाठी.

Math Blocks – Number आणि calculation साठी.

Variables – Score किंवा value store करण्यासाठी.

Blockly Working Process

Program सतत run करून game चे output पाहिले.

User कडून keyboard किंवा mouse input घेतला.

Input नुसार योग्य blocks चालवले.

Blocks मधील condition तपासली.

Condition योग्य असल्यास action केला.

Character किंवा object ची movement झाली.

योग्य action झाल्यावर score update केला.

Blockly हे Google ने विकसित केलेले visual block-based programming tool आहे. यामध्ये code टाइप करण्याऐवजी वेगवेगळे blocks जोडून program तयार केला जातो. प्रत्येक block मध्ये programming मधील एक instruction असते.

Input → Blocks → Program Logic → Output

Blockly

Blockly – Task

work

Blockly म्हणजे काय?

Blockly चा वापर games, programming शिकण्यासाठी, robotics आणि simple applications तयार करण्यासाठी केला जातो.

Simple:
Blocks जोडणे → Program तयार करणे → Output मिळवणे

Blockly Interface

Blockly मध्ये program तयार करण्यासाठी वेगवेगळे भाग वापरले जातात.

Events / Actions – Input नुसार action देण्यासाठी.

Workspace – Blocks जोडून program तयार करण्याची जागा.

Block Menu – वेगवेगळे programming blocks निवडण्यासाठी.

Logic Blocks – True/False आणि condition तयार करण्यासाठी.

Loop Blocks – एखादे काम पुन्हा करण्यासाठी.

Math Blocks – Number आणि calculation साठी.

Variables – Score किंवा value store करण्यासाठी.

Blockly Working Process

Program सतत run करून game चे output पाहिले.

User कडून keyboard किंवा mouse input घेतला.

Input नुसार योग्य blocks चालवले.

Blocks मधील condition तपासली.

Condition योग्य असल्यास action केला.

Character किंवा object ची movement झाली.

योग्य action झाल्यावर score update केला.

Input → Blocks → Program Logic → Output

Blockly मध्ये सर्वप्रथम application किंवा website उघडून आवश्यक programming blocks निवडले जातात. हे blocks Drag and Drop करून workspace मध्ये एकमेकांना जोडले जातात आणि program तयार केला जातो. Logic, Conditions, Loops आणि Variables यांचा वापर करून program चे working ठरवले जाते. तयार केलेले blocks programming code मध्ये convert होतात आणि Run केल्यावर output मिळतो. Program मध्ये error असल्यास Testing आणि Debugging करून blocks मध्ये आवश्यक बदल केले जातात. अशा प्रकारे Blockly च्या मदतीने सोप्या पद्धतीने programming, games आणि applications तयार करता येतात.

p5.js

p5.js – Task

p5.js वापरून JavaScript programming शिकणे आणि त्याच्या मदतीने एक simple game तयार करणे हा मुख्य task होता. Game तयार करताना character movement, condition, loop, variable आणि score यांचा वापर केला.

Work

या Individual Assignment मध्ये मी p5.js चा अभ्यास केला. p5.js Editor मध्ये JavaScript code लिहून simple game तयार केला. Game मध्ये character movement, condition, loop आणि variable यांचा वापर करून game ची basic programming केली. यामधून coding, game logic, graphics आणि interface तयार करण्याची basic माहिती मिळाली.

p5.js म्हणजे काय?

p5.js हे JavaScript वर आधारित creative coding library आहे. याच्या मदतीने drawing, animation, interactive graphics आणि simple games तयार करता येतात.

p5.js चा वापर programming शिकण्यासाठी, graphics तयार करण्यासाठी, animation आणि interactive applications बनवण्यासाठी केला जातो.

Simple:

Code लिहिणे → Program Run करणे → Graphics / Game तयार करणे → Output मिळवणे

let playerX;
let playerY;
let playerW = 40;
let playerH = 60;

let obstacles = [];
let score = 0;
let speed = 5;
let gameOver = false;

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

  playerX = width / 2;
  playerY = height - 80;

  // Obstacles
  for (let i = 0; i < 5; i++) {
    obstacles.push({
      x: random(100, 500),
      y: -i * 150,
      w: 40,
      h: 40
    });
  }
}

function draw() {
  background(180, 220, 170);

  // Road
  fill(100);
  rect(100, 0, 400, height);

  // Road lines
  stroke(255);
  strokeWeight(4);

  for (let y = 0; y < height; y += 60) {
    line(300, y, 300, y + 30);
  }

  noStroke();

  if (!gameOver) {

    // Player
    fill(0, 100, 255);
    rect(playerX, playerY, playerW, playerH);

    // Player movement
    if (keyIsDown(LEFT_ARROW)) {
      playerX -= 6;
    }

    if (keyIsDown(RIGHT_ARROW)) {
      playerX += 6;
    }

    // Keep player on road
    playerX = constrain(playerX, 105, 455);

    // Obstacles
    for (let obstacle of obstacles) {

      fill(200, 50, 50);
      rect(
        obstacle.x,
        obstacle.y,
        obstacle.w,
        obstacle.h
      );

      // Move obstacle
      obstacle.y += speed;

      // Collision
      if (
        playerX < obstacle.x + obstacle.w &&
        playerX + playerW > obstacle.x &&
        playerY < obstacle.y + obstacle.h &&
        playerY + playerH > obstacle.y
      ) {
        gameOver = true;
      }

      // Reset obstacle
      if (obstacle.y > height) {
        obstacle.y = -random(100, 300);
        obstacle.x = random(110, 450);

        score++;
        
        // Increase speed
        if (score % 5 === 0) {
          speed += 1;
        }
      }
    }

    // Score
    fill(255);
    textSize(22);
    text("Score: " + score, 20, 30);

  } else {

    // Game Over Screen
    fill(0);
    textAlign(CENTER);

    textSize(45);
    text("GAME OVER", width / 2, 170);

    textSize(25);
    text("Score: " + score, width / 2, 215);

    textSize(18);
    text("Press R to Restart", width / 2, 255);

    textAlign(LEFT);
  }
}

// Restart
function keyPressed() {
  if (key === "r" || key === "R") {

    score = 0;
    speed = 5;
    gameOver = false;

    playerX = width / 2;

    for (let obstacle of obstacles) {
      obstacle.y = -random(100, 500);
      obstacle.x = random(110, 450);
    }
  }
}

p5.js Interface

let snake = [];
let fruit;

let direction = "RIGHT";

let score = 0;
let gameOver = false;

// Snake size
let grid = 30;

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

  // Slow speed
  frameRate(8);

  // Big starting snake
  snake.push({ x: 300, y: 180 });
  snake.push({ x: 270, y: 180 });
  snake.push({ x: 240, y: 180 });
  snake.push({ x: 210, y: 180 });

  createFruit();
}

function draw() {
  background(50, 150, 70);

  if (!gameOver) {

    moveSnake();

    // Draw Snake
    for (let i = 0; i < snake.length; i++) {

      if (i === 0) {
        // Big Head
        fill(0, 70, 0);
        rect(snake[i].x, snake[i].y, grid, grid);

        // Eyes
        fill(255);
        circle(snake[i].x + 9, snake[i].y + 9, 6);
        circle(snake[i].x + 21, snake[i].y + 9, 6);

        fill(0);
        circle(snake[i].x + 9, snake[i].y + 9, 3);
        circle(snake[i].x + 21, snake[i].y + 9, 3);

      } else {
        // Big Body
        fill(0, 200, 0);
        rect(snake[i].x, snake[i].y, grid, grid);
      }
    }

    // Fruit
    fill(255, 0, 0);
    circle(
      fruit.x + grid / 2,
      fruit.y + grid / 2,
      grid - 4
    );

    // Fruit Collision
    if (
      snake[0].x === fruit.x &&
      snake[0].y === fruit.y
    ) {

      score++;

      // Add TWO body parts
      let tail = snake[snake.length - 1];

      snake.push({
        x: tail.x,
        y: tail.y
      });

      snake.push({
        x: tail.x,
        y: tail.y
      });

      createFruit();
    }

    // Wall Collision
    if (
      snake[0].x < 0 ||
      snake[0].x >= width ||
      snake[0].y < 0 ||
      snake[0].y >= height
    ) {
      gameOver = true;
    }

    // Self Collision
    for (let i = 1; i < snake.length; i++) {

      if (
        snake[0].x === snake[i].x &&
        snake[0].y === snake[i].y
      ) {
        gameOver = true;
      }
    }

    // Score
    fill(255);
    textSize(22);
    text("Score: " + score, 20, 30);

  } else {

    // Game Over
    background(0);

    fill(255);
    textAlign(CENTER);

    textSize(40);
    text("GAME OVER", width / 2, 160);

    textSize(25);
    text(
      "Score: " + score,
      width / 2,
      205
    );

    textSize(18);
    text(
      "Press R to Restart",
      width / 2,
      245
    );

    textAlign(LEFT);
  }
}


// Move Snake
function moveSnake() {

  let head = {
    x: snake[0].x,
    y: snake[0].y
  };

  if (direction === "UP") {
    head.y -= grid;
  }

  if (direction === "DOWN") {
    head.y += grid;
  }

  if (direction === "LEFT") {
    head.x -= grid;
  }

  if (direction === "RIGHT") {
    head.x += grid;
  }

  snake.unshift(head);
  snake.pop();
}


// Keyboard Controls
function keyPressed() {

  if (
    keyCode === UP_ARROW &&
    direction !== "DOWN"
  ) {
    direction = "UP";
  }

  if (
    keyCode === DOWN_ARROW &&
    direction !== "UP"
  ) {
    direction = "DOWN";
  }

  if (
    keyCode === LEFT_ARROW &&
    direction !== "RIGHT"
  ) {
    direction = "LEFT";
  }

  if (
    keyCode === RIGHT_ARROW &&
    direction !== "LEFT"
  ) {
    direction = "RIGHT";
  }

  // Restart
  if (key === "r" || key === "R") {
    restartGame();
  }
}


// Create Fruit
function createFruit() {

  fruit = {
    x: floor(random(width / grid)) * grid,
    y: floor(random(height / grid)) * grid
  };
}


// Restart
function restartGame() {

  snake = [];

  snake.push({ x: 300, y: 180 });
  snake.push({ x: 270, y: 180 });
  snake.push({ x: 240, y: 180 });
  snake.push({ x: 210, y: 180 });

  direction = "RIGHT";
  score = 0;
  gameOver = false;

  createFruit();
}

p5.js Editor मध्ये program तयार करण्यासाठी वेगवेगळे भाग वापरले जातात.

Code Editor – JavaScript code लिहिण्यासाठी.

Run Button – लिहिलेला program चालवण्यासाठी.

Canvas – Graphics, character आणि game objects दाखवण्यासाठी.

Console – Error आणि program ची माहिती पाहण्यासाठी.

Functions – Program मधील वेगवेगळी कामे करण्यासाठी.

Variables – Score, position आणि इतर values store करण्यासाठी.

p5.js Working Process

सर्वप्रथम p5.js Editor उघडून JavaScript code लिहिला.

setup() function मध्ये game ची सुरुवातीची settings तयार केली.

draw() function च्या मदतीने game सतत run केला.

Keyboard किंवा mouse कडून user input घेतला.

Input नुसार character किंवा object ची movement केली.

if condition वापरून game मधील वेगवेगळ्या conditions तपासल्या.

Loop आणि draw() function च्या मदतीने game सतत चालू ठेवला.

Variable च्या मदतीने score आणि इतर values store केल्या.

योग्य action झाल्यावर score update केला.

Program मध्ये error असल्यास Console मधील error तपासून code मध्ये आवश्यक बदल केले.

p5.js Working

p5.js मध्ये सर्वप्रथम Editor मध्ये आवश्यक JavaScript code लिहिला जातो. setup() function च्या मदतीने canvas आणि सुरुवातीच्या settings तयार केल्या जातात. draw() function सतत execute होत असल्यामुळे animation आणि game continuously चालू राहतो. Keyboard किंवा mouse input नुसार character ची movement केली जाते. Conditions वापरून collision, score आणि game ची स्थिती तपासली जाते. Variables च्या मदतीने score, position आणि इतर values store केल्या जातात. Program Run केल्यानंतर तयार केलेला game canvas वर दिसतो. काही error आढळल्यास Console च्या मदतीने Testing आणि Debugging करून code मध्ये आवश्यक बदल केले जातात.

Input → JavaScript Code → Game Logic → Canvas → Output

Blynk

Blynk म्हणजे काय?

Blynk हे एक IoT प्लॅटफॉर्म आहे, ज्याचा वापर हार्डवेअर उपकरणांना मोबाईल app किंवा वेब डॅशबोर्डशी जोडण्यासाठी आणि कंट्रोल करण्यासाठी केला जातो. Blynk च्या मदतीने ESP32, ESP32-C3 आणि Arduino सारखी मायक्रोकंट्रोलर उपकरणे इंटरनेटशी जोडता येतात आणि त्यांच्यामध्ये डेटा पाठवता व घेता येतो. Blynk वापरून आपण सेन्सरची माहिती पाहू शकतो आणि LED, मोटर आणि रिले यांसारखी उपकरणे दूरून कंट्रोल करू शकतो. यामध्ये Button, Gauge, Chart आणि Display यांसारखे widgets उपलब्ध आहेत. त्यांचा वापर करून सोपा IoT इंटरफेस तयार करता येतो. Blynk चा उपयोग IoT आणि स्मार्ट डिव्हाइस प्रोजेक्ट तयार करण्यासाठी आणि टेस्ट करण्यासाठी केला जातो. वेगळे मोबाईल app सुरुवातीपासून तयार करण्याची गरज नसल्यामुळे IoT प्रोजेक्ट बनवणे सोपे होते.

Blynk म्हणजे काय?

Blynk हे एक IoT platform आहे. याचा वापर mobile किंवा web app मधून Arduino आणि ESP32 सारखी devices control आणि monitor करण्यासाठी केला जातो.

use

LED ON/OFF करण्यासाठी
Motor control करण्यासाठी
Sensor data पाहण्यासाठी
Home automation साठी
IoT projects साठी

Simple:

Mobile App → Internet → ESP32/Arduino → Device

Example:

Blynk app मधील button दाबल्यावर ESP32 वरील LED ON/OFF करता येते.

Blynk Working Process

Blynk app मध्ये project तयार केला.
ESP32 ला Wi-Fi सोबत connect केले.
Blynk app मध्ये Button तयार केला.
Button ला ESP32 च्या GPIO pin सोबत जोडले.
Arduino IDE मध्ये Blynk library वापरून program तयार केला.
Program ESP32 मध्ये upload केला.
Mobile मधील Button दाबल्यावर command ESP32 कडे जाते.
ESP32 command नुसार LED ON किंवा OFF करते.

Simple Flow:

MIT App Inventor

MIT App Inventor म्हणजे काय?

MIT App Inventor हे MIT (Massachusetts Institute of Technology) ने तयार केलेले Free आणि Web-Based Platform आहे. यामध्ये Drag-and-Drop Blocks च्या मदतीने Android Applications तयार करता येतात. या App च्या मदतीने ESP32 सारख्या Devices सोबत Wi-Fi किंवा Bluetooth द्वारे Communication करता येते. त्यामुळे IoT आणि Embedded Systems Projects साठी हे एक सोपे आणि उपयुक्त Tool आहे.

Experience

या प्रयोगातून मला HC-06 Bluetooth Module Arduino सोबत Serial Communication द्वारे कसे काम करते हे समजले. Mobile Phone ला Bluetooth Module सोबत Pair करून Custom Mobile Application च्या मदतीने LED वायरलेस पद्धतीने Control करायला शिकलो. यामुळे Bluetooth आधारित Embedded System Applications बद्दल माझे ज्ञान वाढले.

Control LED using MIT App Inventor

Open MIT App Inventor.

week – 6 Interface & Application

Introduction

Individual Assignment

Task

work

PictoBlox

PictoBlox म्हणजे काय?

PictoBlox Interface मध्ये:

PictoBlox Working Process

Blockly

Blockly – Task

work

Blockly म्हणजे काय?

Blockly Interface

Blockly Working Process

Blockly

Blockly – Task

work

Blockly म्हणजे काय?

Blockly Interface

Blockly Working Process

p5.js

p5.js – Task

Work

p5.js म्हणजे काय?

p5.js Interface

p5.js Working Process

p5.js Working

Blynk

Blynk

Blynk म्हणजे काय?

Blynk म्हणजे काय?

use

Blynk Working Process

MIT App Inventor

MIT App Inventor म्हणजे काय?

Experience

Control LED using MIT App Inventor

Processing

About The Author

Dnyaneshwar Mule

Related Posts

Growing fresh vegetables for daily need in a space like Terrace

Domestic Composter First Prototype

Arduino Ultrasonic Range Finder with on OLED Display

Vigyan Ashram @Maker Mela 2018…