In-Class Projects

  • 10.25.19 - Refactor and Re-Use of Code

    size(720, 480);
    smooth();
    strokeWeight(2);
    background(204);
    ellipseMode(RADIUS);
    // Neck
    stroke(102); // Set stroke to gray
    line(266, 257, 266, 162); // Left
    line(276, 257, 276, 162); // Middle
    line(286, 257, 286, 162); // Right
    // Antennae
    line(276, 155, 246, 112); // Small
    line(276, 155, 306, 56); // Tall
    line(276, 155, 342, 170); // Medium
    // Body
    noStroke(); // Disable stroke
    fill(102); // Set fill to gray
    ellipse(264, 377, 33, 33); // Antigravity orb
    fill(0); // Set fill to black
    rect(219, 257, 90, 120); // Main body
    fill(102); // Set fill to gray
    rect(219, 274, 90, 6); // Gray stripe
    // Head
    fill(0); // Set fill to black
    ellipse(276, 155, 45, 45); // Head
    fill(255); // Set fill to white
    ellipse(288, 150, 14, 14); // Large eye
    fill(0); // Set fill to black
    ellipse(288, 150, 3, 3); // Pupil
    fill(153); // Set fill to light gray
    ellipse(263, 148, 5, 5); // Small eye 1
    ellipse(296, 130, 4, 4); // Small eye 2
    ellipse(305, 162, 3, 3); // Small eye 3


    float x = 60; // X-coordinate
    float y = 440; // Y-coordinate
    int radius = 45; // Head Radius
    int bodyHeight = 160; // Body Height
    int neckHeight = 70; // Neck Height
    float easing = 0.02;
    void setup() {
    size(360, 480);
    smooth();
    strokeWeight(2);

    ellipseMode(RADIUS);
    }
    void draw() {
    int targetX = mouseX;
    x += (targetX - x) * easing;
    if (mousePressed) {
    neckHeight = 16;
    bodyHeight = 90;
    } else {
    neckHeight = 70;
    bodyHeight = 160;
    }
    float ny = y - bodyHeight - neckHeight - radius;
    background(204);
    // Neck
    stroke(102);
    line(x+12, y-bodyHeight, x+12, ny);
    // Antennae
    line(x+12, ny, x-18, ny-43);
    line(x+12, ny, x+42, ny-99);
    line(x+12, ny, x+78, ny+15);
    // Body
    noStroke();
    fill(102);
    ellipse(x, y-33, 33, 33);
    fill(0);
    rect(x-45, y-bodyHeight, 90, bodyHeight-33);
    // Head
    fill(0);
    ellipse(x+12, ny, radius, radius);
    fill(255);
    ellipse(x+24, ny-6, 14, 14);
    fill(0);
    ellipse(x+24, ny-6, 3, 3);
    }

     


    12.1.17

    Download the three different files:

    script.js

    function addStuff(){
    var Name = "Dean";
    var LastName;

    LastName = document.forms.form1.lastName1.value;
    // LastName = prompt("please enter your last name");
    alert("Hello world, my name is " + Name + " " + LastName);

    }

    myStyles.css

    /* CSS Document */
    body{
    background-color:#bbbbbb;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color:#333333;
    }
    #wrapper{
    background-color:#D3D3D3;
    width: 900px;
    margin-left:auto;
    margin-right:auto;
    padding-left: 10px; padding-right: 10px; padding-bottom: 10px;
    }
    #hero{
    font-size:larger;
    text-align:center; background-color:#FFFFFF;
    }

    index.html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>My First Web Page</title>
    <link rel="stylesheet" type="text/css" href="styles/myStyles.css">
    <script src="scripts/script1.js"></script>
    </head>

    <body>
    <div id="wrapper">
    <div id="hero"><img src="jeff-bridges-head-shot.png" width="159" height="199" alt="Jeff Bridges"/><br>No Kid Hungry</div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum sed diam et pulvinar. Sed mattis tortor sit amet ipsum pulvinar, sit amet tristique quam laoreet. Ut ac lacus urna. Quisque sed auctor leo. Duis euismod dapibus dapibus. Sed consequat, arcu id ullamcorper auctor, libero est cursus ex, quis bibendum lectus nulla eget libero. Quisque eleifend purus arcu, sit amet tempus dolor volutpat sed. Donec id massa pretium, congue lorem quis, facilisis nisl. Mauris et auctor purus. Ut faucibus augue vitae elit porta, at vulputate quam iaculis.
    </p>
    <p>
    Phasellus pellentesque eu elit non commodo. Morbi felis arcu, aliquet vel eros in, molestie vulputate leo. Quisque tincidunt sed dolor ut pulvinar. Phasellus varius, sem in fringilla vehicula, elit ligula porttitor leo, sit amet vestibulum odio leo eget dolor. Pellentesque metus massa, eleifend at mi ut, lacinia posuere nisi. Nullam in mi purus. Vestibulum vitae risus non leo condimentum aliquet. Donec tincidunt sed tortor a condimentum. Nunc fermentum elit dolor, quis venenatis eros consequat venenatis. Curabitur maximus ipsum ultricies mi pharetra, sit amet cursus felis pharetra.
    </p>
    <p>
    Pellentesque faucibus massa sem, vel iaculis sapien ullamcorper at. Suspendisse congue dolor vel nisl pretium vehicula. Nam laoreet tortor nec enim tincidunt interdum. Donec eu augue quis metus pharetra varius. Maecenas id aliquam nunc. Maecenas placerat nulla eu magna dictum, eu blandit velit aliquam. Fusce laoreet dolor nec dui suscipit interdum. Donec mattis suscipit nisl, sed aliquam odio consequat ut. Sed faucibus ipsum quis turpis sodales porta. Aenean tortor mi, rhoncus et augue ac, tincidunt aliquet tortor. In sit amet tellus venenatis, pretium lectus ultricies, fringilla turpis.
    </p>
    <form action="" method="post" id="form1">
    <input type="text" name="lastName1" />
    <input type="button" name="btn1" value="I am button 1" onClick="addStuff()" />
    </form>
    </div>
    </body>
    </html>

    Code for 3D Game in JavaScript from 3D Game Programming for Kids by Chris Strom

    (Remember: be careful about YOUR AVATAR) 

    Code as of 11.15.17

    <body></body>
    <script src="http://gamingJS.com/Tween.js"></script>
    <script src="http://gamingJS.com/Three.js"></script>
    <script src="http://gamingJS.com/ChromeFixes.js"></script>
    <script>
    // This is where stuff in our game will happen:
    var scene = new THREE.Scene();

    // This is what sees the stuff:
    var aspect_ratio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
    camera.position.z = 500;
    //scene.add(camera);

    // This script will draw what the camera sees onto the screen:
    var renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // ******** START CODING ON THE NEXT LINE ********
    var marker = new THREE.Object3D();
    scene.add(marker);
    var body = new THREE.SphereGeometry(150,50,50);
    var badge = new THREE.CubeGeometry(50,30,2);
    var paper = new THREE.MeshBasicMaterial({color: 0xeeeeee});
    var head = new THREE.SphereGeometry(80,50,50);
    var cover = new THREE.MeshBasicMaterial({color: 0x036b23});
    var skin = new THREE.MeshBasicMaterial({color: 0xd3b096});
    var shoes = new THREE.MeshBasicMaterial({color: 0x000000});
    var khaki = new THREE.MeshBasicMaterial({color: 0xd3c896});
    var avatar = new THREE.Mesh(body, cover);
    marker.add(avatar);
    //var ID = new THREE.Mesh(badge, paper);
    //ID.position.set(0,50,205);
    var myHead = new THREE.Mesh(head, skin);
    myHead.position.set(0,230,50);
    avatar.add(myHead);
    //avatar.add(ID);
    var rightHand = new THREE.SphereGeometry(50,50,50);
    var right_hand = new THREE.Mesh(rightHand, skin);
    avatar.add(right_hand);
    right_hand.position.set(-165,70,0);
    var leftHand = new THREE.SphereGeometry(50,50,50);
    var left_hand = new THREE.Mesh(leftHand, skin);
    avatar.add(left_hand);
    left_hand.position.set(165,70,0);
    var foot = new THREE.SphereGeometry(50);
    var left_foot = new THREE.Mesh(foot, shoes);
    avatar.add(left_foot);
    left_foot.position.set(75,-160,0);
    var right_foot = new THREE.Mesh(foot, shoes);
    avatar.add(right_foot);
    right_foot.position.set(-75,-160,0);
    marker.add(camera);
    function makeTreeAt(x,z){
    var trunk = new THREE.Mesh(
    new THREE.CylinderGeometry(50,50,200),
    new THREE.MeshBasicMaterial({color: 0xA0522D}));
    var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 0x228B22}));
    top.position.y = 175;
    trunk.add(top);
    trunk.position.set(x, -75, z);
    scene.add(trunk);
    }
    makeTreeAt(500,0);
    makeTreeAt(-500,0);
    makeTreeAt(750,-1000);
    makeTreeAt(-750,-1000);
    var clock = new THREE.Clock(true);// a timer for the animation
    var is_cartwheeling = false;
    var is_flippy = false;
    var is_turning = false;
    function animate()
    {
    requestAnimationFrame(animate);
    TWEEN.update();
    walk();
    aerobics();
    turn();
    renderer.render(scene, camera);
    }
    function walk()
    {
    if(!is_walking()) {return;}
    var position = Math.sin(clock.getElapsedTime()*10) * 100;
    right_hand.position.z = position;
    left_hand.position.z = -position;
    right_foot.position.z = -position;
    left_foot.position.z = position;

    }
    function aerobics()
    {
    if(is_cartwheeling)
    { avatar.rotation.z = avatar.rotation.z + 0.05;}
    if(is_flippy)
    { avatar.rotation.x = avatar.rotation.x + 0.05;}
    }
    function turn()
    {
    var direction = 0;
    if(is_moving_right){direction = Math.PI/2;}
    if(is_moving_left){direction = -Math.PI/2;}
    if(is_moving_forward){direction = Math.PI;}
    if(is_moving_back){direction = 0;}

    spinAvatar(direction);

    }
    function spinAvatar(direction){
    new TWEEN.
    Tween({y: avatar.rotation.y}).//the direction the avatar is already facing
    to({y: direction}, 100). // rotate TO the new y rotation at 100 milliseconds
    onUpdate(function(){
    avatar.rotation.y = this.y;}).
    start();
    }
    animate();
    var is_moving_right, is_moving_left, is_moving_forward, is_moving_back;
    function is_walking(){
    if(is_moving_right){return true;}
    if(is_moving_left){return true;}
    if(is_moving_forward){return true;}
    if(is_moving_back){return true;}
    return false;
    }
    /*effect control with keydown*/
    document.addEventListener('keydown',function(event){
    var code = event.keyCode;
    if(code == 37) {
    marker.position.x = marker.position.x-5;//left
    is_moving_left = true;
    }
    if(code == 39){
    marker.position.x = marker.position.x+5;//right
    is_moving_right = true;
    }
    if(code == 38){
    marker.position.z = marker.position.z-5;//up
    is_moving_forward = true;
    }
    if(code == 40){
    marker.position.z = marker.position.z+5;//down
    is_moving_back = true;
    }
    if(code == 70) is_flippy = !is_flippy;//flippiness
    if(code == 67) is_cartwheeling = !is_cartwheeling;//cartwheeling
    });
    document.addEventListener('keyup',function(event){
    var code = event.keyCode;
    if(code == 37) {
    marker.position.x = marker.position.x-5;//left
    is_moving_left = false;
    }
    if(code == 39){
    marker.position.x = marker.position.x+5;//right
    is_moving_right = false;
    }
    if(code == 38){
    marker.position.z = marker.position.z-5;//up
    is_moving_forward = false;
    }
    if(code == 40){
    marker.position.z = marker.position.z+5;//down
    is_moving_back = false;
    }

    });

    // Now, show what the camera sees on the screen:
    renderer.render(scene, camera);
    </script>

    Code as of 11.14.17

    <body></body>
    <script src="http://gamingJS.com/Three.js"></script>
    <script src="http://gamingJS.com/ChromeFixes.js"></script>
    <script>
    // This is where stuff in our game will happen:
    var scene = new THREE.Scene();

    // This is what sees the stuff:
    var aspect_ratio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
    camera.position.z = 500;
    //scene.add(camera);

    // This script will draw what the camera sees onto the screen:
    var renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // ******** START CODING ON THE NEXT LINE ********
    var marker = new THREE.Object3D();
    scene.add(marker);
    var body = new THREE.SphereGeometry(150,50,50);
    var badge = new THREE.CubeGeometry(50,30,2);
    var paper = new THREE.MeshBasicMaterial({color: 0xeeeeee});
    var head = new THREE.SphereGeometry(80,50,50);
    var cover = new THREE.MeshBasicMaterial({color: 0x036b23});
    var skin = new THREE.MeshBasicMaterial({color: 0xd3b096});
    var shoes = new THREE.MeshBasicMaterial({color: 0x000000});
    var khaki = new THREE.MeshBasicMaterial({color: 0xd3c896});
    var avatar = new THREE.Mesh(body, cover);
    marker.add(avatar);
    //var ID = new THREE.Mesh(badge, paper);
    //ID.position.set(0,50,205);
    var myHead = new THREE.Mesh(head, skin);
    myHead.position.set(0,230,50);
    avatar.add(myHead);
    //avatar.add(ID);
    var rightHand = new THREE.SphereGeometry(50,50,50);
    var right_hand = new THREE.Mesh(rightHand, skin);
    avatar.add(right_hand);
    right_hand.position.set(-165,70,0);
    var leftHand = new THREE.SphereGeometry(50,50,50);
    var left_hand = new THREE.Mesh(leftHand, skin);
    avatar.add(left_hand);
    left_hand.position.set(165,70,0);
    var foot = new THREE.SphereGeometry(50);
    var left_foot = new THREE.Mesh(foot, shoes);
    avatar.add(left_foot);
    left_foot.position.set(75,-160,0);
    var right_foot = new THREE.Mesh(foot, shoes);
    avatar.add(right_foot);
    right_foot.position.set(-75,-160,0);
    marker.add(camera);
    function makeTreeAt(x,z){
    var trunk = new THREE.Mesh(
    new THREE.CylinderGeometry(50,50,200),
    new THREE.MeshBasicMaterial({color: 0xA0522D}));
    var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 0x228B22}));
    top.position.y = 175;
    trunk.add(top);
    trunk.position.set(x, -75, z);
    scene.add(trunk);
    }
    makeTreeAt(500,0);
    makeTreeAt(-500,0);
    makeTreeAt(750,-1000);
    makeTreeAt(-750,-1000);
    var clock = new THREE.Clock(true);// a timer for the animation
    var is_cartwheeling = false;
    var is_flippy = false;
    var is_turning = false;
    function animate()
    {
    requestAnimationFrame(animate);
    walk();
    aerobics();
    turn();
    renderer.render(scene, camera);
    }
    function walk()
    {
    if(!is_walking()) {return;}
    var position = Math.sin(clock.getElapsedTime()*10) * 100;
    right_hand.position.z = position;
    left_hand.position.z = -position;
    right_foot.position.z = -position;
    left_foot.position.z = position;

    }
    function aerobics()
    {
    if(is_cartwheeling)
    { avatar.rotation.z = avatar.rotation.z + 0.05;}
    if(is_flippy)
    { avatar.rotation.x = avatar.rotation.x + 0.05;}
    }
    function turn()
    {
    if(is_turning)
    {
    avatar.rotation.y = avatar.rotation.y + 0.05;}

    }
    animate();
    var is_moving_right, is_moving_left, is_moving_forward, is_moving_back;
    function is_walking(){
    if(is_moving_right){return true;}
    if(is_moving_left){return true;}
    if(is_moving_forward){return true;}
    if(is_moving_back){return true;}
    return false;
    }
    document.addEventListener('keydown',function(event){
    var code = event.keyCode;
    if(code == 37) {
    marker.position.x = marker.position.x-5;//left
    is_moving_left = true;
    }
    if(code == 39){
    marker.position.x = marker.position.x+5;//right
    is_moving_right = true;
    }
    if(code == 38){
    marker.position.z = marker.position.z-5;//up
    is_moving_forward = true;
    }
    if(code == 40){
    marker.position.z = marker.position.z+5;//down
    is_moving_back = true;
    }
    if(code == 70) is_flippy = !is_flippy;//flippiness
    if(code == 67) is_cartwheeling = !is_cartwheeling;//cartwheeling
    });


    // Now, show what the camera sees on the screen:
    renderer.render(scene, camera);
    </script>

    Code as of 11.13.17

    <body></body>
    <script src="http://gamingJS.com/Three.js"></script>
    <script src="http://gamingJS.com/ChromeFixes.js"></script>
    <script>
    // This is where stuff in our game will happen:
    var scene = new THREE.Scene();

    // This is what sees the stuff:
    var aspect_ratio = window.innerWidth / window.innerHeight;
    var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
    camera.position.z = 500;
    //scene.add(camera);

    // This will draw what the camera sees onto the screen:
    var renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // ******** START CODING ON THE NEXT LINE ********
    var marker = new THREE.Object3D();
    scene.add(marker);
    var body = new THREE.SphereGeometry(200,50,50);
    var badge = new THREE.CubeGeometry(50,30,2);
    var paper = new THREE.MeshBasicMaterial({color: 0xeeeeee});
    var head = new THREE.SphereGeometry(80,50,50);
    var cover = new THREE.MeshBasicMaterial({color: 0x036b23});
    var skin = new THREE.MeshBasicMaterial({color: 0xd3b096});
    var shoes = new THREE.MeshBasicMaterial({color: 0x000000});
    var khaki = new THREE.MeshBasicMaterial({color: 0xd3c896});
    var avatar = new THREE.Mesh(body, cover);
    marker.add(avatar);
    var ID = new THREE.Mesh(badge, paper);
    ID.position.set(0,50,205);
    var myHead = new THREE.Mesh(head, skin);
    myHead.position.set(0,230,50);
    avatar.add(myHead);
    avatar.add(ID);
    var rightHand = new THREE.SphereGeometry(50,50,50);
    var right_hand = new THREE.Mesh(rightHand, skin);
    avatar.add(right_hand);
    right_hand.position.set(-250,70,0);
    var leftHand = new THREE.SphereGeometry(50,50,50);
    var left_hand = new THREE.Mesh(leftHand, skin);
    avatar.add(left_hand);
    left_hand.position.set(250,70,0);
    var foot = new THREE.SphereGeometry(50);
    var left_foot = new THREE.Mesh(foot, shoes);
    avatar.add(left_foot);
    left_foot.position.set(75,-225,0);
    var right_foot = new THREE.Mesh(foot, shoes);
    avatar.add(right_foot);
    right_foot.position.set(-75,-225,0);
    marker.add(camera);
    function makeTreeAt(x,z){
    var trunk = new THREE.Mesh(
    new THREE.CylinderGeometry(50,50,200),
    new THREE.MeshBasicMaterial({color: 0xA0522D}));
    var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 0x228B22}));
    top.position.y = 175;
    trunk.add(top);
    trunk.position.set(x, -75, z);
    scene.add(trunk);
    }
    makeTreeAt(500,0);
    makeTreeAt(-500,0);
    makeTreeAt(750,-1000);
    makeTreeAt(-750,-1000);

    var is_cartwheeling = true;
    var is_flippy = true;
    function animate()
    {
    requestAnimationFrame(animate);
    if(is_cartwheeling)
    { avatar.rotation.z = avatar.rotation.z + 0.05;}
    if(is_flippy)
    { avatar.rotation.x = avatar.rotation.x + 0.05;}
    renderer.render(scene, camera);
    }
    animate();

    document.addEventListener('keydown',function(event){
    var code = event.keyCode;
    if(code == 37) marker.position.x = marker.position.x-5;//left
    if(code == 39) marker.position.x = marker.position.x+5;//right
    if(code == 38) marker.position.z = marker.position.z-5;//up
    if(code == 40) marker.position.z = marker.position.z+5;//down
    if(code == 70) is_flippy = !is_flippy;//flippiness
    if(code == 67) is_cartwheeling = !is_cartwheeling;//cartwheeling
    });


    // Now, show what the camera sees on the screen:
    renderer.render(scene, camera);
    </script>