Savannah Singh - Project 4
var gridarr = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0]
];
var a = 0;
function setup() {
createCanvas(1500, 800);
background(50);
function drawarray(fade) {
for (var i = 0; i < 16; i++) {
for (var j = 0; j < 16; j++) {
a = gridarr[i][j];
if (a === 1) {
fill(158, 255, 164);
} else {
fill(255, 130, 177);
}
// typical way of mapping out a grid (counter * scale) + offset
// where counter is a var from the forloop
// scale is value that will term the size/position of each drawing
// offset is a relative movement to place
// the grid collection around on the canvas
rect((j * 30) + 15, (i * 30) + 15, 20, 20);
}
}
}
push();
translate(20, 20);
drawarray(255);
pop();
push();
translate(850, 20);
rotate(radians(45));
drawarray(255);
pop();
push();
translate(900, 700);
rotate(radians(-45));
scale(.3);
drawarray(100);
pop();
push();
translate(1000, 150);
rotate(radians(-65));
scale(.5);
drawarray(100);
pop();
}
Sketch 6
For this sketch, I made an array of a corgi and then I used push and pop to rotate and scale it.
var blob;
/*
// sample example
var sampletoon = {
"name":"Boris",
"r":200,
"g":160,
"b":200,
"head": 60,
"torso": 33,
"posX":50,
"posY":90,
"moveX":[5,-3,4,-6,-3,3,4,-2],
"moveY":[2,4,4,6,-3,3,4,-2]
}
*/
var count = 200;
var x = 0;
var posX = [];
var posX2 = [];
var posY = [];
var posY2 = [];
var speedX = [];
var speedX2 = [];
var speedY = [];
var speedY2 = [];
var sizeW = [];
var sizeH = [];
var colors = [];
var d = 0
var b = 0
var sx = 0;
var sy = 0;
function preload() {
blob = loadJSON("blob.json");
}
function setup() {
createCanvas(displayWidth, 400);
rectMode(CENTER);
// this shows the whole blob json data package
console.log(blob);
noStroke();
for (var i=0; i < count; i++) {
posX[i] = width/2;
posY[i] = height/2;
posX2[i] = width/4;
posY2[i] = height/4;
speedX[i] = random(-5, 5);
speedY[i] = random(-5, 5);
speedX2[i] = random(-15, 15);
speedY2[i] = random(-15, 15);
sizeW[i] = random(1, 2);
sizeH[i] = random(1, 2);
colors[i] = (random(0, 255));
}
}
function draw() {
background(126, 161, 255,100);
for (var i = 0; i < count; i++) {
// //update all positions
posX[i] += speedX[i];
posY[i] += speedY[i];
posX2[i] += speedX2[i];
posY2[i] += speedY2[i];
fill(255);
// fill(150, 200, 75);
ellipse(posX2[i], posY2[i], sizeW[i], sizeW[i]);
// tint(0, 153, 204, 126);
//check boundaries for all balls
if (posX[i] < 40+sizeW[i]/2 || posX[i] > (width-40)-sizeW[i]/2 ) {
speedX[i] = -speedX[i];
}
if (posY[i] < 40+sizeW[i]/2 || posY[i] > (height-40)-sizeW[i]/2) {
speedY[i] = -speedY[i];
}
if (posX2[i] < 40+sizeW[i]/2 || posX2[i] > (width-40)-sizeW[i]/2 ) {
speedX2[i] = -speedX2[i];
}
if (posY2[i] < 40+sizeW[i]/2 || posY2[i] > (height-40)-sizeW[i]/2) {
speedY2[i] = -speedY2[i];
}
}
for (var d = 0; d <= width; d += 50) {
for (var b = 0; b <= height; b += 50) {
fill (random(255), 0, random(255));
ellipse(d, b, 25, 25);
}
}
// updateToon(blob.toons[0]); // Natasha
// updateToon(blob.toons[1]); // Boris
for(var i = 0; i < blob.toons.length; i++)
{
updateToon(blob.toons[i]);
}
fill(255,60);
triangle(displayWidth/2, 0, mouseX-50, mouseY, mouseX+50, mouseY);
fill(255,100);
ellipse(mouseX, mouseY, 100,20)
}
function updateToon(obj) {
push();
if ( int(random(10)) > 8) {
obj.nextX = int(random(obj.moveX.length));
obj.nextY = int(random(obj.moveY.length));
}
obj.posX += obj.moveX[obj.nextX];
obj.posY += obj.moveY[obj.nextY];
// console.log(obj.posX);
if (obj.posX > width) {
obj.posX = 0;
}
if (obj.posX < 0) {
obj.posX = width;
}
if (obj.posY > height) {
obj.posY = 0;
}
if (obj.posY < 0) {
obj.posY = height;
}
drawToon(obj);
pop();
}
function drawToon( obj) {
// console.log(obj.posX[s]);
push();
translate(obj.posX , obj.posY);
//head
fill(obj.r,obj.g,obj.b);
ellipse(0,20,obj.head,obj.head);
// eyes
fill(0);
ellipse(-10,obj.head / 2 ,5,5);
ellipse(10,obj.head / 2,5,5);
//torso
fill(obj.r,obj.g,obj.b);
rect(0,70,obj.torso,obj.torso);
// // bowties
// if(obj.bowtie == "black") {
// fill(0);
// triangle(0, obj.head + 30, obj.head - 10, obj.head +20, obj.head - 10, obj.torso + 40);
// triangle(0,obj.head +30, -(obj.head - 10), obj.head +20, -(obj.head-10), obj.torso + 40);
// }
if(obj.hat == "tophat") {
fill(0);
rect(0, -obj.head / 3, obj.head - 10, obj.head);
rect(0, 0, obj.head +10, obj.head /3 );
}
if(obj.hat == "beanie") {
fill(obj.r +100,obj.g,obj.b);
arc(0, 0, obj.head, obj.head + 5, PI, 0);
fill(obj.r +50,obj.g,obj.b);
rect(0,0,obj.head, obj.head / 3);
}
if(obj.hat == "cap") {
fill(obj.r,obj.g,obj.b +100);
arc(0, 10, obj.head +5, obj.head +5, PI, 0);
fill(255);
rect(obj.head / 1.5, 7, obj.head / 3, obj.head / 10);
}
// bowties
if(obj.bowtie == "black") {
fill(0);
triangle(0,0, obj.torso -20, obj.torso-20, obj.torso-30, obj.torso-30);
}
//name
fill(255);
textAlign(CENTER);
textSize(obj.torso/2);
text(obj.name,0,obj.torso/2 +60);
pop();
}
Sketch 7
For this sketch, my partner and I worked on making a disco with several people wearing different hats.
const CHART = document.getElementById("pokeChart");
console.log(Chart.defaults.scale.ticks);
var i = 0;
var pikachu;
var bulbasaur;
var charmander;
var squirtle;
function preload() { // using this as its good for local or remote data fetching
loadJSON('https://pokeapi.co/api/v2/pokemon/pikachu/', getpikachu);
loadJSON('https://pokeapi.co/api/v2/pokemon/bulbasaur/', getbulbasaur);
loadJSON('https://pokeapi.co/api/v2/pokemon/charmander/', getcharmander);
loadJSON('https://pokeapi.co/api/v2/pokemon/squirtle/', getsquirtle);
}
let pokeChart = new Chart (CHART, {
type: 'radar',
data: {
labels: ['HP', 'Attack', 'Defense', 'S. Attack', 'S. Defense', 'Speed'],
datasets: [
{
label: 'Pikachu',
backgroundColor: 'rgba(255, 251, 0, 0.1)',
borderColor: 'rgb(255, 251, 0)',
borderWidth: 2,
data: [90, 39, 55, 32, 74, 49]
}, {
label: 'Charmander',
backgroundColor: 'rgba(255, 0, 0, 0.1)',
borderColor: 'rgb(255, 0, 0)',
borderWidth: 2,
data: [65, 32, 55, 87, 44, 27]
}, {
label: 'Squirtle',
backgroundColor: 'rgba(0, 62, 255, 0.1)',
borderColor: 'rgb(0, 62, 255)',
borderWidth: 2,
data: [45, 87, 27, 99, 63, 10]
}, {
label: 'Bulbasaur',
backgroundColor: 'rgba(100, 255, 0, 0.1)',
borderColor: 'rgb(100, 255, 0)',
borderWidth: 2,
data: [35, 76, 34, 14, 88, 100]
}
]
}
});
//
function getpikachu (data) {
pikachu = data;
console.log(pikachu);
}
function getbulbasaur (data) {
bulbasaur = data;
console.log(bulbasaur);
}
function getcharmander (data) {
charmander = data;
console.log(charmander);
}
function getsquirtle (data) {
squirtle = data;
console.log(squirtle);
}
function stats (object) {
object.stats[1].name;
console.log(object.stats[1].base_stat);
}
Project 4
For project 4, I attempted to use the Pokemon API. I used it to grab the numbers of a few pokemon's stats. I placed the numbers it grabbed into a chart that is similar to the one used in the game.