› › ›

New here: Using processing.js via JS in an HTML file. How do I load and draw an image?

WACOMaltWACOMalt
edited March 2016 in JavaScript Mode

Hi all, I'm new here, recently transitioned from learning the basics on kahn academy. I've written my first game, a "pong" clone to get the basics down. I'm at the point now where I want to display images instead of the basics shapes I used while programming. I cant figure out for the life of me, after spending hours trying, how to load and draw an image.

First off, here's the original project brought over directly from Kahn Academy's editor: http://www.wacomalt.com/dropbox/LABS/JSCODE/PONG.html You can see its running well enough.

Since then I edited it to go full screen. More gameplay tweaks are needed, but here that is: http://www.wacomalt.com/dropbox/LABS/JSCODE/PONGFullscreenNoImages.html

Lastly I am trying to add images. The images reside in http://www.wacomalt.com/dropbox/LABS/JSCODE/data/ and are all gif images (or png I also made). Every example I could find using images with processing.js required loading your program as a .pde file in what appears to be Java syntax? Anywho I'm wondering what I can do to load and draw these images with processing when using javascript directly in an html file?

Here is the current code I've tried, with no luck (line 63 is my image loading attempt, and 107 is the attempt to draw it (67 and 111 on pastebin copy)):

http://pastebin.com/HsjSuDDM

`<!DOCTYPE html>

<head>
    <title>PONG in JS</title>
    <style type="text/css">
          body {margin:0; padding:0;} /* remove top and left whitespace */
          *{
            margin: 0;
            padding: 0 }
            canvas {display:block;}    /* remove scrollbars */
            canvas:focus {outline:0;} /* remove blue outline around canvas */
            .fs {position:fixed; bottom:20px; right:20px;}
            #enter {display:block;}
            #exit {display:none;}
        </style>  
</head>

<body>
      <canvas id="pongcanvas"></canvas> 
</body>


<script src="processing.min.js"></script> 
<script>    

var sketchProc = function(processingInstance) {
    with (processingInstance) {
        size(window.innerWidth, window.innerHeight);
        frameRate(60);

        //SETUP         
        var screenWidth=window.innerWidth;
        var screenHeight=window.innerHeight;

        //Paddle Vars
        var paddleX = mouseX;
        var basePaddleWidth = 50;
        var paddleWidth = basePaddleWidth;

        //Ball Vars
        var ballWidth = 10;
        var ballX = screenWidth/2;
        var ballY = screenHeight/2;
        var targetBallSpeedX = 1;
        var targetBallSpeedY = 1;
        var ballSpeedX = targetBallSpeedX;
        var ballSpeedY = targetBallSpeedY;
        var ballXDistanceFromPaddle = (paddleX - ballX);
        var ballXSpeedIncrement = 1;

        //Enemy Paddle Vars
        var enemyPaddleX = screenWidth/2;
        var enemyBasePaddleWidth = 50;
        var enemyPaddleWidth = enemyBasePaddleWidth;
        var enemyPaddleSpeedLimitX = 1;
        var enemyPaddleSpeedX = 1;
        var enemyPaddleDistanceToBall = enemyPaddleX - ballX;

        //Game Vars
        var restartTimer = 5000;
        var restartCount = 0;
        var score = 0;
        var highScore = 0;

        var getImage = function(s) {
            var url = "http://www.wacomalt.com/dropbox/LABS/JSCODE/data/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        };

        var goodPaddleImage = getImage("goodpaddle");

        var restart = function() {
          ballX = screenWidth/2;
          ballY = screenHeight/2;
          enemyPaddleSpeedLimitX = 1;
          ballSpeedX = 1;
          ballSpeedY = 1;
        };

        var restartPlus = function() {
            ballX = screenWidth/2;
            ballY = screenHeight/2;
            enemyPaddleSpeedLimitX = enemyPaddleSpeedLimitX + 0.0625;
            score++;
            ballSpeedY = -ballSpeedY;
            };

        var draw = function() {
            paddleX = mouseX;

            //Background
            fill(42, 80, 145, 80);
            rect(-1, -1, screenWidth+1, screenHeight+1);
            stroke(127,127,127);
            fill(173, 173, 173);
            rect(0,0,screenWidth-1,40);

            //Score display
            fill(0, 0, 0);
            textSize(20);
            text("Score: " + score,5,5,200,20);
            text("High Score: " + highScore,223,5,310,20);

            //Draw Paddle
            fill(123, 255, 0);
            stroke(0,0,0);
            rect(paddleX-(paddleWidth/2),screenHeight-20,paddleWidth,10);
            image(goodPaddleImage ,paddleX-25,screenHeight-20, 50, 10);

            //Draw Enemy Paddle
            fill(255, 0, 0);
            stroke(0,0,0);
            rect(enemyPaddleX-(enemyPaddleWidth/2),40,enemyPaddleWidth,10);

            //Draw Ball
            stroke(184, 37, 0);
            fill(255, 140, 0);
            ellipse(ballX, ballY, ballWidth, ballWidth);

            ballXDistanceFromPaddle = (paddleX - ballX);
            enemyPaddleDistanceToBall = (enemyPaddleX - ballX);

            if (ballX > screenWidth-5) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballX < 5) {
                ballSpeedX = (ballSpeedX * -1);
            }
            if (ballY > screenHeight-25) {
                if (abs(ballXDistanceFromPaddle) < ((paddleWidth/2)+ballWidth)){
                    ballSpeedY = ((ballSpeedY * -1) - 0.125);
                    enemyPaddleSpeedLimitX = enemyPaddleSpeedLimitX + 0.0625;
                    ballXSpeedIncrement = ballXSpeedIncrement + 0.02;
                    ballSpeedX = (ballXDistanceFromPaddle / -12.5) * ballXSpeedIncrement;
                }
                else {
                    if (score > 0){score = 0;}
                    restart();
                            }
            }
            if (ballY < 55) {
                if (abs(enemyPaddleDistanceToBall) < ((enemyPaddleWidth/2)+ballWidth)){
                    ballSpeedY = ((ballSpeedY * -1) + 0.125);
                    enemyPaddleSpeedLimitX = enemyPaddleSpeedLimitX + 0.0625;
                    ballXSpeedIncrement = ballXSpeedIncrement + 0.02;
                    ballSpeedX = (enemyPaddleDistanceToBall / -12.5) * ballXSpeedIncrement;
                }
                else {
                    restartPlus();
                }

            }

            if (score > highScore) {highScore = score;}

            ballX = ballX + ballSpeedX;
            ballY = ballY + ballSpeedY;
            enemyPaddleSpeedX = enemyPaddleDistanceToBall;
            if (enemyPaddleSpeedX > enemyPaddleSpeedLimitX) {
                enemyPaddleSpeedX = enemyPaddleSpeedLimitX;
                }
            if (enemyPaddleSpeedX < -enemyPaddleSpeedLimitX) {
                enemyPaddleSpeedX = -enemyPaddleSpeedLimitX;
                }
            enemyPaddleX = enemyPaddleX - enemyPaddleSpeedX;
            };
        }
    };

var canvas = document.getElementById("pongcanvas"); 
var processingInstance = new Processing(canvas, sketchProc); 
</script>

`

