Skip to content

Dean's branch #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dravida1 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Dean's branch #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db2dc05
Add dog images to images folder
dravida1 Dec 11, 2017
a0e081d
Submit codingEnvironment.html and custBlocks.js
dravida1 Dec 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 114 additions & 15 deletions codingEnvironment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>
<div style="background-color: #FFFFFF; float: left; width: 49%; height: 800px">
<div style="height:53%;width:98%;outline-style: solid;outline-width: 1px;text-align:center;margin-left:5px;margin-top:5px;">
<div style="position:absolute;z-index:4;width:45%;height:37%">
<canvas id="catAnimation"></canvas>
Copy link
Copy Markdown
Owner

@drguthals drguthals Oct 2, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense

<canvas id="spriteAnimation"></canvas>
</div>
</div>
<hr>
Expand All @@ -79,6 +79,17 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>
<img src="images/cat3_numbered.png" style="margin-left:5px;margin-top:5px;outline-style: solid;outline-width: 1px;height:180px;" />
</td>
</tr>
<tr>
Copy link
Copy Markdown
Owner

@drguthals drguthals Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tests

<td>
<img src="images/dog1_numbered.png" style="margin-left:5px;margin-top:5px;outline-style: solid;outline-width: 1px;height:180px;" />
</td>
<td>
<img src="images/dog2_numbered.png" style="margin-left:5px;margin-top:5px;outline-style: solid;outline-width: 1px;height:180px;" />
</td>
<td>
<img src="images/dog3_numbered.png" style="margin-left:5px;margin-top:5px;outline-style: solid;outline-width: 1px;height:180px;" />
</td>
</tr>
</table>
</div>
</div>
Expand All @@ -97,10 +108,17 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>
<block type="whenrunclicked"></block>
<block type="clearscreen"></block>
</category>
<category name="cats" colour="175">
<block type="catpose"></block>

<category name="Animals" colour="175">
<block type="animalSay"></block>
<category name="cats" colour="175">
<block type="catpose"></block>
</category>
<category name="dogs" colour="175">
<block type="dogpose"></block>
</category>
</category>

<sep></sep>

<category name="Logic" colour="210">
Expand Down Expand Up @@ -139,11 +157,11 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>
/********************
* Setup the Canvas *
********************/
var canvas = document.getElementById("catAnimation");
var canvas = document.getElementById("spriteAnimation");
canvas.width = 480;
canvas.height = 480;

var ctx = document.getElementById('catAnimation').getContext('2d');
var ctx = document.getElementById('spriteAnimation').getContext('2d');

var animation = true;

Expand Down Expand Up @@ -186,21 +204,48 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>

var cat1 = sprite({
context: canvas.getContext("2d"),
width: 500,
width: 250,
height: 500,
image: catImage,
x: 0,
y: 0
});

/********************
* Defining the dog *
********************/
var dogImage = new Image();
dogImage.src = "images/dog1.png";

var dog1 = sprite({
context: canvas.getContext("2d"),
width: 250,
height: 500,
image: dogImage,
x: 250,
y: 0
});

/******************
* Show the cat *
******************/
cat1.render();
cat1.render();

/******************
* Show the dog *
*******************/
dog1.render();

var indexToArrays = 0;
var numOfInstructions = 0;
var arrayOfPoses = [];
var arrayOfCatPoses = [];
var arrayOfDogPoses = [];

var arrayOfWords = [];
var indicesToOutputWords = [];
var indexToWords = 0;



/**************************************
* RUN and STOP buttons on the canvas *
Expand All @@ -227,33 +272,66 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>
window.requestAnimationFrame(animate);
}

function updatePose(poseNum){
arrayOfPoses.push(poseNum);

/**************************
** update the Cat Pose **
**************************/
function updateCatPose(catPoseNum){
arrayOfCatPoses.push(catPoseNum);
numOfInstructions++;
}
}

/**************************
** update the Dog Pose **
**************************/
function updateDogPose(dogPoseNum){
arrayOfDogPoses.push(dogPoseNum);
numOfInstructions++;
}

