我试图将此处理代码转换为p5，以便我可以将其改编为我的第一个网站。
我环顾四周，发现
这是我的处理代码。 （抱歉长度）
Servlet以下是我到目前为止转换JS的内容：
//drawing hexagons
Grid grid;
int numColumns;
int numRows;
float radius;
int diameter;
color[] pallet = {#2e2e2e, #52658a, #212c41, #8ba3d4, #a7c0f1};
void setup(){
size(1440, 900);
smooth();
radius = 15;
diameter = int(radius) * 2;
//setting length and width for 2-d array of hexagons
numColumns = int(width / (sqrt(3) * radius)) + 1;
numRows = int(height / (.75 * diameter)) + 1;
//create grid of hexagons object
grid = new Grid(numColumns, numRows, radius);
//randomly set initial color of hexagons
for(int i = 0; i < numColumns; i++){
for(int j = 0; j < numRows; j++){
Hexagon selected = grid.getHexagon(i, j);
selected.setFillColor(pallet[int(random(5))]);
}
}
grid.draw();
frameRate(60);
}
void draw(){
grid.draw();
//randomly pick 15 hexagons from grid and randomly assign them a new color
for(int i = 0; i < 15; i++){
Hexagon selected = grid.getHexagon(int(random(numColumns)), int(random(numRows)));
selected.setFillColor(pallet[int(random(5))]);
}
}
class Hexagon{
color c;
float r;
float x;
float y;
float angle = TWO_PI / 6;
float startAngle = PI / 6;
Hexagon(float[] center, float radius){
r = radius;
x = center[0];
y = center[1];
}
void draw(){
//noStroke();
fill(c);
//arrays of coordinates for beginShape()
float[] vertY = new float[6];
float[] vertX = new float[6];
//spinning the circle and calculating x and y position for vertices
//removing start angle makes the hexagons flat-topped but they won't be spaced on grid properly
for(int i = 0; i < 6; i++){
float angleRad = (angle * i) + startAngle;
vertX[i] = x + (r * cos(angleRad));
vertY[i] = y + (r * sin(angleRad));
}
beginShape();
vertex(vertX[0], vertY[0]);
vertex(vertX[1], vertY[1]);
vertex(vertX[2], vertY[2]);
vertex(vertX[3], vertY[3]);
vertex(vertX[4], vertY[4]);
vertex(vertX[5], vertY[5]);
endShape(CLOSE);
}
void setFillColor(color setColor){
c = setColor;
}
}
class Grid{
int columns;
int rows;
float r;
Hexagon[][] hexagons;
Grid(int numColumns, int numRows, float radius){
columns = numColumns;
rows = numRows;
r = radius;
hexagons = new Hexagon[columns][rows];
//starts the first hexagon at the corner of the window
float[] center = {0, 0};
for(int i = 0; i < rows; i++){
for(int j = 0; j < columns; j++){
//create a new hexagon with center center
hexagons[j][i] = new Hexagon(center, r);
//add the width of the hexagon to the x-coordinate of center
center[0] += (r * sqrt(3));
}
//add the height spacing to the y-coordinate of center
center[1] += (r * 3) / 2;
//if the row number is divisible by two, bump the first center in the row
if(i % 2 == 0){
center[0] = (sqrt(3) / 2) * r;
}else{
center[0] = 0;
}
}
}
void draw(){
for(int i = 0; i < rows; i++){
for(int j = 0; j < columns; j++){
hexagons[j][i].draw();
}
}
}
//for setting the color and possibly other things
Hexagon getHexagon(int column, int row){
return hexagons[column][row];
}
}
任何帮助都将不胜感激。
答案 0 :(得分：1)
我设法将Processing转换为Javascript。最大的问题是转换类，Javascript中的类完全不同。
此外，常量TWO_PI和PI不存在。
//drawing hexagons in Javascript
var grid;
var numColumns;
var numRows;
var radius;
var diameter;
var canvasHeight;
//var pallet = ['#452123', '#567244', '#321321', '#987342', '#232783'];
function setup(){
canvasHeight = document.body.clientHeight - height;
var canvas = createCanvas(window.innerWidth, canvasHeight); //size(1440, 900);
canvas.parent("sketch-holder");
canvas.id("background-canvas");
smooth();
radius = 15;
diameter = radius * 2;
//setting length and width of 2-d array of hexagons
numColumns = int(width / (sqrt(3) * radius)) + 1;
numRows = int(height / (.75 * diameter)) + 1;
//create grid of hexagons object
grid = new Grid(numColumns, numRows, radius);
/*
//randomly set initial color of the hexagons
for(var i = 0; i < numColumns; i++){
for(var j = 0; j < numRows; j++){
var selected = grid.getHexagon(i, j);
selected.setFillColor(pallet[random(5)]);
}
}
*/
grid.display();
frameRate(1);
}
function draw(){
grid.display();
//randomly pick 15 hexagons from the grid and randomly assign them a new color
/*
for(var i = 0; i < 15; i++){
var selected = grid.getHexagon(random(numColumns), random(numRows));
selected.setFillColor(pallet[random(5)]);
}
*/
}
function Hexagon(center, radius){
//this.c;
this.r = radius;
this.x = center[0];
this.y = center[1];
this.angle = 6.28 / 6;
this.startAngle = 3.14 / 6;
console.log(this.angle);
/*
constructor(center, radius){
this.r = radius;
this.x = center[0];
this.y = center[1];
}
*/
this.display = function(){
//noStroke();
//fill(this.c);
//arrays of coordinates for beginShape()
this.vertY = new Array(6); //float[] vertY = new float[6];
this.vertX = new Array(6); //float[] vertX = new float[6];
//spinning the circle and calculating the x and y coordinates for the vertices
for(var i = 0; i < 6; i++){
angleRad = (this.angle * i) + this.startAngle;
this.vertX[i] = this.x + (this.r * cos(angleRad));
this.vertY[i] = this.y + (this.r * sin(angleRad));
}
beginShape();
console.log("asperw.me");
vertex(this.vertX[0], this.vertY[0]);
vertex(this.vertX[1], this.vertY[1]);
vertex(this.vertX[2], this.vertY[2]);
vertex(this.vertX[3], this.vertY[3]);
vertex(this.vertX[4], this.vertY[4]);
vertex(this.vertX[5], this.vertY[5]);
endShape(CLOSE);
}
/*
this.setFillColor = function(setColor){
c = setColor;
}
*/
}
function Grid(numColumns, numRows, radius){
this.columns = numColumns;
this.rows = numRows;
this.r = radius;
this.hexagons = []; //Hexagon[][] hexagons;
for(var i = 0; i < numColumns; i++){
this.hexagons[i] = new Array(numRows);
}
/*
function Grid(numColumns, numRows, radius){
this.columns = numColumns;
this.rows = numRows;
this.r = radius;
console.log(numColumns);
}
*/
//starts the first hexagon at the corner of the canvas
this.center = [0, 0];
for(var i = 0; i < this.rows; i++){
for(var j = 0; j < this.columns; j++){
//create a new hexagon with center center
this.hexagons[j][i] = new Hexagon(this.center, this.r);
//add the width of the hexagon to the x-coordinate of the center
this.center[0] += (this.r * sqrt(3));
}
//add the height spacing to the y-coordinate of the center
this.center[1] += (this.r * 3) / 2;
//if the row number is divisible by two, bump the first center in the row
if(i % 2 == 0){
this.center[0] = (sqrt(3) / 2) * this.r;
}else{
this.center[0] = 0;
}
}
this.display = function(){
for(var i = 0; i < this.rows; i++){
for(var j = 0; j < this.columns; j++){
this.hexagons[j][i].display();
}
}
}
/*
//for getting a hexagon from the grid
function/*Hexagon getHexagon(/*intcolumn, /*introw){
return (hexagons[column][row]);
}
*/
}
答案 1 :(得分：0)
老实说，我认为你是从错误的角度接近这个。您不需要通过简单地替换所有特定关键字，将代码从一种语言翻译成另一种语言。
相反，您必须首先确定代码正在做什么。用英语将其写出，作为计算机遵循的步骤列表。如果你已经写完了，那就是一个算法，你可以开始考虑用目标语言实现。
你还需要养成working in smaller pieces的习惯。而不是发布您的整个项目，发布一段特定的代码行，这些代码不符合您的预期，我们将从那里开始。