and the broken page, live: http://www.wacomalt.com/dropbox/LABS/JSCODE/PONGFullscreen.html

Tagged:

Answers

  • GoToLoopGoToLoop

    http://ProcessingJS.org/reference/pjs directive/

  • WACOMaltWACOMalt
    edited March 2016

    Thanks for the help @GoToLoop , but I'm still a bit lost. Is my current syntax on running the sketch incorrect to begin with? The page you linked said I need to add in /* @pjs preload="goodpaddle.gif,badpaddle.gif,ball.gif"; */ But that since I am in "javascript only" mode I need to format is as such:

    var mySketch = new Processing.Sketch(
  function(p) { p.draw = function(){...}; ... }
);

mySketch.options.preload = "goodpaddle.gif,badpaddle.gif,ball.gif";
var myProcessing = new Processing("myCanvas", mySketch);

var pi = new Processing("myCanvas");
pi.externals.sketch.options.preload = "goodpaddle.gif,badpaddle.gif,ball.gif";

    OR at least thats my attempt since they dont show an example of that syntax with the preload option. And I'm not sure how to fit this into my current code as the way they are defining and running the main draw function setup is drastically different than the way I currently have.

    Sorry if its too much to ask, but could you show me how exactly to fit that into what I have?

    Edit: I did try, take a look at the code of: http://wacomalt.com/dropbox/LABS/JSCODE/PONGFullscreen.html To see my issue. The debug console says: Uncaught TypeError: Cannot set property 'preload' of undefined. (anonymous function) @ PONGFullscreen.html:174

  • GoToLoopGoToLoop
    edited March 2016

    Indeed it's a mystery how Pjs deals w/ preload= directive.
    Actually I didn't even know about the others. Almost none experience w/ "pure raw JS" mode.

    Actually situation is even worse than that. Since v 1.4.9, "pure raw JS" was removed from Pjs! :-O
    There were no discussions, pre-warnings nor logs about such arbitrary decision! X(

  • WACOMaltWACOMalt
    edited March 2016

    Oh man, that's really sad! I wish kahn academy would start off with something other than processing.js. I feel kinda cheated with such an unstable language as my basis. I started digging through the source code looking for any hint at what the property should be called as but I cant find anything.

    And for the record, I'm not entirely sure what you mean by Pure Javascript ""mode"" Is this what you call the fact that I am using javascript in html to use processing.js? I've never had to do any sort of "mode change" or anything to get started, I just started writing html files with javascript in them.

  • GoToLoopGoToLoop
    edited March 2016
    • Pjs was created in order to transpile Processing's Java Mode into JS.
    • Using it as a "pure" JS library was considered some sorta an advanced "hack"! ;))
    • But it's extremely sad (and infuriating) that the dev guy ( Pomax ) controlling Pjs has decided to completely remove the JS library "feature" from Pjs.
    • He hadn't said anything about it. That's not even mentioned in v1.4.9's log: :-&
      https://GitHub.com/processing-js/processing-js/compare/v1.4.9...master
    • And even though Pjs' link was removed from https://Processing.org/ site, he denies every attempt to make Pjs better. Reducing it to a mere subservient Processing Java to JS transpiler. ~X(
Sign In or Register to comment.