/*******************
** Say words ******
*******************/
function say(words) {
arrayOfWords.push(words);
indicesToOutputWords.push(numOfInstructions);
numOfInstructions++;
}

function animate() {
setTimeout(function() {
setcatImage(arrayOfPoses[indexToArrays]);

clearCanvas();
setcatImage(arrayOfCatPoses[indexToArrays]);
setDogImage(arrayOfDogPoses[indexToArrays]);


if(indicesToOutputWords.indexOf(indexToArrays) != -1) {
setWords(arrayOfWords[indexToWords]);
indexToWords++;
}

indexToArrays++;

if (indexToArrays == numOfInstructions)
indexToArrays = 0;
indexToWords = 0;

if (animation) {
window.requestAnimationFrame(animate);
}
}, 1000);
}



function stopCode() {
animation = false;
}

function resetCanvas(){
clearCanvas();
setcatImage(1);
setDogImage(1);
}

/*************************************
Expand All @@ -275,13 +353,34 @@ <h1>CSE 190 Blockly Playground: Project 3</h1>
function setcatImage(catIndex){
if(!catIndex)
catIndex = 1;
clearCanvas();
catImage.src = "images/cat"+catIndex+".png";
ctx.drawImage(cat1.image, cat1.x, cat1.y);
ctx.save();
ctx.restore();
}

/****************************
* Changing the dog's Pose *
****************************/
function setDogImage(dogIndex){
if(!dogIndex)
dogIndex = 1;
dogImage.src = "images/dog"+dogIndex+".png";
ctx.drawImage(dog1.image, dog1.x, dog1.y);
ctx.save();
ctx.restore();
}

/****************************
** set the word on canvas **
****************************/
function setWords(words) {
ctx.font="30px Arial";
ctx.fillText(words, 200, 400);
ctx.save();
ctx.restore();
}

/***********************
* Clearing the Canvas *
***********************/
Expand Down
46 changes: 44 additions & 2 deletions customBlocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Blockly.Blocks['clearscreen'] = {
Blockly.Blocks['catpose'] = {
init: function() {
this.appendDummyInput()
.appendField("Change Pose")
.appendField("Change Cat Pose")
Copy link
Copy Markdown
Owner

@drguthals drguthals Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great specification here

.appendField(new Blockly.FieldDropdown([["1","1"], ["2","2"], ["3","3"]]), "catIndex");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
Expand All @@ -41,6 +41,34 @@ Blockly.Blocks['catpose'] = {
}
};

Blockly.Blocks['dogpose'] = {
init: function() {
this.appendDummyInput()
.appendField("Change Dog Pose")
.appendField(new Blockly.FieldDropdown([["1","1"], ["2", "2"], ["3", "3"]]), "dogIndex");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(120);
this.setTooltip("");
this.setHelpUrl("");
}
};

Blockly.Blocks['animalSay'] = {
init: function() {
this.appendValueInput('text')
.setCheck('String')
.appendField('Say');
this.setNextStatement(true);
this.setPreviousStatement(true);
this.setInputsInline(true);
this.setColour(0);
this.setTooltip('Returns number of letters in the provided text.');
this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
}
};


Blockly.JavaScript['whenrunclicked'] = function(block) {
var statements_name = Blockly.JavaScript.statementToCode(block, 'NAME');
var blockCode = statements_name;
Expand All @@ -54,6 +82,20 @@ Blockly.JavaScript['clearscreen'] = function(block) {

Blockly.JavaScript['catpose'] = function(block) {
var dropdown_catindex = block.getFieldValue('catIndex');
var blockCode = 'updatePose('+dropdown_catindex+');';
var blockCode = 'updateCatPose('+dropdown_catindex+');';
return blockCode;
};

Blockly.JavaScript['dogpose'] = function(block) {
var dropdown_dogIndex = block.getFieldValue('dogIndex');
var blockCode = 'updateDogPose('+dropdown_dogIndex+');';
return blockCode;
};

Blockly.JavaScript['animalSay'] = function(block) {
var words = block.getFieldValue('text');
var blockCode = 'say('+words+');';
return blockCode;
}


Binary file added images/dog1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dog1_numbered.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dog2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dog2_numbered.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dog3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/dog3_numbered.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.