0

I'm in my first ever CS class. For our final, my team and I want to create a piece of randomized art by creating multiple questions/inputs with outputs that link to specific images that will all be generated onto a canvas. Is there a way a way to link outputs to image generation in Javascript? Also, what could one even call what we're trying to do, so that we can research similar projects and how they were done?

ducknostrils
  • 1
  • 1

1 Answers1

0

This answer can have multiple answers, as it is quite abstract, but what you are looking for is for a guide, so here's my take to it:

You could choose a lot of paths to achieve what you want, either by searching for similar projects that does something similar, or just do it in plain JavaScript, also if you decide to take the JavaScript approach, you could use libraries to make it easier, that could show you the path to your end goal.

I guess this can be called like random image painter, or generator, if you want to try some searches in google with that.

However if it where by me, I would do it in JavaScript following certain steps:

  • You need the images files you want to be generated, which will be in a folder somewhere in your project.
  • You need then the questions with inputs, which I assume is better if they are a group of radio buttons maybe? So something like:

<div class="questionA">
    <h4>Question A</h4>
    <input name="questionA" type="radio" value="path/toimagefile1CategoryCows.png">1
    <input name="questionA" type="radio" value="path/toimagefile2CategoryCows.png">2
    <input name="questionA" type="radio" value="path/toimagefile3CategoryCows.png">3
    <input name="questionA" type="radio" value="path/toimagefile4CategoryCows.png">4
</div>
<div class="questionB">
    <h4>Question B</h4>
    <input name="questionB" type="radio" value="path/toimagefile1CategoryChickens.png">1
    <input name="questionB" type="radio" value="path/toimagefile2CategoryChickens.png">2
    <input name="questionB" type="radio" value="path/toimagefile3CategoryChickens.png">3
    <input name="questionB" type="radio" value="path/toimagefile4CategoryChickens.png">4
</div>

Just to put an example, this could be done in a lot of ways.

So, when the user selects any of the questions, you will have already which image paths you need to render into one image, for that you could use something like:

Or any you would like, you could do it even with Canvas from javascript and follow other solutions even in StackOverflow like:

Leo
  • 956
  • 8
  • 24