Im working my way through the Khanacademy site and a a bit confused on how to make randomly sized(within certain parameters), and colored fish after mouseClick. I cant even get mouseClick working.
background(89, 216, 255);
var mouseClicked = function(drawFish){
};
^^^^^^^^^^^^^^^ What am I missing here? ^^^^^^^^^^
var drawFish = function(centerX, centerY, bodyLength, bodyHeight, bodyColor, tailWidth,
tailHeight, eyeColor,tailColor, eyeWidth, eyeHeight){
noStroke();
fill(bodyColor);
// body
ellipse(centerX, centerY, bodyLength, bodyHeight);
// tail
fill(tailColor);
triangle(centerX-bodyLength/2, centerY,
centerX-bodyLength/2-tailWidth, centerY-tailHeight,
centerX-bodyLength/2-tailWidth, centerY+tailHeight);
// eye
fill(eyeColor);
ellipse(centerX+bodyLength/3, centerY, eyeWidth, eyeHeight);
};
drawFish(296, 281, -57,52, color(245, 227, 30),-15, 60,color(13, 12, 12),color(66, 58, 58),4,4); // yellowFish
drawFish(290, 80, 180, 140, color(255, 0, 0), 57, 45,color(46, 66, 194), color(255, 204, 0),32,8); // redFish
drawFish(146,233, 218, 141, color(62, 110, 67), 30, 10, color(245, 240, 245), color(0, 51, 255),12,48); // greenFish
drawFish(233, 370, 322, 36, color(133, 34, 199), 61,15, color(255, 0, 0), color(34, 255, 0),67,20); // purpFish
Any other pointers or recommendations would be greatly appreciated.
Thanks guys!
Cool fishes! I'm learning Processing too. I ran your code and came up with this function for having random fishes appear when you click.
void mouseReleased() {
var c1 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var c2 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var c3 = color(random(0,255),random(0,255),random(0,255),random(0,255))
var s1 = random(10,100)
var s2 = random(10,100)
var s3 = random(10,100)
var s4 = random(10,100)
var s5 = random(5,s1)
var s6 = random(5,s2)
drawFish(mouseX, mouseY, s1, s2, c2, s3,s4, c2, c3,s5,s6); //randFish
}
To make an animation, I think you will want to use the draw() function, use variables for the x,y locations and redraw the background each time. This example has the red fish follow the mouse around.
void draw(){
background(89, 216, 255);
drawFish(mouseX, mouseY, 180, 140, color(255, 0, 0), 57, 45,color(46, 66, 194), color(255, 204, 0),32,8); // redFish
}
I hope your aquarium comes out really great!
Related
I am working with a pose estimator that is giving me (x, y, z) for each joint. I am attempting to calculate angles based on these and running into some issues.
const find_angle = (Ax,Ay,Az,Bx,By,Bz,Cx,Cy,Cz) =>
{
var AB = Math.sqrt(Math.pow(Bx-Ax,2) + Math.pow(By-Ay,2) + Math.pow(Bz-Az,2));
var CB = Math.sqrt(Math.pow(Bx-Cx,2) + Math.pow(By-Cy,2) + Math.pow(Bz-Cz,2));
var AC = Math.sqrt(Math.pow(Cx-Ax,2) + Math.pow(Cy-Ay,2) + Math.pow(Cz-Az,2));
const radians = Math.acos((CB*CB+AB*AB-AC*AC) / (2*CB*AB));
const angle = (Math.abs(radians*180.0/Math.PI))
console.log(angle)
}
// Knee
find_angle(101, 166, 409, 107, 209, 790, 115, 248, 9564)
// Ankle
find_angle(100, 259, 1549, 97, 299, 9471, 95, 315, 1575)
Ouput:
The Knee output looks correct to me but Ankle does not. I was expecting an angle in the range of 70-90. I'm wondering if this function is too simple for what I am trying to do or what improvements could be made to make it consistent across all joints. User is facing the camera while pose is being estimated.
I'm try to show the entirety of the green circle, and only the intersecting point of the pink circle.
context
Anyone have any idea if this is possible in Javascript?
function setup() {
createCanvas(500,500);
}
function draw() {
noStroke();
fill(3, 252, 102);
ellipse(100, 100, 100, 100);
fill(255, 46, 206, 100);
ellipse(130,130, 100, 100);
}
My aim is to hook up a midi device to my computer to create and manipulate shapes in p5.js. I'm still learning code so have a few questions regarding arrays and keys.
Is there a way to say if any of the values in noteC, noteE and noteG are triggered then 'something happens'?
But in a sort of combo as that is a chord as a opposed to say noteD and noteE which is not a chord.
Essentially I am trying to manipulate the shapes via chords being played but I am unaware of if "noteC + noteE + noteG" would do anything.
For example:
var noteC = [24, 36, 48, 60, 72, 84, 96, 108]
var noteE = [28, 40, 52, 64, 76, 88, 100]
var noteG = [31, 43, 55, 67, 79, 91, 103]
function keyPressed();
if (value ===noteC, noteE, noteG) {
ellipse(200, 200, 25, 30);
ellipse(200, 200, 50, 60);
ellipse(200, 200, 100, 100);
To do it without chords I imagine it would go something like:
function keyPressed() {
if (value ===36) {
ellipse(200, 200, 25, 30);
} else if (value === 40) {
ellipse(200, 200, 50, 60);
}
}
However manually transforming shapes separately away from any combination of chords feels static and I would like there to be a relationship between the manipulation if a chord is being played.
I would like it so that the scale of the ellipse is determined by the velocity of the keys being played but if it is part of a chord the x and y parameters will be the same.
Not asking for someone to do the code but if anyone could help me understand or point me in the right direction that would be great!
Thanks!
I do have an array of objects (book) here. My question is: How do I use the "color" object so each book has its color property? I think it has to be something like this -> book[amount].color <- but I can't make it work.
I don't know how to call the color property.
This is the array of objects:
var book = [
{title: "The Giver",
stars: 3,
author: "Lowry Loys",
color: color(0, 38, 255), //How do I make this property work in the code?
image: true},
{title: "How to win friends",
stars: 5,
author: "Dale Carnegie",
color: color(214, 255, 219),
image: false},
{title: "Principios fund. de la filosofía",
stars: 5,
author: "Georges Politzer",
color: color(115, 0, 255),
image: false}
];
This is the code
// draw shelf
fill(173, 117, 33);
rect(0, 120, width, 10);
// draw books + title + author
for (var amount = 0; amount < book.length; amount++) { //draw books
fill(214, 255, 219);
rect(154*amount, 20, 90, 100);
fill(0, 0, 0);
textSize(13);
text(book[amount].title, 5 + 158*amount, 27, 68, 100); //draw title
textSize(10);
text(book[amount].author, 5 + 155*amount, 91, 75, 100); //draw author
for (var s = 0; s < book[amount].stars; s++) { //draw stars
image(getImage("cute/Star"), 11 + s * 15 + amount * 151, 98, 15, 22);
}
for (var i = 0; i < book[amount].image; i++) { //draw stars
image(getImage("avatars/aqualine-sapling"), 9 + i * 60 + amount * 46, 42, 36, 39);
}
}
Assuming you don't have a color function, you'll have to quote those properties and then extract the color information.
In this simple example a regex grabs the color values from the (index 1) object, and then sets the background color of a temporary element.
var book=[{title:"The Giver",stars:3,author:"Lowry Loys",color:'color(0, 38, 255)',image:!0},{title:"How to win friends",stars:5,author:"Dale Carnegie",color:'color(214, 255, 219)',image:!1},{title:"Principios fund. de la filosofía",stars:5,author:"Georges Politzer",color:'color(115, 0, 255)',image:!1}]
const result = document.getElementById('result');
const color = book[1].color.match(/(\d+)/g);
result.style.backgroundColor = getColor(color);
function getColor(color) {
return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
}
<div id="result">sdfdsfdsf</div>
The color function doesn't exist in plain javascript. I think the easiest way will be to store your colors as a HEXs in strings like below:
var book = [{
title: "The Giver",
stars: 3,
author: "Lowry Loys",
color: "#0026ff", // converted rgb(0, 38, 255)
image: true
}];
book[0].color; // "#0026ff"
You can use e.g. this tool to manually convert colors to HEX. If you don't like it just implement your own color function to convert rgb to hex (link).
Here you can also find an interesting npm package named Qix-/color:
JavaScript library for immutable color conversion and manipulation with support for CSS color strings.
Hope it helps!
I`m trying to add an edge to a toolbar in mxGraph. Vertex following the examples i can do it perfectly. But edges i can't do it, someone can help me? I declare a link style, but it doesn't work.
var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};
addVertex('images/rectangle.gif', 100, 40, '');
addVertex('images/rounded.gif', 100, 40, 'shape=link');
addVertex('images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('images/actor.gif', 30, 55, 'shape=umlActor');
I think you can edit XML file of the toolbar you want to add edge to it, just like adding new cell to the toolbar
Though Edge is a cell object, it cannot be placed in the toolbar for drag and drop. If your intention is to create connection between vertices, you can use the following in your code and check:
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
On mouseover for any vertex (source vertex), one connection icon (With Right Arrow) will appear. Just click and drag that icon to the another vertex (Target Vertex). This will create edge between two verties
var addVertex = function(mylabel, icon, w, h, style)
{
var vertex = new mxCell(mylabel, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
addToolbarItem(graph, toolbar, vertex, icon);
};
addVertex("None",'<c:url value="/resources/js/examples/editors/images/swimlane.gif"/>', 120, 160, 'shape=swimlane;startSize=20;');
addVertex("Catagory 1",'<c:url value="/resources/js/examples/editors/images/rectangle.gif"/>', 100, 40, 'shape=rectangle');
addVertex("Catagory 2",'<c:url value="/resources/js/examples/editors/images/rounded.gif"/>', 100, 40, 'shape=rounded');
addVertex("Catagory 3",'<c:url value="/resources/js/examples/editors/images/ellipse.gif"/>', 40, 40, 'shape=ellipse');
addVertex("Catagory 4",'<c:url value="/resources/js/examples/editors/images/rhombus.gif"/>', 40, 40, 'shape=rhombus');
addVertex("Catagory 5",'<c:url value="/resources/js/examples/editors/images/triangle.gif"/>', 40, 40, 'shape=triangle');
addVertex("Catagory 6",'<c:url value="/resources/js/examples/editors/images/cylinder.gif"/>', 40, 40, 'shape=cylinder');
addVertex("Catagory 7",'<c:url value="/resources/js/examples/editors/images/actor.gif"/>', 30, 40, 'shape=actor');
// toolbar.addLine();